/* ============================================================
   Elite Web Invites — Cinematic Marathi Wedding Template
   MASTER TEMPLATE — फक्त config.js मध्ये बदल करा, ही फाईल बदलू नका
   ============================================================ */

:root{
  /* --- रंग (आता बेबी यलो / baby yellow रंगसंगतीत) --- */
  --maroon-deep:   #241a08;
  --maroon:        #6b5220;
  --maroon-light:  #f2e2a0;
  --gold:          #d8b26a;
  --gold-bright:   #f3d78f;
  --gold-dim:      #8a6a34;
  --ivory:         #f3e6c8;
  --shadow:        rgba(0,0,0,.55);

  --font-display: 'Yatra One', cursive;
  /* Tiro Devanagari Marathi मध्ये मोठ्या आकारात काही वेलांटी/मात्रा नीट दिसत नव्हत्या,
     म्हणून सर्व मजकुरासाठी अधिक विश्वासार्ह Noto Sans Devanagari वापरतो */
  --font-body:    'Noto Sans Devanagari', sans-serif;

  --ease-cinema: cubic-bezier(.22,.61,.28,1);
}

*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0;
  width:100%; overflow-x:hidden;
  background: var(--maroon-deep);
  color: var(--ivory);
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}

body{
  height: 100dvh;
  overflow-y: scroll;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

::-webkit-scrollbar{ display:none; }

section.scene{
  position: relative;
  width: 100%;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 8vh 6vw;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--maroon-light) 0%, var(--maroon) 45%, var(--maroon-deep) 100%);
}

.scene-inner{
  position: relative;
  z-index: 3;
  max-width: 640px;
  width: 100%;
}

/* सिनेमॅटिक फिल्म-ग्रेन + व्हिनेट — प्रत्येक सीनला किंचित खोली देतो */
section.scene::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  background: radial-gradient(120% 95% at 50% 40%, transparent 50%, rgba(0,0,0,.4) 100%);
}
body::before{
  content:"";
  position:fixed; inset:0; z-index:700;
  pointer-events:none;
  opacity:.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* पार्श्वछायाचित्रांवर संथ केन-बर्न्स झूम — फिल्मी हालचालीचा भास */
.scene-bg{ animation: kenBurns 22s ease-in-out infinite alternate; transform-origin: center 40%; }
@keyframes kenBurns{
  from{ transform: scale(1); }
  to{ transform: scale(1.14); }
}

body.pre-tap{ overflow: hidden; height: 100dvh; }
body.pre-tap #scenes{ visibility: hidden; }

/* ================= आवरण पडदा (TAP-TO-OPEN COVER) ================= */
#invite-cover{
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  cursor: pointer;
  background: radial-gradient(120% 90% at 50% 0%, var(--maroon-light) 0%, var(--maroon) 45%, var(--maroon-deep) 100%);
  transition: opacity .9s var(--ease-cinema);
}
#invite-cover .cover-bg{
  position:absolute; inset:0; z-index:0;
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.6) 0%, rgba(36,26,8,.85) 60%, var(--maroon-deep) 100%),
    url('assets/bg-invocation.jpg');
  background-size: cover; background-position: center;
}
#invite-cover .particle-field{ z-index: 1; }
#invite-cover .cover-inner{ position:relative; z-index:2; padding: 0 8vw; }
.cover-ganesh{
  width: min(34vw, 140px);
  margin: 0 auto 22px;
  display:block;
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55));
  animation: coverFloat 4.5s ease-in-out infinite;
}
@keyframes coverFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.cover-names{
  font-family: var(--font-body);
  font-size: clamp(1.3rem, 6vw, 1.8rem);
  color: var(--gold-bright);
  letter-spacing: .02em;
}
.cover-tap-hint{
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: .85rem;
  letter-spacing: .08em;
  color: var(--gold);
  animation: hintPulse 1.8s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
#invite-cover.cover-hide{
  opacity: 0;
  pointer-events: none;
}

/* ---------- सोनेरी कण (particles) ---------- */
.particle-field{
  position:absolute; inset:0; z-index:1; pointer-events:none;
}
.particle{
  position:absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--gold-bright);
  opacity: 0;
  box-shadow: 0 0 6px 1px var(--gold-bright);
  animation: floatUp linear infinite;
}
@keyframes floatUp{
  0%   { transform: translateY(0) translateX(0); opacity:0; }
  10%  { opacity:.85; }
  90%  { opacity:.3; }
  100% { transform: translateY(-70vh) translateX(var(--drift,10px)); opacity:0; }
}

/* ---------- सीन पार्श्वभूमी छायाचित्र (फोटो) ---------- */
.scene-bg{
  position:absolute; inset:0; z-index:0;
  background-size: cover;
  background-position: center;
}
#scene-invocation .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.55) 0%, rgba(36,26,8,.8) 55%, var(--maroon-deep) 96%),
    url('assets/bg-invocation.jpg');
}
#scene-names .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.55) 0%, rgba(36,26,8,.82) 55%, var(--maroon-deep) 96%),
    url('assets/bg-finale.jpg');
  background-position: center 30%;
}
#scene-lagna .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.62) 0%, rgba(36,26,8,.85) 55%, var(--maroon-deep) 96%),
    url('assets/bg-lagna.jpg');
}
#scene-countdown .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.65) 0%, rgba(36,26,8,.88) 55%, var(--maroon-deep) 96%),
    url('assets/bg-lagna.jpg');
}
#scene-venue .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.6) 0%, rgba(36,26,8,.85) 55%, var(--maroon-deep) 96%),
    url('assets/bg-venue.jpg');
}
#scene-finale .scene-bg{
  background-image:
    linear-gradient(180deg, rgba(36,26,8,.35) 0%, rgba(36,26,8,.8) 60%, var(--maroon-deep) 97%),
    url('assets/bg-finale.jpg');
}

/* ---------- मोर पीस सजावट (peacock feather decor) ---------- */
.feather-deco{
  position:absolute; z-index:1; pointer-events:none;
  opacity:.55;
}
.feather-corner-br{
  right: -8%; bottom: -4%;
  width: 58vw; max-width: 320px;
}
.feather-float{
  width: 90px;
  top: 10%; right: 6%;
  opacity:.4;
  animation: featherDrift 9s ease-in-out infinite;
}
@keyframes featherDrift{
  0%,100%{ transform: translateY(0) rotate(-4deg); }
  50%{ transform: translateY(18px) rotate(4deg); }
}

/* ---------- कोपऱ्यातील दागिने (corner ornaments) ---------- */
.corner-orn{
  position:absolute; width: 90px; height: 90px; z-index:2;
  opacity:.75; stroke: var(--gold); fill:none;
}

/* सर्व रेखा-चिन्हे (line icons): डिफॉल्ट स्ट्रोक शैली.
   ज्या भागांना भरीव रंग हवा आहे त्यांना SVG मध्येच fill="currentColor" दिलेला आहे,
   जो या इनहेरिटेड नियमापेक्षा प्राधान्य घेतो. */
.ganesh-icon, .temple-icon, .event-icon, .kalash-icon{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.corner-orn.tl{ top: 14px; left: 14px; }
.corner-orn.tr{ top: 14px; right: 14px; transform: scaleX(-1); }
.corner-orn.bl{ bottom: 14px; left: 14px; transform: scaleY(-1); }
.corner-orn.br{ bottom: 14px; right: 14px; transform: scale(-1,-1); }

.rule{
  width: 70px; height: 2px; margin: 22px auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  position: relative;
}
.rule::after{
  content: '❖';
  position: absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  font-size: .75rem;
  color: var(--gold-bright);
  background: transparent;
}

/* सोनेरी झळाळी (shimmer) — मुख्य नावे/मथळ्यांवर सूक्ष्म हलती चमक */
.shimmer-text{
  background-image: linear-gradient(100deg,
    var(--gold) 25%, var(--gold-bright) 42%, #fff6de 50%, var(--gold-bright) 58%, var(--gold) 75%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerSweep 6s linear infinite;
}
@keyframes shimmerSweep{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 220% 50%; }
}

/* ================= टाईपोग्राफी ================= */
.blessing-line{
  font-family: var(--font-body);
  font-size: clamp(.85rem, 3.4vw, 1.05rem);
  letter-spacing: .04em;
  color: var(--gold);
  opacity:0;
}
.display-lg{
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 11vw, 4.2rem);
  color: var(--gold-bright);
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(0,0,0,.5);
}
.display-md{
  /* Yatra One (सजावटी फॉन्ट) मध्ये काही जोडाक्षरे (क्ष, च्छ इ.) व्यवस्थित जुळत नाहीत,
     म्हणून योग्य जोडाक्षरांसाठी body फॉन्ट (Tiro Devanagari Marathi) वापरतो */
  font-family: var(--font-body);
  font-size: clamp(1.7rem, 8vw, 2.6rem);
  color: var(--gold-bright);
}
.subtitle{
  font-family: var(--font-body);
  font-size: clamp(1rem, 4vw, 1.25rem);
  color: var(--ivory);
  opacity: .92;
}
.detail-text{
  font-family: var(--font-body);
  font-size: clamp(.9rem, 3.6vw, 1.05rem);
  line-height: 1.9;
  color: var(--ivory);
}
.event-time{
  font-family: var(--font-body);
  font-size: clamp(1.05rem, 4.2vw, 1.3rem);
  color: var(--gold-bright);
  letter-spacing: .03em;
}

/* per-letter reveal spans */
.letters .ch{
  display:inline-block;
  opacity:0;
  transform: translateY(.4em);
  filter: blur(6px);
}

/* ================= SCENE 1 — आवाहन (Ganesh invocation) ================= */
#scene-invocation .ganesh-image{
  width: min(46vw, 190px);
  margin: 0 auto 20px;
  display: block;
  opacity:0;
  transform: scale(.6) translateY(-10px);
  filter: drop-shadow(0 6px 22px rgba(0,0,0,.55));
}
#scene-invocation .blessing-line{ margin: 4px 0; }

/* ================= SCENE 2 — सीताराम ================= */
.sitaram-frame{
  position: relative;
  width: min(72vw, 300px);
  aspect-ratio: 3 / 4;
  margin: 0 auto 20px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(216,178,106,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  opacity: 0;
  transform: scale(1.12);
}
.sitaram-image{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.sitaram-vignette{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(36,26,8,0) 55%, rgba(36,26,8,.75) 100%),
              radial-gradient(120% 90% at 50% 0%, rgba(36,26,8,0) 40%, rgba(36,26,8,.25) 100%);
}
.sitaram-title{ opacity:0; transform: translateY(16px); }

/* ================= SCENE 3 — नावे प्रकट (family text block) ================= */
.family-block .name-line{
  /* जोडाक्षर योग्य दिसण्यासाठी body फॉन्ट (Yatra One मध्ये न्म, ह्य सारखी जोडाक्षरे तुटतात) */
  font-family: var(--font-body);
  font-size: clamp(2rem, 9vw, 3rem);
  color: var(--gold-bright);
  margin: 0;
  opacity:0; transform: translateY(18px);
}
.family-block .parent-line{
  font-family: var(--font-body);
  font-size: clamp(.9rem, 3.6vw, 1.08rem);
  color: var(--ivory);
  margin: 8px 0 2px;
  opacity:0; transform: translateY(14px);
}
.family-block .relation-line{
  font-family: var(--font-body);
  font-size: clamp(.8rem, 3.2vw, .95rem);
  color: var(--gold-dim);
  letter-spacing: .06em;
  margin: 0 0 18px;
  opacity:0; transform: translateY(10px);
}
.family-block .divider-word{
  font-family: var(--font-body);
  font-size: clamp(1.2rem, 5vw, 1.6rem);
  color: var(--gold);
  margin: 6px 0 20px;
  opacity:0; transform: scale(.85);
}

/* ================= काउंटडाऊन ================= */
.countdown-grid{
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3.5vw, 18px);
  margin: 18px auto 4px;
  flex-wrap: nowrap;
}
.countdown-unit{
  display: flex; flex-direction: column; align-items: center;
  min-width: 62px;
  padding: 14px 6px;
  border: 1px solid rgba(216,178,106,.4);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(216,178,106,.08), rgba(0,0,0,0));
  opacity: 0; transform: translateY(22px) scale(.92);
}
.cd-num{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 7vw, 2.1rem);
  color: var(--gold-bright);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-label{
  margin-top: 6px;
  font-family: var(--font-body);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--gold-dim);
}

/* ================= EVENT SCENES ================= */
.event-scene .event-card{
  background: linear-gradient(180deg, rgba(216,178,106,.07), rgba(0,0,0,0));
  border: 1px solid rgba(216,178,106,.35);
  border-radius: 4px;
  padding: 34px 22px;
  clip-path: polygon(6% 0,94% 0,100% 8%,100% 92%,94% 100%,6% 100%,0 92%,0 8%);
}
.event-scene .event-icon{ width:56px; height:56px; margin:0 auto 10px; opacity:.9; }
.event-scene .event-icon-photo{
  width: 74px; height: 74px; object-fit: contain;
  margin: 0 auto 10px; display:block;
  padding: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.4) 0%, rgba(0,0,0,0) 72%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
.event-scene .event-title{
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 8vw, 2.7rem);
  color: var(--gold-bright);
}
.event-scene .event-date{
  font-family: var(--font-body);
  color: var(--ivory);
  font-size: clamp(1rem, 4vw, 1.15rem);
  margin-top: 6px;
}
.event-scene .event-venue{
  margin-top: 14px;
  font-size: clamp(.82rem, 3.4vw, .95rem);
  color: var(--gold);
  line-height: 1.7;
  opacity: .9;
}
.event-direction-btn{
  display: inline-block;
  margin-top: 16px;
  padding: 8px 22px;
  border: 1px solid var(--gold-dim);
  border-radius: 30px;
  color: var(--gold-bright);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .03em;
  opacity:0; transform: translateY(14px);
}
.event-direction-btn:active{ background: rgba(216,178,106,.15); }

/* alternating slide directions for variety */
/* ===== सर्व कार्यक्रम — एकाच पानावर ===== */
#scene-events .events-list{ display:flex; flex-direction:column; gap:14px; margin-top:12px; }
#scene-events .ev-item{
  padding: 14px 16px 12px;
  border: 1px solid rgba(216,178,106,.35);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(216,178,106,.08), rgba(0,0,0,0));
  opacity:0; transform: translateY(30px);
}
#scene-events .ev-icon{ width:34px; height:34px; color:var(--gold); stroke:var(--gold); fill:none; stroke-width:2; display:block; margin:0 auto 4px; }
#scene-events .ev-title{ font-family:var(--font-display); font-size:clamp(1.4rem,6vw,1.8rem); color:var(--gold-bright); }
#scene-events .ev-when{ margin-top:2px; font-size:clamp(.88rem,3.6vw,1rem); color:var(--ivory); }
#scene-events .ev-venue{ margin-top:6px; font-size:clamp(.76rem,3.1vw,.88rem); color:var(--gold); line-height:1.55; opacity:.92; }
#scene-events .ev-map{ display:inline-block; margin-top:8px; padding:5px 16px; border:1px solid var(--gold-dim); border-radius:30px; color:var(--gold-bright); text-decoration:none; font-size:.76rem; }
#scene-events.is-active .ev-item{ animation: riseIn .9s var(--ease-cinema) forwards; }
#scene-events.is-active .ev-item:nth-child(2){ animation-delay:.4s; }
#scene-events.is-active .ev-item:nth-child(3){ animation-delay:.8s; }

/* ================= लग्न — केंद्रबिंदू (grand centerpiece) ================= */
#scene-lagna{
  background:
    radial-gradient(140% 100% at 50% 30%, var(--maroon-light) 0%, var(--maroon) 50%, var(--maroon-deep) 100%);
}
#scene-lagna .shubhvivah{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 7vw, 2.3rem);
  color: var(--gold);
  opacity:0; transform: scale(.7);
}
.varmala-frame{
  width: min(40vw, 170px);
  aspect-ratio: 4/5;
  margin: 10px auto;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(216,178,106,.45);
  box-shadow: 0 14px 32px rgba(0,0,0,.5);
  opacity:0; transform: scale(1.1);
}
.varmala-frame img{ width:100%; height:100%; object-fit:cover; object-position: top center; display:block; }
#scene-lagna .couple-names-grand{
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(2.6rem, 12vw, 4.6rem);
  color: var(--gold-bright);
  margin: 14px 0;
  text-shadow: 0 0 30px rgba(243,215,143,.35);
  opacity: 0; transform: translateY(.4em); filter: blur(6px);
}
#scene-lagna .kalash-icon{
  width: 70px; margin: 20px auto 0; opacity:0;
}
#scene-lagna .lagna-datetime{ margin-top: 18px; }
#scene-lagna .reception-note{
  margin-top: 22px; opacity:0;
  display: inline-block;
  font-family: var(--font-body);
  font-size: .95rem; font-weight: 600; letter-spacing: .03em;
  color: var(--gold-bright);
  padding: 8px 20px;
  border: 1px solid rgba(216,178,106,.5);
  border-radius: 999px;
  background: rgba(216,178,106,.12);
  box-shadow: 0 0 18px rgba(216,178,106,.15);
}

/* ================= VENUE ================= */
#scene-venue .venue-name{
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.8rem, 7.5vw, 2.4rem);
  color: var(--gold-bright);
}
#scene-venue .venue-address{
  margin-top: 10px;
  color: var(--ivory);
  line-height: 1.8;
}
.direction-btn{
  display: inline-block;
  margin-top: 26px;
  padding: 12px 30px;
  border: 1px solid var(--gold);
  border-radius: 30px;
  color: var(--gold-bright);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: .95rem;
  letter-spacing: .04em;
  opacity:0; transform: translateY(20px);
  transition: background .3s var(--ease-cinema);
}
.direction-btn:active{ background: rgba(216,178,106,.15); }

/* ================= FINALE ================= */
#scene-finale .finale-diya{
  width: 64px; margin: 0 auto 14px; display:block;
  padding: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 72%);
  opacity:0; transform: scale(.7);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
#scene-finale .display-md{ opacity:0; transform: scale(1.15); }

/* इंग्रजी ब्रँडिंग — छोटी, सूक्ष्म, विचलित न करणारी */
.studio-brand{
  margin-top: 26px;
  opacity: 0;
}
.studio-brand .brand-rule{
  width: 40px; height: 1px; margin: 0 auto 14px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.studio-brand .brand-name{
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .08em;
  color: var(--gold);
  font-weight: 600;
}
.studio-brand .brand-details{
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: .68rem;
  line-height: 1.85;
  color: var(--gold-dim);
  opacity: .85;
}
.studio-brand .brand-instagram{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--gold-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(216,178,106,.4);
  padding-bottom: 3px;
}
.studio-brand .ig-icon{
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  flex-shrink: 0;
}
.studio-brand .brand-cta{
  margin: 10px 0 0;
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .02em;
  color: var(--gold);
  opacity: .95;
}

/* ================= ACTIVE-STATE ANIMATIONS ================= */
.scene.is-active .blessing-line{ animation: riseIn 1s var(--ease-cinema) forwards; }
.scene.is-active .blessing-line:nth-child(2){ animation-delay: .4s; }
.scene.is-active .blessing-line:nth-child(3){ animation-delay: .8s; }
.scene.is-active .ganesh-image{ animation: zoomIn 1.4s var(--ease-cinema) .1s forwards; }

.scene.is-active .sitaram-frame{ animation: sitaramReveal 1.6s var(--ease-cinema) forwards; }
.scene.is-active .sitaram-title{ animation: riseIn 1s var(--ease-cinema) .7s forwards; }

.scene.is-active .family-block .name-line{ animation: riseIn .9s var(--ease-cinema) forwards; }
.scene.is-active .family-block .parent-line{ animation: riseIn .9s var(--ease-cinema) .3s forwards; }
.scene.is-active .family-block .relation-line{ animation: riseIn .9s var(--ease-cinema) .5s forwards; }
.scene.is-active .family-block .divider-word{ animation: zoomIn .9s var(--ease-cinema) .8s forwards; }
.scene.is-active .family-block .name-line.bride-name{ animation-delay: 1.1s; }
.scene.is-active .family-block .parent-line.bride-parent{ animation-delay: 1.4s; }
.scene.is-active .family-block .relation-line.bride-relation{ animation-delay: 1.6s; }

.scene.is-active .event-card{ animation: cardIn 1.1s var(--ease-cinema) forwards; }
.scene.is-active .countdown-unit{ animation: riseIn .8s var(--ease-cinema) forwards; }
.scene.is-active .countdown-unit:nth-child(1){ animation-delay: 0s; }
.scene.is-active .countdown-unit:nth-child(2){ animation-delay: .12s; }
.scene.is-active .countdown-unit:nth-child(3){ animation-delay: .24s; }
.scene.is-active .countdown-unit:nth-child(4){ animation-delay: .36s; }
.scene.is-active .event-direction-btn{ animation: riseIn .9s var(--ease-cinema) .5s forwards; }
.scene.is-active .no-split-reveal{ animation: riseIn 1s var(--ease-cinema) forwards; }

#scene-lagna.is-active .shubhvivah{ animation: zoomIn 1s var(--ease-cinema) forwards; }
#scene-lagna.is-active .varmala-frame{ animation: sitaramReveal 1.3s var(--ease-cinema) .3s forwards; }
#scene-lagna.is-active .couple-names-grand{ animation: letterReveal .9s var(--ease-cinema) forwards; }
#scene-lagna.is-active .kalash-icon{ animation: zoomIn 1.2s var(--ease-cinema) .5s forwards; }
#scene-lagna.is-active .reception-note{ animation: riseIn 1s var(--ease-cinema) 1.4s forwards; }

.scene.is-active .venue-name{ animation: riseIn 1s var(--ease-cinema) forwards; }
.scene.is-active .direction-btn{ animation: riseIn 1s var(--ease-cinema) .5s forwards; }

#scene-finale.is-active .display-md{ animation: zoomOutSettle 1.6s var(--ease-cinema) forwards; }
#scene-finale.is-active .finale-diya{ animation: zoomIn 1.1s var(--ease-cinema) forwards; }
#scene-finale.is-active .studio-brand{ animation: riseIn 1s var(--ease-cinema) .9s forwards; }

@keyframes riseIn{
  from{ opacity:0; transform: translateY(24px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes zoomIn{
  from{ opacity:0; transform: scale(.6); }
  to{ opacity:1; transform: scale(1); }
}
@keyframes zoomOutSettle{
  from{ opacity:0; transform: scale(1.15); }
  to{ opacity:1; transform: scale(1); }
}
@keyframes slideInLeft{
  from{ opacity:0; transform: translateX(-40px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes slideInRight{
  from{ opacity:0; transform: translateX(40px); }
  to{ opacity:1; transform: translateX(0); }
}
@keyframes letterReveal{
  from{ opacity:0; transform: translateY(.4em); filter: blur(6px); }
  to{ opacity:1; transform: translateY(0); filter: blur(0); }
}
@keyframes cardIn{
  from{ opacity:0; }
  to{ opacity:1; transform: translate(0,0) scale(1); }
}
@keyframes sitaramReveal{
  from{ opacity:0; transform: scale(1.12); }
  to{ opacity:1; transform: scale(1); }
}

/* ---------- संगीत बटण (subtle fallback) ---------- */
#music-toggle{
  position: fixed;
  bottom: 22px; right: 18px;
  z-index: 50;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(36,26,8,.6);
  border: 1px solid var(--gold-dim);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity: .85;
}
#music-toggle svg{ width: 18px; height: 18px; fill: var(--gold); }

/* स्क्रोल इशारा (पहिल्या सीनवर, अत्यंत सूक्ष्म) */
.scroll-hint{
  position:absolute; bottom: 26px; left:50%; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .06em; color: var(--gold-dim);
  opacity:0; animation: hintFade 1s ease .5s forwards, hintBob 2.4s ease-in-out 2s infinite;
}
@keyframes hintFade{ to{ opacity:.6; } }
@keyframes hintBob{ 0%,100%{ transform: translateX(-50%) translateY(0);} 50%{ transform: translateX(-50%) translateY(6px);} }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- छोट्या फोनसाठी ---------- */
@media (max-width: 360px){
  section.scene{ padding: 6vh 5vw; }
}


/* ================= फोटो गॅलरी ================= */
#scene-gallery .gallery-frame{
  position:relative; margin:14px auto 0;
  width:min(76vw, 320px); aspect-ratio: 4/5;
  border-radius: 160px 160px 10px 10px;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 40px rgba(0,0,0,.6), 0 0 0 6px rgba(216,178,106,.12);
  overflow:hidden; cursor:pointer;
  opacity:0; transform: translateY(24px);
}
#scene-gallery .g-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transform: scale(1.06);
  transition: opacity 1s var(--ease-cinema), transform 4s linear;
}
#scene-gallery .g-slide.on{ opacity:1; transform: scale(1); }
#scene-gallery .gallery-dots{ margin-top:16px; display:flex; justify-content:center; gap:8px; }
#scene-gallery .g-dot{ width:7px; height:7px; border-radius:50%; background: var(--gold-dim); opacity:.5; transition: all .4s; }
#scene-gallery .g-dot.on{ background: var(--gold-bright); opacity:1; transform: scale(1.3); }
#scene-gallery.is-active .gallery-frame{ animation: riseIn 1s var(--ease-cinema) forwards; }

/* जुन्या फोन / इन-ॲप ब्राऊझर्समध्ये dvh नसल्यास vh वापरतो */
@supports not (height: 100dvh) {
  body, body.pre-tap { height: 100vh; }
  section.scene { min-height: 100vh; }
}