/* ============================================================
   Scene Architecture — Arjun & Lakshmi Priya Wedding Invitation
   Pure CSS3 Grid & Fullscreen Stages (Fully Responsive)
   ============================================================ */

:root {
  --safe-x: clamp(1rem, 4.5vw, 2.5rem);
  --safe-y: clamp(2rem, 6vw, 4.5rem);
  --content-max: 44rem;
  --content-wide: 74rem;

  /* Hero safe zone % */
  --hero-safe-top: clamp(14px, 4vh, 32px);
  --hero-safe-bottom: clamp(14px, 4vh, 32px);
  --hero-safe-side: clamp(12px, 4vw, 40px);
}

/* ---------- Base Scene ---------- */
.scene {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  color: var(--ink);
  box-sizing: border-box;
}

.scene > .section-bg,
.scene > picture.section-bg,
.scene > .section-overlay,
.scene > .section-content,
.scene > .scroll-indicator {
  min-width: 0;
}

.section-bg,
picture.section-bg {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  user-select: none;
}

picture.section-bg img,
img.section-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.section-overlay {
  z-index: 1;
  pointer-events: none;
}

.section-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding: var(--safe-y) var(--safe-x) calc(var(--safe-y) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.section-content > .sec-head,
.section-content > .lede,
.section-content > .facts,
.section-content > .countdown,
.section-content > .story-prose,
.section-content > .tl,
.section-content > .couple-grid,
.section-content > .family-grid,
.section-content > .family-foot,
.section-content > .venue-grid,
.section-content > .rsvp-card,
.section-content > .photo-wall,
.section-content > .photo-wall-stage,
.section-content > .finale-stage,
.section-content > .finale-sub,
.section-content > .finale-ml {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  box-sizing: border-box;
}

.section-content > .facts,
.section-content > .couple-grid,
.section-content > .family-grid,
.section-content > .venue-grid,
.section-content > .rsvp-card,
.section-content > .photo-wall,
.section-content > .photo-wall-stage {
  max-width: var(--content-wide);
}

.section-content > .photo-wall,
.section-content > .photo-wall-stage {
  max-width: min(1200px, 100%);
}

/* Tone Plates */
.scene--ivory {
  background: #F7F0E4;
  color: var(--ink);
}

.scene--beige {
  background: #EFE3CF;
  color: var(--ink);
}

.scene--dark {
  background: #140E08;
  color: #F3E9D6;
}

.scene--finale {
  background: #0E0905;
  color: #F3E9D6;
}

.scene--ivory .section-overlay {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,255,255,.48), transparent 55%),
    linear-gradient(180deg, rgba(251,247,239,.25), rgba(251,247,239,.65));
}

.scene--beige .section-overlay {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255,246,225,.4), transparent 60%),
    linear-gradient(180deg, rgba(239,227,207,.2), rgba(239,227,207,.6));
}

.scene--dark .section-overlay {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(193,150,47,.18), transparent 62%),
    linear-gradient(180deg, rgba(20,14,8,.25), rgba(20,14,8,.65));
}

.scene--finale .section-overlay {
  background:
    radial-gradient(80% 55% at 50% 45%, rgba(193,150,47,.16), transparent 66%),
    linear-gradient(180deg, rgba(15,10,5,.15), rgba(15,10,5,.75));
}

/* ============================================================
   FULL-SCREEN ART SCENE (HERO)
   ============================================================ */
.scene--screen {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  max-width: 100vw;
  background: #140E08;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  padding: 0;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

.scene--screen > .section-bg,
.scene--screen > picture.section-bg,
.scene--screen > .section-overlay {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scene--screen > .section-overlay {
  z-index: 1;
}

.scene--screen > picture.section-bg {
  display: block;
}

.scene--screen > picture.section-bg > img,
.scene--screen > img.section-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.scene--screen > .hero-header {
  grid-column: 1;
  grid-row: 1;
  z-index: 3;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: max(76px, calc(var(--sat) + clamp(64px, 8.5vh, 88px)));
  box-sizing: border-box;
  opacity: 0;
  transform: translate3d(0, -10px, 0);
  transition: opacity .7s var(--ease) .1s, transform .7s var(--ease) .1s;
}

.scene--screen > .section-content {
  grid-column: 1;
  grid-row: 2;
  z-index: 2;
  max-width: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: clamp(0.25rem, 1.5vh, 1rem) clamp(0.75rem, 4vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

.scene--screen > .hero-footer {
  grid-column: 1;
  grid-row: 3;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(4px, 1vh, 10px);
  padding-bottom: max(10px, calc(var(--sab) + clamp(6px, 1vh, 16px)));
  box-sizing: border-box;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity .7s var(--ease) .2s, transform .7s var(--ease) .2s;
}

.scene--hero.loaded.text-ready > .hero-header,
.scene--hero.loaded.text-ready > .hero-footer {
  opacity: 1;
  transform: none;
}

.scene--hero .section-overlay {
  background:
    radial-gradient(70% 40% at 50% 18%, rgba(255,240,210,.15), transparent 70%),
    linear-gradient(180deg, rgba(14,10,6,.5) 0%, rgba(14,10,6,.22) 30%, rgba(14,10,6,.32) 70%, rgba(14,10,6,.7) 100%);
}

/* ============================================================
   FLOW SCENES
   ============================================================ */
.scene--flow {
  display: block;
  min-height: auto;
}

.scene--flow > .section-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.scene--flow > .section-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.scene--flow > .section-content {
  position: relative;
  z-index: 2;
}

.section-content--center {
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: min(100dvh, 42rem);
}

/* ============================================================
   HERO LOAD GATE
   ============================================================ */
.scene--hero {
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

.scene--hero.loaded {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s;
}

.scene--hero > .section-bg,
.scene--hero > picture.section-bg,
.scene--hero > picture.section-bg > img {
  opacity: 0;
  transition: opacity .55s ease;
}

.scene--hero.loaded > .section-bg,
.scene--hero.loaded > picture.section-bg,
.scene--hero.loaded > picture.section-bg > img {
  opacity: 1;
}

.scene--hero > .section-content {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;
}

.scene--hero.loaded.text-ready > .section-content {
  opacity: 1;
  transform: none;
}

.scene--hero.loaded.text-ready > .scroll-indicator {
  opacity: 1;
}