/* ============================================================
   Desktop Composition Architecture
   Art-directs large-viewport framing only.
   Mobile (< 1024px) is completely untouched.
   ============================================================ */

@media (min-width: 1024px) {
  /* Shared: stage wings — darken unused side fields so the
     centered content column reads as intentional cinema framing.
     Hero uses its own cinematic-tone refinement instead. */
  #invitation-scene::before,
  #living-memory-scene::before,
  #rsvp-section::before,
  #everything-you-need::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(
        to right,
        rgba(5, 4, 3, 0.48) 0%,
        rgba(5, 4, 3, 0.14) 18%,
        transparent 32%,
        transparent 68%,
        rgba(5, 4, 3, 0.14) 82%,
        rgba(5, 4, 3, 0.48) 100%
      );
  }

  /* Opening — cap optical scale so shields don't dwarf the brand */
  .opening-shield__outer {
    width: min(90vw, 72vh, 520px);
    height: min(90vw, 72vh, 520px);
  }

  .opening-shield__inner {
    width: min(72vw, 58vh, 416px);
    height: min(72vw, 58vh, 416px);
  }

  .opening-flare__gold {
    width: min(60vw, 720px);
  }

  .opening-flare__white {
    width: min(40vw, 480px);
  }

  .opening-logo img {
    max-width: 320px;
  }

  /* Hero — bottom-up cinematic readability (desktop art).
     Dominant falloff at the type zone; couple/door stay lit above. */
  .hero-frame {
    border-left: 1px solid rgba(255, 255, 255, 0.04);
    border-right: 1px solid rgba(255, 255, 255, 0.04);
  }

  .hero-cinematic-tone {
    background:
      radial-gradient(
        ellipse 90% 75% at 50% 38%,
        transparent 0%,
        transparent 70%,
        rgba(5, 4, 3, 0.12) 100%
      ),
      linear-gradient(
        to top,
        rgba(15, 13, 10, 0.72) 0%,
        rgba(15, 13, 10, 0.58) 12%,
        rgba(15, 13, 10, 0.4) 24%,
        rgba(15, 13, 10, 0.22) 38%,
        rgba(15, 13, 10, 0.1) 52%,
        rgba(15, 13, 10, 0.04) 64%,
        transparent 78%
      );
  }

  .hero-tagline {
    max-width: 22rem;
  }

  /* Invitation — stronger center stage; flourishes claim side field */
  .invitation-vignette {
    background:
      radial-gradient(
        ellipse 48% 70% at 50% 45%,
        rgba(15, 13, 10, 0.06) 0%,
        rgba(5, 4, 3, 0.45) 55%,
        rgba(5, 4, 3, 0.88) 100%
      );
  }

  .invitation-date-composition::before {
    left: -140px;
    transform: translateY(-40%) scale(1.75);
    opacity: 0.7;
  }

  .invitation-date-composition::after {
    right: -140px;
    transform: translateY(-40%) scale(1.75);
    opacity: 0.7;
  }

  /* Living Memory — stage lighting + slightly taller artwork */
  .memory-vignette {
    background:
      radial-gradient(
        ellipse 70% 48% at 50% 36%,
        rgba(229, 196, 131, 0.09) 0%,
        transparent 58%
      ),
      radial-gradient(
        circle at 50% 42%,
        transparent 22%,
        rgba(5, 4, 3, 0.42) 70%,
        rgba(5, 4, 3, 0.78) 100%
      );
  }

  .memory-viewport-wrap {
    max-width: 480px;
  }

  .memory-portal {
    max-height: 640px;
  }

  .memory-glow {
    opacity: 0.75;
  }

  /* RSVP — align column with global 480 token; hold the form in light */
  .rsvp-content,
  #rsvp-section-content {
    max-width: 480px;
  }

  .rsvp-bg-overlay {
    background:
      radial-gradient(
        circle at 50% 8%,
        rgba(255, 230, 180, 0.26) 0%,
        rgba(13, 43, 29, 0.42) 42%,
        rgba(5, 4, 3, 0.97) 100%
      );
  }

  .rsvp-bg-gradient {
    background:
      linear-gradient(
        to right,
        rgba(5, 4, 3, 0.5) 0%,
        transparent 24%,
        transparent 76%,
        rgba(5, 4, 3, 0.5) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.45) 0%,
        transparent 40%,
        rgba(0, 0, 0, 0.88) 100%
      );
  }

  .rsvp-form {
    box-shadow:
      0 0 0 1px rgba(229, 196, 131, 0.1),
      0 28px 64px rgba(0, 0, 0, 0.45);
  }

  /* Everything You Need — mid-field atmosphere owns the intentional gap */
  .eyn-vignette {
    background: radial-gradient(
      ellipse 72% 78% at 50% 42%,
      transparent 0%,
      rgba(5, 4, 3, 0.12) 48%,
      rgba(5, 4, 3, 0.68) 100%
    );
  }

  .eyn-gold-pool {
    background: radial-gradient(
      ellipse at 50% 58%,
      rgba(229, 196, 131, 0.14) 0%,
      transparent 58%
    );
  }

  #everything-you-need {
    --eyn-artwork-height: clamp(11rem, 12.5rem + 0.5dvh, 15rem);
  }

  /* Modals — slightly more presence on large fields */
  .modal-panel {
    max-width: 380px;
  }

  .modal-panel--success {
    max-width: 420px;
  }
}