/**
 * Royal Wedding Invitation Opening Experience
 * Nisarga B K Weds Sharath B
 * Style: responsive.css (Mobile-First Viewport Adaptations & Desktop Polish)
 */

/* ========================================================
   BASE MOBILE ADAPTATIONS (360px to 430px)
   ======================================================== */

/* Small Mobile Screens (e.g. 360 x 800) */
@media screen and (max-width: 374px) {
  .app-header {
    padding: env(safe-area-inset-top, 10px) 14px 6px 14px;
    height: 56px;
  }

  .header-monogram {
    font-size: 1.05rem;
  }

  .btn-icon {
    width: 38px;
    height: 38px;
  }

  .envelope-rig {
    width: 88vw;
    height: calc(88vw * 0.65);
    max-height: 220px;
  }

  .swipe-instruction-container {
    padding: 8px 18px;
    bottom: calc(env(safe-area-inset-bottom, 16px) + 12px);
  }

  .instruction-kannada {
    font-size: 0.85rem;
  }

  .instruction-english {
    font-size: 0.62rem;
    letter-spacing: 1.6px;
  }

  .explore-cta-container {
    width: 92%;
    max-width: 310px;
    bottom: calc(env(safe-area-inset-bottom, 16px) + 10px);
  }

  .btn-royal-explore {
    padding: 11px 20px;
  }

  .btn-text-kannada {
    font-size: 1.05rem;
  }

  .btn-text-english {
    font-size: 0.6rem;
  }
}

/* Medium Mobile Devices (375x812, 390x844) */
@media screen and (min-width: 375px) and (max-width: 411px) {
  .envelope-rig {
    width: 86vw;
    height: calc(86vw * 0.65);
    max-height: 240px;
  }
}

/* Large Mobile Devices (412x915, 430x932) */
@media screen and (min-width: 412px) and (max-width: 600px) {
  .envelope-rig {
    width: 84vw;
    max-width: 380px;
    height: calc(84vw * 0.65);
    max-height: 250px;
  }

  .corner-ornament {
    width: clamp(140px, 30vw, 210px);
    height: clamp(140px, 30vw, 210px);
  }
}

/* Landscape Mode on Mobile Devices */
@media screen and (max-height: 520px) and (orientation: landscape) {
  .app-header {
    height: 48px;
    padding: 6px 16px;
  }

  .corner-ornament {
    width: 100px;
    height: 100px;
  }

  .envelope-rig {
    width: 52vh;
    height: calc(52vh * 0.65);
  }

  .swipe-instruction-container {
    bottom: 8px;
    padding: 6px 16px;
  }

  .instruction-kannada {
    font-size: 0.78rem;
  }

  .explore-cta-container {
    bottom: 8px;
    max-width: 280px;
  }

  .btn-royal-explore {
    padding: 8px 16px;
  }
}

/* ========================================================
   TABLET & DESKTOP ENHANCEMENTS
   ======================================================== */
@media screen and (min-width: 768px) {
  .envelope-scene {
    max-width: 650px;
  }

  .envelope-rig {
    width: 440px;
    height: 285px;
    max-height: 285px;
  }

  .corner-ornament {
    width: 240px;
    height: 240px;
  }

  .app-header {
    max-width: 1100px;
    margin: 0 auto;
    padding: 24px 32px;
  }

  .header-monogram {
    font-size: 1.35rem;
    letter-spacing: 3px;
  }

  .swipe-instruction-container {
    padding: 12px 30px;
    bottom: 36px;
  }

  .instruction-kannada {
    font-size: 1.05rem;
  }

  .instruction-english {
    font-size: 0.72rem;
  }

  .explore-cta-container {
    max-width: 360px;
    bottom: 30px;
  }

  .btn-royal-explore {
    padding: 15px 28px;
  }

  .btn-text-kannada {
    font-size: 1.25rem;
  }

  /* Custom Desktop Cursor Experience */
  body {
    cursor: grab;
  }

  body.is-dragging {
    cursor: grabbing;
  }
}

/* High-DPI Retina Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .invitation-image {
    image-rendering: auto;
  }
}

/* Reduced Motion Preference Accessibility */
@media (prefers-reduced-motion: reduce) {
  .swipe-animated-arrow,
  .sound-pulse-ring,
  .btn-sparkle-bg {
    animation: none !important;
  }

  .ambient-canvas {
    display: none;
  }
}