/* ============================================================
   Scene content: story, photos (Polaroid snake), couple, finale
   ============================================================ */

/* ---------- Story ---------- */
.tagline { font-family: var(--script); font-size: clamp(2.2rem, 8vw, 4.2rem); color: var(--text-hi); margin-bottom: 2.4rem; }
.story-items { display: flex; flex-direction: column; gap: 2.2rem; max-width: 640px; }
.story-beat-title { font-family: var(--display); font-size: 1.6rem; font-weight: 600; color: var(--text-gold); margin-bottom: 0.3rem; }
.story-beat-text { color: var(--text-hi); font-size: 1.05rem; }

/* ---------- Photos: the Polaroid snake (zig-zag column) ---------- */
.scene--photos { display: flex; flex-direction: column; align-items: center; }
.photos-head {
  position: relative; z-index: 3;
  display: flex; justify-content: center; width: 100%; padding: 16vh 1rem 0;
}
.photos-heading {
  margin: 0;
  font-family: var(--script); font-size: clamp(1.7rem, 6vw, 3rem); color: var(--text-gold);
  text-shadow: var(--glyph-halo);
}
.polaroid-snake {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  width: 100%; max-width: 900px; margin: 0 auto;
  padding: 22vh 0 24vh; gap: 22vh;
}
.polaroid {
  width: min(300px, 62vw); margin: 0;
  background: #fdfbf5; padding: 12px 12px 0; border-radius: 3px;
  box-shadow: 0 20px 45px rgba(0,0,0,0.55);
  will-change: transform, opacity;
}
.polaroid-frame { position: relative; overflow: hidden; }
.polaroid-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #1a1a1a; }
.polaroid-develop { position: absolute; inset: 0; background: #efe7d8; }
.polaroid-cap {
  font-family: var(--script); color: #3a2b22;
  padding: 8px 6px 14px; font-size: 1.25rem; line-height: 1; text-align: center;
}

/* ---------- The couple ---------- */
.couple-line { font-family: var(--script); font-size: clamp(2rem, 7vw, 3.6rem); color: var(--text-hi); }

/* ---------- Finale · invitation ---------- */
/* The finale's invitation sits in the upper sky (≈6–35% of the height), above the bright glow band, and the sky
   is left at full sunrise brightness (darkening it read as a sunset). White text can't reach readable contrast on
   that bright sky (2–3.4:1, a dark halo only adds ~0.4), so the finale text is a deep warm brown-plum (5.4–8.6:1
   against the sky) with a faint warm-light glow. The earlier scenes stay white on their dark sea/sand/upper sky. */
.scene--finale .scene-inner { justify-content: flex-start; padding-top: 6vh; }
.scene--finale {
  --text-hi: rgb(44,20,20); --text-dim: rgb(56,26,22); --text-gold: rgb(84,36,14);
  --glyph-halo: 0 0 1px rgba(255,244,232,0.7), 0 0 8px rgba(255,238,222,0.55), 0 0 22px rgba(255,234,214,0.35);
}
.scene--finale .invite-item:nth-child(3) { max-width: 420px; }
.invite-kicker {
  font-family: var(--display); font-style: italic; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 0.8rem; color: var(--text-dim);
}
.invite-heading { font-family: var(--script); font-size: clamp(2.2rem, 6.5vw, 3.8rem); color: var(--text-hi); margin-top: 0; line-height: 1.05; }
.invite-row { display: flex; align-items: flex-start; justify-content: center; gap: 1.2rem; flex-wrap: nowrap; margin-top: 0.8rem; max-width: 980px; }
.invite-item { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; min-width: 150px; max-width: 240px; }
.invite-icon { display: none; }
.invite-label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-gold); }
.invite-value { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--text-hi); }
.invite-time { font-size: 1.02rem; }
.invite-address { font-size: 0.82rem; color: var(--text-dim); }
.invite-map { font-size: 0.8rem; margin-top: 0.2rem; }
.invite-sep { width: 1px; align-self: stretch; background: rgba(44,20,20,0.3); }
.closing-note { font-family: var(--script); font-size: clamp(1.25rem, 3.8vw, 1.9rem); color: var(--text-gold); margin-top: 0.2rem; }

/* ---------- Where the text sits (see the note above the finale rules) ---------- */
.scene--story .scene-inner { justify-content: space-between; padding: 9vh 1.3rem 7vh; }
.scene--story .tagline { margin-bottom: 0; }
.scene--couple .scene-inner { justify-content: flex-end; padding-bottom: 13vh; }

/* Phones & tablets in portrait: more room (down to ~44% of the height, where the sky grade ends) and bigger,
   easier type. The details use the plain sans (Noto Sans) — the thin display serif gets hard to read small. */
@media (orientation: portrait) and (max-width: 1100px) {
  .invite-sep { display: none; }
  .scene--finale .scene-inner { padding-top: 5.5vh; }
  .invite-heading { font-size: clamp(2.7rem, 10vw, 4.4rem); }
  .closing-note { font-size: clamp(1.55rem, 5.6vw, 2.4rem); margin-top: 0.3rem; }
  .invite-row { flex-direction: column; align-items: center; gap: 0.2rem; margin-top: 0.9rem; }
  .invite-item { min-width: 0; max-width: 92vw; gap: 0.05rem; }
  .invite-label { display: none; }   /* the lines explain themselves; the height goes to bigger type */
  .invite-row > .invite-item:nth-child(3) { margin-top: 0.55rem; }
  .invite-value { font-family: var(--body); font-weight: 500; font-size: clamp(1.02rem, 3.6vw, 1.3rem); line-height: 1.35; }
  .invite-address { font-size: clamp(0.86rem, 2.9vw, 1.05rem); line-height: 1.4; }
  .invite-map { font-size: 0.9rem; }
  /* date, then time, then the (longest) venue block */
  .invite-row > .invite-item:nth-child(1) { order: 1; }
  .invite-row > .invite-item:nth-child(5) { order: 2; }
  .invite-row > .invite-item:nth-child(3) { order: 3; }
}
/* short phones: same, a bit tighter */
@media (orientation: portrait) and (max-width: 620px) and (max-height: 720px) {
  .scene--finale .scene-inner { padding-top: 7.5vh; }   /* clear of the language buttons */
  .invite-heading { font-size: 2rem; }
  .closing-note { font-size: 1.2rem; margin-top: 0; }
  .invite-row { gap: 0.05rem; margin-top: 0.4rem; }
  .invite-row > .invite-item:nth-child(3) { margin-top: 0.25rem; }
  .invite-value { font-size: 0.9rem; line-height: 1.28; }
  .invite-address { font-size: 0.74rem; line-height: 1.25; }
  .invite-map { font-size: 0.8rem; margin-top: 0; }
}
/* phones & tablets in portrait: each event on one line — "RECEPTION  Saturday, 24 October · 6:00 PM" (its label
   stays, unlike the venue's) */
@media (orientation: portrait) and (max-width: 1100px) {
  .invite-event { display: block; text-align: center; }
  .invite-event .invite-label { display: inline; margin-right: 0.5em; }
  .invite-event .invite-value { display: inline; }
  .invite-event .invite-time::before { content: ' · '; }
}
/* desktop details: the plain sans for the small address too */
.invite-address { font-family: var(--body); }

/* Opening screen: names + date in the dark upper sky, countdown + scroll hint on the dark sand — the pink
   horizon glow (≈35–50% of the height in clip 1) is left clear of text. */
.scene--hero .scene-inner { justify-content: flex-start; padding-top: 9vh; padding-bottom: 5vh; }
.scene--hero .countdown-wrap { margin-top: auto; }
@media (max-width: 620px) { .scene--hero .scene-inner { padding-top: 7vh; } }

/* Tamil / Telugu: the handwritten font (Great Vibes) has no Tamil or Telugu letters, so those lines fall back to
   Noto Sans — at the script's large size that is giant, bold and wraps onto several lines. Sized for the sans here. */
html[data-lang="ta"] .invite-heading, html[data-lang="te"] .invite-heading { font-size: clamp(1.45rem, 5.4vw, 2.4rem); line-height: 1.25; }
html[data-lang="ta"] .closing-note, html[data-lang="te"] .closing-note { font-size: clamp(0.98rem, 3.4vw, 1.35rem); line-height: 1.35; }
html[data-lang="ta"] .tagline, html[data-lang="te"] .tagline { font-size: clamp(1.45rem, 5.4vw, 2.5rem); line-height: 1.3; }
html[data-lang="ta"] .couple-line, html[data-lang="te"] .couple-line { font-size: clamp(1.35rem, 5vw, 2.2rem); line-height: 1.3; }
html[data-lang="ta"] .photos-heading, html[data-lang="te"] .photos-heading { font-size: clamp(1.15rem, 4.4vw, 1.9rem); }
html[data-lang="ta"] .hero-names, html[data-lang="te"] .hero-names { font-size: clamp(2.2rem, 9vw, 4.2rem); line-height: 1.2; }