:root {
  --maroon: #7a1626;
  --maroon-deep: #4a0f16;
  --gold: #c9a227;
  --gold-rich: #d4af37;
  --gold-soft: #f0e2b0;
  --ink: #3a2412;
  --cream: #fff8ea;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --face: 50% 52%;
  --zoom: 1.7;
}
@media (min-aspect-ratio: 1/1) {
  :root { --face: 50% 42%; --zoom: 1.5; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: #140609;
  color: var(--ink);
  font-family: "Noto Serif Devanagari", "Cormorant Garamond", serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

::selection { background: var(--maroon); color: var(--gold-soft); }

/* ---------- Reel: full-screen vertical scroll-snap ---------- */
.reel {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.scene {
  position: relative;
  height: 100dvh;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(122, 22, 38, 0.6), transparent 70%),
    #140609;
}

/* Stage keeps the EXACT image aspect so nothing important is cropped */
.stage {
  position: relative;
  aspect-ratio: 9 / 16;
  height: min(100dvh, 100vw * 16 / 9);
  max-width: 100vw;
  overflow: hidden;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
  container-type: inline-size;
}

.scene-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Veils for legibility */
.veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,8,10,0.5) 0%, rgba(20,8,10,0.05) 32%, rgba(20,8,10,0.12) 65%, rgba(20,8,10,0.55) 100%);
}
.veil.soft { background: radial-gradient(ellipse at 50% 55%, rgba(20,8,10,0.55), rgba(20,8,10,0.2) 60%, rgba(20,8,10,0.4) 100%); }
.veil.bottom { background: linear-gradient(180deg, rgba(20,8,10,0.08) 0%, rgba(20,8,10,0.03) 42%, rgba(20,8,10,0.88) 100%); }

/* Overlay content positioned RELATIVE TO THE STAGE (= the image) */
.content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px 7% 0;
}

.content.center { justify-content: center; }
.content.panel-arch {
  justify-content: center;
  top: 19%;
  bottom: 17%;
}
.content.panel-lower {
  justify-content: flex-start;
  top: 67%;
  bottom: 3%;
}
#s-lagan .content.panel-lower { top: 80%; }
#s-haldi .content.panel-lower { top: 71%; }
#s-mehndi .content.panel-lower { top: 71%; }
#s-vivah .content.panel-lower { top: 70%; }.content.bottom-content { justify-content: flex-end; padding-bottom: 7%; }

/* Reveal animation */
.content > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.scene.in-view .content > * { opacity: 1; transform: translateY(0); }
.scene.in-view .content > *:nth-child(2) { transition-delay: 0.1s; }
.scene.in-view .content > *:nth-child(3) { transition-delay: 0.2s; }
.scene.in-view .content > *:nth-child(4) { transition-delay: 0.3s; }
.scene.in-view .content > *:nth-child(5) { transition-delay: 0.4s; }

/* ---------- Typography (scales with stage width) ---------- */
.eyebrow {
  font-family: "Yatra One", serif;
  color: var(--gold-soft);
  font-size: clamp(0.95rem, 4.2cqw, 1.5rem);
  letter-spacing: 0.04em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.65);
  margin-bottom: 0.5rem;
}
.eyebrow.sm { color: var(--maroon); text-shadow: none; font-size: clamp(0.85rem, 3.6cqw, 1.2rem); }

.couple {
  font-family: "Rozha One", serif;
  font-weight: 400; color: #fff;
  font-size: clamp(2.4rem, 12cqw, 4.6rem);
  line-height: 1.05;
  text-shadow: 0 3px 18px rgba(0,0,0,0.75), 0 0 36px rgba(201,162,39,0.28);
}
.couple .amp { color: var(--gold-rich); font-size: 0.62em; display: inline-block; transform: translateY(-0.08em); }
.couple.sm { font-size: clamp(2rem, 9cqw, 3.4rem); }

.shloka {
  color: #fff; font-size: clamp(1.1rem, 5cqw, 1.7rem); line-height: 1.95;
  font-style: italic; font-weight: 500;
  text-shadow: 0 2px 14px rgba(0,0,0,0.75);
}

/* Invitation (arch) */
.panel-arch .line { color: var(--ink); font-size: clamp(0.85rem, 3.4cqw, 1.15rem); margin-bottom: 0.8rem; }
.persons { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.person h2 { font-family: "Rozha One", serif; font-weight: 400; color: var(--maroon); font-size: clamp(1.3rem, 6cqw, 2rem); line-height: 1.15; }
.person .lineage { color: var(--ink); font-size: clamp(0.66rem, 2.6cqw, 0.9rem); line-height: 1.5; margin-top: 0.15rem; max-width: 64cqw; }
.person .lineage em { color: #8b7722; font-style: normal; font-weight: 700; font-size: 0.92em; }
.amp-row span { color: var(--gold-rich); font-size: clamp(1.2rem, 4.6cqw, 1.7rem); }.plea { margin-top: 0.8rem; color: var(--maroon-deep); font-weight: 600; font-size: clamp(0.85rem, 3.4cqw, 1.15rem); line-height: 1.5; }

/* Event panels */
.event-name { font-family: "Rozha One", serif; font-weight: 400; color: var(--maroon); font-size: clamp(2rem, 11cqw, 3.4rem); line-height: 1; text-shadow: 0 1px 1px rgba(255,255,255,0.4); }
.event-name.sm3 { font-size: clamp(1.4rem, 6.6cqw, 2.3rem); }
.rule { color: var(--gold-rich); font-size: clamp(0.95rem, 4cqw, 1.4rem); margin: 0.3rem 0 0.45rem; }
.event-date { color: var(--ink); font-weight: 600; font-size: clamp(1rem, 4.4cqw, 1.5rem); }
.event-day { color: var(--maroon); font-size: clamp(0.85rem, 3.5cqw, 1.15rem); margin-top: 0.1rem; }

/* Closing */
.bottom-content .addr { color: var(--cream); font-size: clamp(0.8rem, 3.3cqw, 1.05rem); line-height: 1.6; margin-top: 0.7rem; text-shadow: 0 2px 10px rgba(0,0,0,0.85); }
.bottom-content .phones { margin-top: 0.6rem; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
.bottom-content .phones a { color: var(--maroon-deep); background: var(--gold-soft); text-decoration: none; font-weight: 700; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: clamp(0.8rem, 3.3cqw, 1rem); }
.withlove { margin-top: 0.8rem; color: var(--gold-soft); font-family: "Yatra One", serif; font-size: clamp(0.9rem, 3.6cqw, 1.2rem); text-shadow: 0 2px 10px rgba(0,0,0,0.75); }

/* ---------- Family scene: maroon paper + gold frame ---------- */
.scene-family .stage {
  background: #4a0f16 url("bg-door-maroon.jpg?v=1") center/cover no-repeat;
}
.family-panel {
  position: absolute;
  inset: clamp(10px, 3.5cqw, 22px);
  border: 2px solid var(--gold-rich);
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(240,226,176,0.35), inset 0 0 40px rgba(0,0,0,0.4);
  background: linear-gradient(180deg, rgba(74,15,22,0.72), rgba(40,8,12,0.82));
  padding: clamp(14px, 4.5cqw, 30px) clamp(12px, 4cqw, 26px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: clamp(18px, 5cqw, 40px);
  overflow-y: auto;
}
.fam-eyebrow { font-family: "Yatra One", serif; color: var(--gold-soft); font-size: clamp(0.85rem, 3.6cqw, 1.2rem); }
.fam-heading { font-family: "Rozha One", serif; font-weight: 400; color: #fff; font-size: clamp(1.1rem, 5.4cqw, 1.8rem); line-height: 1.1; margin-bottom: 0.2rem; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.fam-row { display: flex; gap: clamp(8px, 3cqw, 20px); flex-wrap: wrap; justify-content: center; width: 100%; }
.fam-block { width: 100%; }
.fam-row .fam-block { flex: 1 1 42%; min-width: 150px; }
.fam-block h3 { font-family: "Yatra One", serif; color: var(--gold-rich); font-size: clamp(0.82rem, 3.4cqw, 1.1rem); letter-spacing: 0.02em; margin-bottom: 0.25rem; }
.fam-block > p { color: var(--cream); font-size: clamp(0.78rem, 3.1cqw, 1rem); line-height: 1.5; }
.fam-pills { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(4px, 1.4cqw, 8px); justify-content: center; }
.fam-pills li {
  background: rgba(240,226,176,0.12);
  border: 1px solid rgba(212,175,55,0.5);
  color: var(--cream);
  padding: 0.2em 0.7em;
  border-radius: 999px;
  font-size: clamp(0.72rem, 2.9cqw, 0.95rem);
  line-height: 1.3;
}
.fam-all { color: var(--gold-soft); font-style: italic; font-size: clamp(0.9rem, 3.8cqw, 1.2rem); margin-top: 0.2rem; }
.scene-family .fam-block h3 { font-size: clamp(1rem, 4.4cqw, 1.4rem); }
.scene-family .fam-block > p { font-size: clamp(0.9rem, 3.8cqw, 1.15rem); }
.map-btn {
  display: inline-block; margin-top: 0.4rem;
  padding: 0.55em 1.3em; border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-rich));
  color: var(--maroon-deep); font-weight: 700; text-decoration: none;
  font-size: clamp(0.85rem, 3.5cqw, 1.05rem);
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.bride-family { gap: clamp(10px, 3cqw, 22px); }
.fam-note { color: var(--cream); font-style: italic; font-size: clamp(0.72rem, 2.9cqw, 0.95rem); line-height: 1.55; max-width: 82cqw; opacity: 0.92; }
.fam-block .rel { color: var(--gold-soft); font-size: 0.85em; }
.bride-family .fam-block > p { font-size: clamp(0.8rem, 3.3cqw, 1.05rem); line-height: 1.6; }
.map-row { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.map-row .map-btn { font-size: clamp(0.75rem, 3cqw, 0.95rem); padding: 0.5em 1.1em; }

/* ---------- Progress bar (autoplay) ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.14); z-index: 40; }
.bar { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), var(--gold-rich), var(--gold-soft)); box-shadow: 0 0 8px rgba(212,175,55,0.6); }
@keyframes barfill { from { width: 0; } to { width: 100%; } }

/* ---------- Progress dots ---------- */
.dots { position: fixed; right: clamp(0.5rem, 2vw, 1rem); top: 50%; transform: translateY(-50%); z-index: 30; display: flex; flex-direction: column; gap: 0.5rem; }
.dots button { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.75); background: transparent; padding: 0; cursor: pointer; transition: all 0.3s var(--ease); }
.dots button.active { background: var(--gold-rich); border-color: var(--gold-rich); transform: scale(1.35); }

/* ---------- Play / pause ---------- */
.play-toggle {
  position: fixed; top: clamp(0.75rem, 3vw, 1.25rem); left: calc(clamp(0.75rem, 3vw, 1.25rem) + clamp(42px, 10vw, 50px) + 0.6rem);
  z-index: 30; width: clamp(42px, 10vw, 50px); height: clamp(42px, 10vw, 50px);
  display: grid; place-items: center; border: 2px solid var(--gold-rich); border-radius: 50%;
  background: var(--maroon-deep); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}
.play-toggle:hover { transform: scale(1.08); background: var(--maroon); }
/* pause icon (two bars) shown while playing */
.play-icon { position: relative; width: 14px; height: 15px; }
.play-icon::before, .play-icon::after { content: ""; position: absolute; top: 0; width: 4px; height: 15px; background: var(--gold-soft); border-radius: 1px; }
.play-icon::before { left: 2px; } .play-icon::after { right: 2px; }
/* play icon (triangle) shown while paused */
.play-toggle.paused .play-icon::before, .play-toggle.paused .play-icon::after { display: none; }
.play-toggle.paused .play-icon { width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 14px solid var(--gold-soft); margin-left: 3px; }

/* ---------- Music toggle ---------- */
.music-toggle { position: fixed; top: clamp(0.75rem, 3vw, 1.25rem); left: clamp(0.75rem, 3vw, 1.25rem); z-index: 30; width: clamp(42px, 10vw, 50px); height: clamp(42px, 10vw, 50px); display: grid; place-items: center; border: 2px solid var(--gold-rich); border-radius: 50%; background: var(--maroon-deep); color: var(--gold-soft); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.4); transition: transform 0.2s ease, background 0.2s ease; }
.music-toggle:hover { transform: scale(1.08); background: var(--maroon); }
.music-icon { font-size: clamp(1.1rem, 3vw, 1.4rem); line-height: 1; animation: pulse 1.6s ease-in-out infinite; }
.music-toggle.is-muted { background: #555; border-color: #999; color: #ccc; }
.music-toggle.is-muted .music-icon { animation: none; opacity: 0.6; }
.music-toggle.is-muted::after { content: ""; position: absolute; width: 2px; height: 116%; background: #ddd; transform: rotate(45deg); border-radius: 2px; }
@keyframes pulse { 0%,100%{ transform: scale(1); opacity: 0.9;} 50%{ transform: scale(1.18); opacity: 1;} }

/* ============ ENVELOPE: maroon doors + Ganesh darshan ============ */
.envelope {
  position: fixed; inset: 0; z-index: 60;
  overflow: hidden; background: var(--maroon-deep);
  container-type: size;
  transition: opacity 0.9s var(--ease);
}
.envelope.gone { opacity: 0; pointer-events: none; }

.env-glow, .env-interior {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  transform: scale(1); transform-origin: var(--face);
  transition: opacity 1.45s ease, transform 3.4s cubic-bezier(0.33, 0, 0.2, 1), filter 1.45s ease;
  backface-visibility: hidden;
}
.env-glow { z-index: 0; filter: blur(18px) brightness(1.35); opacity: 0; }
.env-interior { z-index: 1; }

[data-state="darshan"] .env-glow, [data-state="darshan"] .env-interior { transform: scale(var(--zoom)); }
[data-state="darshan"] .env-glow { opacity: 0.45; }
[data-state="darshan"] .env-interior { filter: brightness(1.08); }
[data-state="departing"] .env-glow, [data-state="departing"] .env-interior {
  transform: scale(calc(var(--zoom) * 1.12)); filter: blur(10px) brightness(1.8); opacity: 0.7;
}

/* doors */
.env-leaf {
  position: absolute; inset: 0; z-index: 4;
  background-color: #4a0f16;
  background-image: url("bg-door-maroon.jpg?v=1");
  background-size: cover; background-position: center;
  transition: transform 3.4s cubic-bezier(0.42, 0, 0.58, 1);
}
@media (min-aspect-ratio: 1/1) { .env-leaf { background-image: url("bg-door-maroon-wide.jpg?v=1"); } }
.env-leaf-l { clip-path: inset(0 50% 0 0); }
.env-leaf-r { clip-path: inset(0 0 0 50%); }
/* silver seam */
.env-leaf-l::after, .env-leaf-r::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 4px; z-index: 5;
  background: linear-gradient(180deg, #8a8d93, #c7cace 18%, #f4f6f8 50%, #c7cace 82%, #8a8d93);
  box-shadow: 0 0 12px rgba(0,0,0,0.45);
}
.env-leaf-l::after { right: 50%; }
.env-leaf-r::after { left: 50%; }

[data-state="parting"] .env-leaf-l, [data-state="darshan"] .env-leaf-l,
[data-state="departing"] .env-leaf-l { transform: translateX(-104%); }
[data-state="parting"] .env-leaf-r, [data-state="darshan"] .env-leaf-r,
[data-state="departing"] .env-leaf-r { transform: translateX(104%); }

/* "शुभ" / "विवाह" split across the two doors — they part with the doors */
.door-word {
  position: absolute; top: 15%; transform: translateX(-50%);
  z-index: 5; white-space: nowrap;
  font-family: "Rozha One", serif; font-weight: 400; color: #fff;
  font-size: clamp(2.4rem, 13cqw, 5rem); letter-spacing: 0.02em;
  text-shadow: 0 3px 18px rgba(0,0,0,0.7), 0 0 34px rgba(201,162,39,0.5);
}
.env-leaf-l .door-word { left: 25%; }
.env-leaf-r .door-word { left: 75%; }

.env-seal {
  position: absolute; z-index: 6; left: 50%; top: 52%;
  width: min(46cqw, 30cqh, 240px); padding: 0; border: 0; background: transparent;
  transform: translate(-50%, -50%); cursor: pointer;
  animation: rest 2.6s var(--ease) infinite;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.env-seal img { display: block; width: 100%; height: auto; }
.env-seal:hover { animation: none; transform: translate(-50%, -50%) scale(1.04); }
.env-seal:active { transform: translate(-50%, -50%) scale(0.97); }
@keyframes rest { 0%,100%{ transform: translate(-50%,-50%) scale(1);} 50%{ transform: translate(-50%,-50%) scale(1.035);} }

[data-state="parting"] .env-seal, [data-state="darshan"] .env-seal,
[data-state="departing"] .env-seal {
  opacity: 0; pointer-events: none; animation: none;
  transition: opacity 700ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .reel { scroll-behavior: auto; }
  .content > * { transition-duration: 0.2s; }
  .music-icon { animation: none; }
  .env-leaf, .env-glow, .env-interior, .env-seal { transition-duration: 200ms; }
  .bar { animation: none !important; }
}