/* THE MOMENT BEFORE — Sunny & Jasneet · living-backdrop invitation. Scoped under .inv */
/* Georgia body with full-height lining digits (Times digits via unicode-range) */
@font-face{ font-family:'SerifDigits'; src:local('Times New Roman'),local('TimesNewRomanPSMT'); unicode-range:U+0030-0039; }
@font-face{ font-family:'SerifDigitsBold'; src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT'); unicode-range:U+0030-0039; }
@font-face{ font-family:'GV CapA'; src:url('AlexBrush-Regular.ttf') format('truetype'); unicode-range:U+0041; font-display:swap; }
@font-face{ font-family:'Ballmain'; src:url('Ballmain.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Geraldine'; src:url('Geraldine.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Alex Brush'; src:url('AlexBrush-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face{ font-family:'Rochester'; src:url('Rochester-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
.inv{
  --cream:#FBEDD8; --brown:#6E4F2E; --ink:#5A4126; --ink-soft:#7A5C38;
  --gold:#C2913F; --gold-deep:#A67C2E; --gold-bright:#E9CB84;
  --script:'GV CapA','Great Vibes',cursive; --serif:'SerifDigits',Georgia,serif;
  position:relative; width:100%; height:100%; overflow:hidden;
  background:var(--cream); font-family:var(--serif,Georgia,serif); color:var(--ink); font-variant-numeric:lining-nums;
  -webkit-overflow-scrolling:touch;
}
/* seasonal cover: same text geometry as the flagship master (baked-arch layout) */
.sec-cover.art-season .cw{ top:auto; bottom:104cqw; height:56cqw; justify-content:flex-start; padding:0 9cqw; }
.sec-cover.art-season .names{ display:flex; flex-direction:column; align-items:center; line-height:1.06; margin-top:4.5cqw; }
.sec-cover.art-season .names .amp{ display:block; font-size:.48em; line-height:1; margin:.55em 0 .25em; }
/* seasonal fall sprites are native petal/marigold art — no filter */
/* ---------- seasonal reskins: artwork color-graded per season, pastel palettes ---------- */
.inv.theme-saawan{ --cream:#F5F9F0; --brown:#57664A; --ink:#3F443A; --ink-soft:#69705F;
  --gold:#A3BC88; --gold-deep:#7E9B68; --gold-bright:#C9DCB4; }
.inv.theme-saawan .scene.sec-cover .vid-base,.inv.theme-saawan .scene.sec-cover .scene-vid,.inv.theme-saawan .sec-cover .art-live video{ filter:brightness(1.08) saturate(.85); }
.inv.theme-saawan .scene::after{ background:radial-gradient(120% 85% at 50% 30%, rgba(255,255,255,.16) 0%, rgba(122,138,104,.06) 100%); }
.inv.theme-saawan .inv-ico{ border-color:rgba(126,150,102,.45); background:#DFEBD2; color:#4A4D48; }
.inv.theme-gharmi{ --cream:#F9FCFE; --brown:#4C6579; --ink:#39434B; --ink-soft:#647079;
  --gold:#93BCCB; --gold-deep:#6FA0B0; --gold-bright:#BEDCE6; }
.inv.theme-gharmi .scene::after{ background:radial-gradient(120% 85% at 50% 30%, rgba(255,255,255,.16) 0%, rgba(91,126,140,.06) 100%); }
.inv.theme-gharmi .scene.sec-cover .vid-base,.inv.theme-gharmi .scene.sec-cover .scene-vid,.inv.theme-gharmi .sec-cover .art-live video{ filter:brightness(1.13) saturate(.82); }
.inv.theme-gharmi .inv-ico{ border-color:rgba(110,140,156,.45); background:#D9E8F1; color:#474C50; }
.inv.theme-saawan .inv-ico.on{ background:#DFEBD2; border-color:#B7CB9E; color:#4A4D48; }
.inv.theme-gharmi .inv-ico.on{ background:#D9E8F1; border-color:#A4C2D3; color:#474C50; }
/* seasonal section backgrounds: matched to each cover's pastel */
.inv.theme-saawan .scene{ --bg:rgb(245,247,242); }
.inv.theme-saawan .sec-cover{ --bg:rgb(245,248,242); }
.inv.theme-saawan .sec-anand{ --bg:rgb(245,247,242); }
.inv.theme-saawan .sec-close{ --bg:rgb(245,247,242); }
.inv.theme-gharmi .scene{ --bg:#F5FAFD; }
.inv.theme-gharmi .sec-cover{ --bg:#E9F2F8; }
.inv.theme-gharmi .sec-cover .art-wash{ opacity:1; }
.inv.theme-gharmi .sec-anand{ --bg:#F5FAFD; }
.inv.theme-gharmi .sec-close{ --bg:radial-gradient(120% 90% at 50% 20%, #F7FBFE 30%, #EDF4F9 100%); }
.inv.theme-saawan .scene.sec-anand{ --akbg:url('loops/anand-poster-basant-bs2j.jpg'); }
.inv.theme-gharmi .scene.sec-anand{ --akbg:url('loops/anand-poster-gharmi-yl1.jpg'); }
/* reception curtains: patjhar cream-amber is the base; basant uses the light-sage set */
.inv.theme-saawan .scene.sec-rec .cur-l{ background-image:url('live/rec-cur-l-saawan-sagelight.webp'); }
.inv.theme-saawan .scene.sec-rec .cur-r{ background-image:url('live/rec-cur-r-saawan-sagelight.webp'); }
/* gharmi (display "Saawan"): opening curtains use the same soften transform as the corner drape so the reveal matches the artwork */
.inv.theme-gharmi .scene.sec-rec .cur-l{ background-image:url('live/rec-cur-l-gharmi-soft.webp'); box-shadow:6px 0 22px -8px rgba(90,80,65,.18); }
.inv.theme-gharmi .scene.sec-rec .cur-r{ background-image:url('live/rec-cur-r-gharmi-soft.webp'); box-shadow:-6px 0 22px -8px rgba(90,80,65,.18); }
.scene.sec-anand .cnr img{ position:absolute; top:0; width:100%; height:100%; object-fit:cover; }
.scene.sec-anand .art-wash img{ position:absolute; left:0; right:0; bottom:0; top:auto; width:100%; height:auto; object-fit:unset; }
.inv.theme-saawan .panel.sec-anand .cw,.inv.theme-gharmi .panel.sec-anand .cw{ top:auto; bottom:calc(.66*var(--aw)); height:calc(1.05*var(--aw)); justify-content:space-between; gap:0; }
.sec-anand .ak-shab{ position:absolute; left:0; right:0; bottom:calc(1.033*var(--aw)); z-index:4; text-align:center; font-family:var(--gur); font-weight:600; font-size:calc(.0315*var(--aw)); line-height:2.05; white-space:nowrap; color:#8A5A28; }
.inv.theme-saawan .sec-anand .ak-shab{ color:#4E5C4B; }
.inv.theme-gharmi .sec-anand .ak-shab{ color:#4E6178; }
.inv *{ box-sizing:border-box; }

/* ---------- fixed living backdrops (crossfade with scroll) ---------- */
.inv-bgs{ position:absolute; inset:0; z-index:1; overflow:hidden; }
.scene{ position:absolute; inset:0; overflow:hidden; background:var(--bg,var(--cream));
  opacity:0; visibility:hidden; will-change:opacity,transform; container-type:size; }
.scene::after{ content:''; position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.35;
  background:radial-gradient(120% 85% at 50% 30%, rgba(255,255,255,.12) 0%, rgba(122,79,32,.05) 100%); }
.scene-vid{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
/* full-card ambient loop: artwork is generated at phone ratio, so fill the screen edge to edge */
.scene.has-vid .scene-vid{ object-fit:cover; object-position:50% 50%; }
.scene.has-vid::after{ display:none; }
/* locked scenes: static master pinned under the loop; video only shows through
   feathered motion zones (corner branches + cloth hem), so the arch & centre
   are physically frozen no matter what the generated loop does */
.vid-base{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:1; }
.scene.sec-vatna .scene-vid{ z-index:2;
  -webkit-mask-image:radial-gradient(40% 22% at 0% 0%,#000 50%,transparent 96%),radial-gradient(40% 22% at 100% 0%,#000 50%,transparent 96%),radial-gradient(24% 7% at 13% 99.5%,#000 40%,transparent 95%);
  mask-image:radial-gradient(40% 22% at 0% 0%,#000 50%,transparent 96%),radial-gradient(40% 22% at 100% 0%,#000 50%,transparent 96%),radial-gradient(24% 7% at 13% 99.5%,#000 40%,transparent 95%); }
/* saawan: video shows ONLY through blossom-shaped windows traced from the poster — the arch and background are always the static base, so no drift, haze, or ghosting is possible */
.inv.theme-saawan .scene.sec-vatna .scene-vid{
  -webkit-mask-image:url('live/blmask-maiyan-2.png'); -webkit-mask-size:cover; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
  mask-image:url('live/blmask-maiyan-2.png'); mask-size:cover; mask-position:center; mask-repeat:no-repeat; }
/* cover is locked too: static master everywhere except the flag window and the
   entrance strip, so sky/arch/domes stay crisp and text can never hallucinate in.
   Cover art/video are bottom-anchored at FULL WIDTH (height:auto) so nothing is
   crop-zoomed; the top gap is painted sky that the art feathers into. Masks are
   therefore in artwork coordinates and device-ratio independent. */
.scene.sec-cover .scene-vid,.scene.sec-cover .vid-base{ top:auto; bottom:0; height:auto; }
.scene.sec-cover.has-vid{ --bg:#F7E9D0; }
.scene.sec-cover .scene-vid{ z-index:2;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 9%,transparent 14%);
  mask-image:linear-gradient(to top,#000 0%,#000 9%,transparent 14%); }
/* dhol sways as a separate cover-aligned overlay; pivot at its floor contact */
.vid-over{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; z-index:3; pointer-events:none; transform-origin:21.5% 99.4%; animation:dholSway 7s ease-in-out infinite; }
@keyframes dholSway{ 0%,100%{ transform:rotate(.4deg) } 50%{ transform:rotate(-.35deg) } }
/* tassel strings get their own deeper swing, pivoting at the knot */
.vid-over.tassels{ transform-origin:29.6% 86.8%; animation:tasselSway 4.6s ease-in-out infinite; }
@keyframes tasselSway{ 0%,100%{ transform:rotate(1.3deg) } 50%{ transform:rotate(-1.2deg) } }
/* jago flames: soft candle amber, evenly spread along the pot rim */
.sec-jago .fx-flame{ background:radial-gradient(circle at 50% 60%, rgba(255,244,210,.95) 0%, rgba(255,178,80,.78) 34%, rgba(228,120,40,.28) 62%, transparent 78%); }
.sec-jago .fx-glow.warm{ background:radial-gradient(circle, rgba(255,178,95,var(--ga,.3)) 0%, rgba(255,178,95,0) 68%); }
/* jago bottom art is static (dhol + jago pot) — corner-branch windows only */
.scene.sec-jago .scene-vid{ z-index:2;
  -webkit-mask-image:radial-gradient(40% 22% at 0% 0%,#000 50%,transparent 96%),radial-gradient(40% 22% at 100% 0%,#000 50%,transparent 96%);
  mask-image:radial-gradient(40% 22% at 0% 0%,#000 50%,transparent 96%),radial-gradient(40% 22% at 100% 0%,#000 50%,transparent 96%); }
.inv.theme-saawan .scene.sec-jago .scene-vid{
  -webkit-mask-image:url('live/blmask-maiyan-2.png'); -webkit-mask-size:cover; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
  mask-image:url('live/blmask-maiyan-2.png'); mask-size:cover; mask-position:center; mask-repeat:no-repeat; }
.scene.has-vid .art,.scene.has-vid .sc-haze,.scene.has-vid .deco{ display:none; }
.fx-leaves{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; }
.fx-leaves .lf{ position:absolute; top:47%; opacity:0; animation:leafFall linear infinite; }
.fx-birds{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.fx-birds .bird{ position:absolute; left:103%; opacity:0; animation:birdGlide linear infinite; }
.fx-birds .bird img{ display:block; animation:birdFlap ease-in-out infinite alternate, birdBob ease-in-out infinite alternate; opacity:.55; }
@keyframes birdGlide{ 0%{ left:103%; opacity:0; } 5%{ opacity:1; } 93%{ opacity:1; } 100%{ left:-6%; opacity:0; } }
@keyframes birdFlap{ from{ transform:scaleX(-1) scaleY(1) } to{ transform:scaleX(-1) scaleY(.62) } }
@keyframes birdBob{ from{ margin-top:0 } to{ margin-top:-9px } }
.fx-leaves .lf img{ display:block; width:100%; animation:leafSway ease-in-out infinite alternate; }
@keyframes leafFall{ 0%{ top:46%; opacity:0; } 9%{ opacity:.85; } 55%{ opacity:.75; } 74%{ opacity:0; } 100%{ top:96%; opacity:0; } }
@keyframes leafSway{ from{ transform:translateX(-4px) rotate(-10deg); } to{ transform:translateX(4px) rotate(9deg); } }
/* text-free master loops: typeset lives in HTML again, positioned inside the painted arch */
.sec-cover.has-vid .cw{ top:auto; bottom:104cqw; height:56cqw; justify-content:flex-start; padding:0 9cqw; }
.sec-cover.has-vid .names{ display:flex; flex-direction:column; align-items:center; line-height:1.06; margin-top:4.5cqw; }
.sec-cover.has-vid .names .amp{ display:block; font-size:.48em; line-height:1; margin:.55em 0 .25em; }
.sc-haze{ position:absolute; inset:-12% -35%; z-index:2; pointer-events:none; opacity:.55;
  background:radial-gradient(38% 22% at 28% 22%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 70%),
             radial-gradient(30% 18% at 72% 12%, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 70%);
  animation:hazeDrift 30s ease-in-out infinite alternate; }
@keyframes hazeDrift{ from{ transform:translateX(-3.5%) } to{ transform:translateX(3.5%) } }

/* art placements (live in scenes; always breathing) */
.art{ position:absolute; bottom:0; left:0; right:0; z-index:3; pointer-events:none; }
.art img{ display:block; width:100%; height:auto; transform-origin:50% 100%;
  animation:artBreathe 14s ease-in-out infinite alternate; }
/* phulkari arch cap: static poster arch overlaid on the cover video so all templates share arch geometry */
.arch-cap{ position:absolute; top:0; left:0; right:0; z-index:4; pointer-events:none; }
.arch-cap img{ display:block; width:100%; height:auto; }
/* cover art as video: crop the full-frame loop to the scene band; stays visible above the full-bleed loop */
.scene.has-vid .art.art-live{ display:block; }
.sec-cover .art video{ display:block; width:100%; aspect-ratio:1152/1150; object-fit:cover; object-position:50% 100%; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%); mask-image:linear-gradient(to bottom,transparent 0,#000 14%); }
.sec-cover .art .flag-guard{ position:absolute; left:0.00%; top:5.85%; width:32.81%; height:auto; z-index:3; pointer-events:none; }
.sec-cover .art video{ position:relative; z-index:1; }
.sec-cover.art-season .art .flag-guard-sw{ display:none; }
/* seasonal band video: taller crop with sky headroom; fade completes in pure sky, above the domes and flags */
.sec-cover.art-season .art video{ aspect-ratio:1152/1150; -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 14%); mask-image:linear-gradient(to bottom,transparent 0,#000 14%); }
/* saawan: veil the video's streaky sky with the smooth wash tone; fades out before the domes/blossoms.
   A soft mask hole over the nishan sahib keeps the (animated) flag at full strength under the veil. */
.inv.theme-saawan .sec-cover.art-season .art::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom, rgba(246,249,240,0) 0%, rgba(246,249,240,.35) 8%, rgba(246,249,240,.5) 15%, rgba(243,247,236,0) 34%);
  -webkit-mask-image:radial-gradient(ellipse 15% 11% at 13.6% 17.5%, transparent 55%, #000 100%);
  mask-image:radial-gradient(ellipse 15% 11% at 13.6% 17.5%, transparent 55%, #000 100%); }
.inv.theme-gharmi .sec-cover.art-season .art::after{ content:none; }
/* gharmi: sky blend confined to the very top band — art turns fully opaque before the flag/domes/trees, so the fill only shows behind sky */
.inv.theme-gharmi .sec-cover.art-season .art video{ -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 15%); mask-image:linear-gradient(to bottom,transparent 0,#000 15%); }
.inv.theme-gharmi .sec-cover.art-season .art::before{ content:""; position:absolute; left:0; right:0; top:-10%; height:26%; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(226,239,245,0) 0%, rgba(222,237,244,.4) 55%, rgba(216,234,242,.7) 100%); }
/* seasonal scene: +12% so the gurdwara matches the flagship poster's size */
.sec-cover.art-season .art img{ width:120%; margin-left:-10%; }
.art-wash{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.art-wash img{ display:block; width:100%; height:100%; object-fit:cover; }
@keyframes artBreathe{ from{ transform:scale(1) } to{ transform:scale(1.04) } }
/* seasonal flat cover art: full-bleed, exact card geometry, no breathing zoom */
.art.art-flat{ top:0; }
.art.art-flat img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; animation:none; }
.deco{ position:absolute; z-index:3; pointer-events:none; }
.deco img{ display:block; width:100%; height:auto; animation:decoSway 6.5s ease-in-out infinite alternate; }
.deco.dl img{ transform-origin:0 0; } .deco.dr img{ transform-origin:100% 0; animation-delay:-3.2s; }
@keyframes decoSway{ from{ transform:rotate(-2deg) translateY(0) } to{ transform:rotate(2.2deg) translateY(4px) } }

/* ---------- scrolling text layer ---------- */
.inv-deck{ position:absolute; inset:0; z-index:10; overflow-y:auto; overflow-x:hidden; scrollbar-width:none;
  scroll-snap-type:y proximity; opacity:0; transition:opacity 1s ease .2s; }
.inv.is-open .inv-deck{ opacity:1; }
.inv-deck::-webkit-scrollbar{ display:none; }
.panel{ position:relative; width:100%; height:100%; overflow:hidden; scroll-snap-align:start;
  container-type:size; background:transparent; will-change:transform,opacity; }
.cw{ position:absolute; left:0; right:0; top:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:6cqh 13cqw 0; }

/* staggered reveal — pure fades, elements hold their position */
/* keep script-font descenders inside the composited layer so long fades never clip them */
.rv-big,.fam-one .nm1{ padding-bottom:.3em; margin-bottom:-.3em; }
.rv{ opacity:0; }
.panel.in .rv{ opacity:1; transition:opacity 3.2s cubic-bezier(.25,.1,.25,1) var(--d,0s); }

/* arch frame (wipes on, top-down, once section is in view) */
.arch{ position:absolute; z-index:2; pointer-events:none;
  -webkit-mask:linear-gradient(#000 40%,transparent 60%) 0 100%/100% 250% no-repeat;
  mask:linear-gradient(#000 40%,transparent 60%) 0 100%/100% 250% no-repeat;
  transition:-webkit-mask-position 2.2s ease .2s, mask-position 2.2s ease .2s; }
.arch path{ stroke-width:1.4px; }
.panel.in .arch{ -webkit-mask-position:0 0; mask-position:0 0; }

/* shared type */
.ik{ font-family:var(--gur); color:var(--gold-deep); font-size:7.4cqw; line-height:1; }
.shab{ font-family:var(--gur); color:var(--ink); font-size:3.5cqw; line-height:1.9; }
.kick{ font-family:var(--serif); font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--brown); font-size:3.3cqw; }
.title{ font-family:var(--script); font-weight:400; color:var(--brown); line-height:1.05; font-size:13cqw; }
.when{ font-family:'SerifDigitsBold',Georgia,serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  font-size:3.7cqw; line-height:1.55; color:var(--ink); }
.time{ font-family:Georgia,serif; font-weight:700; letter-spacing:.1em; font-size:4.3cqw; color:var(--ink); }
.note{ font-family:var(--serif); font-style:italic; font-size:4.2cqw; line-height:1.5; color:var(--ink-soft); }
.venue{ font-family:var(--serif); font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  font-size:3.2cqw; line-height:1.5; color:var(--brown); }
.addr{ font-family:var(--serif); font-size:3.9cqw; letter-spacing:.06em; line-height:1.55; color:var(--ink-soft); }
.ev-links{ display:flex; justify-content:center; align-items:center; gap:2.8cqw; margin-top:1.4cqh; font-family:var(--serif); font-size:2.7cqw; letter-spacing:.16em; text-transform:uppercase; }
.ev-links a{ color:var(--brown); text-decoration:none; border-bottom:1px solid rgba(0,0,0,.28); padding-bottom:2px; opacity:.82; transition:opacity .2s; }
.ev-links a:hover{ opacity:1; }
.ev-links i{ width:3px; height:3px; border-radius:50%; background:var(--gold); }
.rsvp-closed{ font-family:var(--serif); font-style:italic; font-size:clamp(13px,4cqw,16px); color:var(--ink-soft); }
.orn{ display:flex; align-items:center; justify-content:center; gap:2.4cqw; margin:1cqh 0; }
.orn i{ width:11cqw; height:2px; background:linear-gradient(90deg,transparent,var(--gold)); display:block; transform:scaleY(.5); }
.orn i:last-child{ transform:scaleX(-1) scaleY(.5); }
.orn b{ width:1.7cqw; height:1.7cqw; background:var(--gold); transform:rotate(45deg); display:block; }

/* ---------- cover ---------- */
.sec-cover{ --bg:linear-gradient(180deg,#FDF2D8 0%,#FBE7C6 55%,#F9E3C2 100%); }
.sec-cover .cw{ bottom:74cqw; padding-inline:9cqw; gap:.6cqh; }
.sec-cover .ik{ font-size:9cqw; margin-bottom:1.2cqh; }
.sec-cover .shab{ margin-bottom:2.2cqh; }
.sec-cover .kick{ margin-bottom:1.8cqh; }
.sec-cover .names{ font-family:var(--script); color:var(--brown); font-size:10cqw; line-height:1.15; display:flex; flex-direction:column; align-items:center; gap:.22em; }
.sec-cover .names .amp{ color:var(--gold-deep); font-size:.62em; line-height:1; }
.sec-cover .date{ margin-top:2.8cqh; font-family:var(--serif); font-weight:400; letter-spacing:.2em;
  font-size:4.2cqw; color:var(--ink); }

/* ---------- countdown ---------- */
.sec-count{ --bg:rgb(253,240,222); }
.scene.sec-count .cd-art,.scene.sec-fam .cd-art{ top:0; bottom:0; z-index:1; } .scene.sec-count .cd-art img,.scene.sec-fam .cd-art img{ object-position:50% 0; }
/* countdown plate per theme is set from data-src-* on the img in live.js (content:url() is unreliable on <img>) */
/* countdown breeze: Kling clip of the exact plate, same cover-crop frame as the plate (object-fit:cover, top-anchored), masked to the four corner spray zones so the text zone is always the static plate */
.scene.sec-count .cd-breeze,.scene.sec-fam .cd-breeze{ position:absolute; inset:0; z-index:2; pointer-events:none; transition:opacity .8s ease; -webkit-mask-image:radial-gradient(ellipse 38% 24% at 8% 8%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 92% 8%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 8% 92%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 92% 92%,#000 70%,transparent 100%); mask-image:radial-gradient(ellipse 38% 24% at 8% 8%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 92% 8%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 8% 92%,#000 70%,transparent 100%),radial-gradient(ellipse 38% 24% at 92% 92%,#000 70%,transparent 100%); }
.scene.sec-count .cd-breeze video,.scene.sec-fam .cd-breeze video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; transition:opacity 1.2s ease; }
/* basant countdown: recoloured copy of the saawan take; decoded paper 230,235,234 → plate 245,247,242 */
.inv.theme-saawan .scene.sec-count .cd-breeze video{ filter:url(#pf-cdb); }
/* saawan (gharmi key) breeze take 7358b082: all four corners ~1px, centre static; runs at the default 0.8x */
/* basant breeze take c0bb2b5e: all four corners quiver 1.8-3.8px (a touch livelier than patjhar's), so it runs at 0.6x via data-rate-saawan */
.sec-count .cw{ top:0; bottom:0; height:100%; padding:10cqh 8cqw 12cqh; justify-content:center; gap:0; }
.sec-count .kick{ font-size:2.9cqw; letter-spacing:.3em; color:var(--ink-soft); margin-bottom:2.6cqh; white-space:nowrap; }
.sec-count .cd-names{ font-family:var(--script); color:var(--brown); font-size:11cqw; line-height:1.1; display:flex; flex-direction:column; align-items:center; gap:.12em; margin-bottom:4.2cqh; }
.sec-count .cd-names .amp{ color:var(--gold-deep); font-size:.6em; line-height:1; }
.sec-count .cd-units{ display:flex; align-items:stretch; justify-content:center; gap:4.5cqw; width:100%; }
.sec-count .cd-u{ display:flex; flex-direction:column; align-items:center; gap:.9cqh; min-width:18cqw; }
.sec-count .cd-n{ font-family:'SerifDigitsBold',Georgia,serif; font-weight:700; font-size:13.5cqw; line-height:1; color:var(--ink); font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.01em; }
.sec-count .cd-l{ font-family:var(--serif); font-weight:700; font-size:2.5cqw; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-deep); padding-left:.3em; }
.sec-count .cd-sep{ width:1px; align-self:center; height:9cqw; background:linear-gradient(180deg,transparent,var(--gold) 30%,var(--gold) 70%,transparent); }
.sec-count .cd-today{ display:none; font-family:var(--script); font-size:16cqw; line-height:1; color:var(--brown); }
.sec-count .orn{ margin:3.6cqh 0 2.4cqh; }
.sec-count .cd-date{ font-family:'SerifDigitsBold',Georgia,serif; font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:3.4cqw; color:var(--ink); white-space:nowrap; }
.panel.cd-is-today .cd-units{ display:none; } .panel.cd-is-today .cd-today{ display:block; }

/* ---------- families ---------- */
.sec-fam{ --bg:#FBEDD7; }
.sec-fam .arch{ left:0; right:0; top:3cqh; height:97cqh; width:100cqw; }
.arch-art{ display:flex; flex-direction:column; }
.arch-art img{ display:block; width:100%; height:auto; }
.arch-art .arch-walls{ flex:1; background:url('live/arch-fam-walls.svg'); background-size:100% 100%; }
.sec-fam .cw{ height:100%; padding:12cqh 10cqw 9cqh; justify-content:space-between; gap:3cqh; }
.sec-fam .ik{ font-size:3.2cqh; }
.inv.theme-saawan .sec-fam .ik{ color:#3E5537; }
.inv.theme-gharmi .sec-fam .ik{ color:#33566B; }
.sec-fam .shab{ font-size:1.55cqh; line-height:1.8; }
.sec-fam .kick{ font-size:1.35cqh; letter-spacing:.2em; white-space:nowrap; margin-top:0; }
/* generated gold-vine corner sprays (option D compact, keyed transparent): tucked above the arch shoulders */
.fam-cnr{ display:none; }
/* families option 1 — corner sprays instead of the arch frame (toggle: .inv.fam-corners). Default stays on the arch until approved. */
/* corner sprigs: four small tiles cut from one generated plate (keyed to paper), each pinned to its own corner and sized by width, so they sit identically on any phone aspect */
.scene.sec-fam .fam-sprigs{ display:none; position:absolute; inset:0; z-index:1; pointer-events:none; }
/* solid acanthus-scroll corner (one bottom-left tile, mirrored per corner); the scroll apex is organic so no radius clip is needed */
.scene.sec-fam .fam-sprigs .sp{ position:absolute; width:23.4cqw; height:auto; }
.scene.sec-fam .sp-tl{ left:2.5cqw; top:2.5cqw; transform:scaleY(-1); }
.scene.sec-fam .sp-tr{ right:2.5cqw; top:2.5cqw; transform:scale(-1,-1); }
.scene.sec-fam .sp-bl{ left:2.5cqw; bottom:2.5cqw; }
.scene.sec-fam .sp-br{ right:2.5cqw; bottom:2.5cqw; transform:scaleX(-1); }
/* theme colourways: same tile recoloured to each theme's flat --gold, swapped via data-src-<key> in live.js (Basant sage, Saawan dusty blue) */
.inv.fam-corners .scene.sec-fam .fam-sprigs{ display:block; }

.inv.fam-corners .sec-fam .arch{ display:none; }
.inv.fam-corners .sec-fam .cw{ padding:14cqh 6cqw 14cqh; gap:1.2cqh; justify-content:space-between; }
.inv.fam-corners .sec-fam .fam-one .rel{ margin:3.2cqh 0 1.3cqh; white-space:nowrap; }
.inv.fam-corners .sec-fam .fam-one .nm1 + .rel{ margin-top:1.4cqh; }
.inv.fam-corners .sec-fam .fam-one .nm1{ margin-bottom:1cqh; }
.inv.fam-corners .sec-fam .fam-one .pn{ line-height:1.7; }
/* families option 2 — each family block on a soft, slightly lighter panel with a hairline gold rule; "&" floats on the bare paper between (toggle: .inv.fam-cards, layered on option 1) */
.inv.fam-cards .sec-fam .fam-one{ position:relative; padding:2.4cqh 3cqw 2.8cqh; border-radius:1.2cqw; overflow:visible; background:rgba(255,255,255,.42); box-shadow:inset 0 0 0 1px rgba(194,145,63,.32); }
.inv.theme-saawan.fam-cards .sec-fam .fam-one{ background:rgba(255,255,255,.5); box-shadow:inset 0 0 0 1px rgba(163,188,136,.45); }
.inv.theme-gharmi.fam-cards .sec-fam .fam-one{ background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 1px rgba(147,188,203,.45); }
.inv.fam-cards .sec-fam .fam-one .nm1{ margin-top:-.2cqh; font-size:min(5cqh,9.6cqw); margin-bottom:.8cqh; }
/* cluster tile is 30cqw x 36.8cqw; blossom mass ends ~60% down the tile (22cqw), below that only a thin twig <7cqw from the edge — cards are inset 7.5cqw so the twig tail runs beside them */
.inv.fam-cards .sec-fam .cw{ padding:calc(21.5cqw + .6cqh) 10cqw calc(21.5cqw + .3cqh); gap:1cqh; justify-content:center; }
.inv.fam-cards .sec-fam .fam-one .nm1{ font-size:min(5.4cqh,9.6cqw); }
.inv.fam-cards .sec-fam .fam-one .pn{ font-size:min(2.1cqh,3.9cqw); }
.inv.fam-cards .sec-fam .fam-one .rel{ margin:2.6cqh 0 .8cqh; }
.inv.fam-cards .sec-fam .fam-one .nm1 + .rel{ margin-top:1.2cqh; }
.inv.fam-cards .sec-fam .fam-one .pn{ line-height:1.45; font-size:min(2cqh,3.9cqw); }
.inv.fam-cards .sec-fam .fam-one .pamp{ margin:.6cqh 0; }
.inv.fam-cards .sec-fam .amp2 i{ flex:0 0 10cqw; }
/* vertical family layout: full-width names, groom block & bride block stacked */
.fam-one{ display:flex; flex-direction:column; align-items:center; width:100%; }
.fam-one .nm1{ font-family:var(--script); font-size:5.6cqh; line-height:1.12; color:var(--brown); white-space:nowrap; max-width:100%; margin-bottom:1.6cqh; }
.fam-one .rel{ font-family:var(--serif); font-weight:700; font-size:1.35cqh; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-soft); margin:4.2cqh 0 1.2cqh; }
.fam-one .nm1 + .rel{ margin-top:1.6cqh; }
.fam-one .pn{ font-family:var(--serif); font-size:min(2.1cqh,4.2cqw); line-height:1.45; color:var(--ink); white-space:nowrap; max-width:100%; }
.fam-one .pamp{ font-family:var(--serif); font-style:italic; color:var(--gold-deep); font-size:1.3cqh; margin:.5cqh 0; }
.fam-one .pn .pin{ color:var(--gold-deep); font-style:italic; padding:0 .2em; }
.sec-fam .amp2{ display:flex; align-items:center; justify-content:center; gap:3cqw; width:100%; }
.sec-fam .amp2 span{ font-family:var(--script); font-size:4cqh; line-height:1; color:var(--gold-deep); }
.sec-fam .amp2 i{ flex:0 0 16cqw; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.sec-fam .amp2 i:last-child{ transform:scaleX(-1); }
.sec-fam .foot{ font-family:var(--serif); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  font-size:1.25cqh; line-height:1.8; color:var(--brown); }

/* ---------- event sections ---------- */
.sec-ev .arch{ left:11cqw; right:11cqw; top:7cqh; height:76cqh; width:78cqw; }
.sec-ev .cw{ gap:1.4cqh; }
.sec-vatna{ --bg:#FAEFDD; } .sec-vatna .cw{ top:11cqh; bottom:24cqh; justify-content:space-evenly; gap:0; }
.sec-jago{ --bg:#FBEDD7; } .sec-jago .cw{ top:11cqh; bottom:24cqh; justify-content:space-evenly; gap:0; }
.sec-anand{ --bg:#F9E4CE; } .sec-anand .cw{ top:auto; bottom:calc(.66*var(--aw)); height:calc(1.05*var(--aw)); justify-content:space-between; gap:0; }
/* anand: full-bleed locked art like the cover — bottom-anchored master, video only
   through the illustration band (palki + couple + carpet) */
.scene.sec-anand,.panel.sec-anand{ --aw:max(100cqw,46.209cqh); --akbg:url('loops/anand-poster-treematch2.jpg'); }
/* patjhar scene: base with blossom clusters erased — the akwarp canvases repaint them with sway (panel keeps the full poster) */
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand{ --akbg:url('loops/anand-poster-treematch2-base.jpg'); }
.scene.sec-anand .scene-vid,.scene.sec-anand .vid-base{ top:auto; bottom:0; height:auto; left:50%; right:auto; width:var(--aw); transform:translateX(-50%); }
.scene.sec-anand.has-vid{ --bg:#FDEFDC; }
.scene.sec-anand .scene-vid{ z-index:2; transform:translateX(-50%) scale(1.28); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 23%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 23%),linear-gradient(to right,transparent 0%,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect; }
/* poster-matched zoom layer under the video: pre-play frame already shows the couple at video scale */
.scene.sec-anand .vzoom{ position:absolute; left:50%; right:auto; width:var(--aw); bottom:0; height:100%; z-index:1;
  background:var(--akbg) bottom center / 100% auto no-repeat;
  transform:translateX(-50%) scale(1.28); transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 23%);
  mask-image:linear-gradient(to top,#000 0%,#000 18%,transparent 23%); }
.scene.sec-anand:not(.has-vid) .vzoom{ transform:translateX(-50%); -webkit-mask-image:none; mask-image:none; }
/* static full-artwork base: crisp arch & sides everywhere; band video only animates the corners on top */
.scene.sec-anand .ak-base{ position:absolute; left:50%; transform:translateX(-50%); width:var(--aw); bottom:0; height:100%; z-index:1;
  background:var(--akbg) bottom center / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(to top,transparent 0%,transparent 15%,#000 24%);
  mask-image:linear-gradient(to top,transparent 0%,transparent 15%,#000 24%); }
/* corner branch motion: Seedance-generated cinemagraph band pinned to the top of the artwork */
.scene.sec-anand .akband{ position:absolute; z-index:2; left:50%; transform:translateX(-50%); width:var(--aw); height:calc(.5625*var(--aw)); bottom:calc(1.60156*var(--aw)); overflow:hidden; pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 46% 88% at 0% 0%,#000 44%,transparent 66%),radial-gradient(ellipse 46% 88% at 100% 0%,#000 44%,transparent 66%);
  mask-image:radial-gradient(ellipse 46% 88% at 0% 0%,#000 44%,transparent 66%),radial-gradient(ellipse 46% 88% at 100% 0%,#000 44%,transparent 66%); }
.inv.theme-saawan .scene.sec-anand .akband{
  -webkit-mask-image:url('live/blmask-ak-2.png'); -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
  mask-image:url('live/blmask-ak-2.png'); mask-size:100% 100%; mask-repeat:no-repeat; }
.scene.sec-anand .akband video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* artwork is 216cqw tall (bottom-anchored); gurbani ends ~48cqw */
.sec-anand.has-vid .cw{ bottom:calc(.66*var(--aw)); height:calc(1.05*var(--aw)); }
.sec-anand .when{ white-space:nowrap; letter-spacing:.1em; font-size:4.1cqw; }
.sec-rec{ --bg:#FBECD7; } .sec-rec .cw{ top:6cqh; bottom:62cqw; justify-content:space-evenly; gap:0; }
/* reception curtain reveal: painted drapery panels (AI-matched to the artwork) cover the
   scene, then draw apart and dissolve when the section scrolls into view */
.scene.sec-rec .cur{ position:absolute; top:-1%; bottom:-1%; width:51%; z-index:7; pointer-events:none;
  background-size:100% 100%; background-repeat:no-repeat; }
.scene.sec-rec .cur-l{ left:-.5%; transform-origin:0 50%; background-image:url('live/rec-cur-l.webp');
  box-shadow:6px 0 22px -8px rgba(90,65,38,.28); }
.scene.sec-rec .cur-r{ right:-.5%; transform-origin:100% 50%; background-image:url('live/rec-cur-r.webp');
  box-shadow:-6px 0 22px -8px rgba(90,65,38,.28); }
.scene.sec-rec.drawn .cur-l, .scene.sec-rec.drawn .cur-r{ /* reveal driven by JS (recReveal) so it plays even under prefers-reduced-motion */ }
.sec-rec .drp{ opacity:0; }
.panel.veil .cw{ opacity:0; }
.sec-anand .title{ font-size:11cqw; }
.sec-anand .title::first-letter{ font-size:1.12em; }
.sec-anand .when{ font-size:3.2cqw; font-weight:700; font-family:Georgia,serif; }
.sec-vatna .when,.sec-rec .when,.sec-jago .when{ font-family:Georgia,serif; }
.sec-anand .addr{ font-size:3.4cqw; }
.sec-anand .arch{ left:4.5cqw; right:4.5cqw; top:4cqh; width:91cqw; height:82cqh; }
.sec-rec .title{ font-size:13.5cqw; }
.sec-anand .shab{ font-size:3.1cqw; }
.sched{ width:58cqw; display:flex; flex-direction:column; gap:1cqh; font-family:var(--serif); font-size:3.5cqw; color:var(--ink); }
.sched .row{ display:flex; align-items:baseline; gap:2cqw; }
.sched .lead{ flex:1; border-bottom:1.5px dotted rgba(166,124,46,.55); transform:translateY(-.6cqw); }
.sched .tm{ font-weight:400; letter-spacing:.06em; }

/* ---------- element-anchored effects ---------- */
.fx-layer{ position:absolute; inset:0; pointer-events:none; z-index:5; }
.fx-layer.fit-cover{ inset:auto; left:50%; top:50%; transform:translate(-50%,-50%); width:max(100cqw,55.81cqh); height:max(100cqh,179.17cqw); }
.fx-layer i{ position:absolute; display:block; }
.fx-flame{ width:3.4%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle at 50% 58%, rgba(255,246,214,.95) 0%, rgba(255,199,96,.75) 34%, rgba(232,130,30,.32) 62%, transparent 78%);
  filter:blur(.4px); animation:fxFlick 1.5s ease-in-out infinite; }
@keyframes fxFlick{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.9 }
  28%{ transform:translate(-49.4%,-52%) scale(1.14); opacity:1 }
  55%{ transform:translate(-50.6%,-49%) scale(.9); opacity:.75 }
  78%{ transform:translate(-50%,-51%) scale(1.06); opacity:.95 } }
.fx-glow{ aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,222,140,var(--ga,.28)) 0%, rgba(255,222,140,0) 68%);
  animation:fxGlow 4.4s ease-in-out infinite; }
.fx-glow.warm{ background:radial-gradient(circle, rgba(255,190,96,var(--ga,.3)) 0%, rgba(255,190,96,0) 68%); }
@keyframes fxGlow{ 0%,100%{ opacity:.55 } 50%{ opacity:1 } }
.fx-spark{ width:1.6%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, #F4D88E 0%, rgba(244,216,142,0) 70%);
  border-radius:50%; animation:fxTwinkle 2.8s ease-in-out infinite; }
@keyframes fxTwinkle{ 0%,100%{ opacity:.15; transform:translate(-50%,-50%) scale(.6) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.25) } }
.fx-leaf{ top:-6%; background:linear-gradient(135deg,#E0A54C,#B9772A); opacity:0;
  border-radius:78% 4% 78% 4%; animation:fxFall linear infinite; }
.fx-petal{ top:-6%; background:linear-gradient(135deg,#F4D9C4,#DFAE8C); opacity:0;
  border-radius:70% 8% 70% 8%; animation:fxFall linear infinite; }
@keyframes fxFall{
  0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0 }
  8%{ opacity:.85 } 86%{ opacity:.5 }
  100%{ transform:translateY(112cqh) translateX(var(--dx,16px)) rotate(300deg); opacity:0 } }

/* ---------- closing ---------- */
.sec-close{ --bg:radial-gradient(120% 90% at 50% 20%, #FBEDD8 30%, #F5E4C8 100%); }
/* closing corner ornaments: painted art (assets/live/cl-cnr[-theme].png), top-left orientation, mirrored per corner */
.cl-frame{ display:none; }
/* closing uses the countdown plate itself (same art, same cover-crop) as its frame; text is confined to the clear channel between the sprays */
.scene.sec-close .cl-plate,.panel.sec-close .cl-plate{ position:absolute; inset:0; z-index:1; } .scene.sec-close .cl-plate img,.panel.sec-close .cl-plate img{ width:100%; height:100%; object-fit:cover; object-position:50% 100%; }
.cl-frame i{ position:absolute; width:40cqw; height:40cqw; display:block;
  background:url('live/cl-cnr-patjhar-v3.webp') no-repeat 0 0 / contain; } /* patjhar: TL spray cut from the countdown plate itself (cd-bg-fall), so the closing corners ARE the countdown flowers */
.inv.theme-saawan .cl-frame i{ background-image:url('live/cl-cnr-basant-v3.webp'); } /* basant: the patjhar corner recoloured to the basant blossom palette (petals/buds/stamens only; leaves+twigs untouched) */
.inv.theme-gharmi .cl-frame i{ background-image:url('live/cl-cnr-gharmi-vy.webp'); width:36cqw; height:36cqw; }
.cl-frame .tl{ top:0; left:0; }
.cl-frame .tr{ top:0; right:0; transform:scaleX(-1); }
.cl-frame .bl{ bottom:0; left:0; transform:scaleY(-1); }
.cl-frame .br{ bottom:0; right:0; transform:scale(-1,-1); }
.panel.closing{ display:flex; align-items:center; justify-content:center; padding-top:7cqh; padding-bottom:2cqh; }
.cl-inner{ position:relative; z-index:4; text-align:center; padding:6% 9%; width:100%; }
.cl-inner{ padding-top:6cqh; padding-bottom:6cqh; text-align:center; }
/* rows that sit beside the sprays keep to the clear centre channel */
.cl-lv{ letter-spacing:.2em; }
.cl-rsvp-by{ line-height:1.5; white-space:nowrap; } /* dropped the date line; block starts lower so the headline clears the top corner sprays */
.cl-inner .ik{ display:none; }
.cl-lv{ font-family:var(--serif); font-size:clamp(11px,3.2cqw,13px); letter-spacing:.26em; text-transform:uppercase; color:var(--gold-deep); white-space:nowrap; }
.cl-names{ font-family:var(--script); font-size:clamp(28px,10.5cqw,46px); color:var(--brown); line-height:1.25; margin-top:3.6cqh; }
.cl-names .amp{ color:var(--gold-deep); margin:0 .24em; }
.cl-date{ margin-top:3cqh; font-family:'SerifDigitsBold',Georgia,serif; font-weight:700; font-size:clamp(11px,3.4cqw,14px); letter-spacing:.2em; text-transform:uppercase; line-height:2; color:var(--ink); }
.cl-date .cl-city{ font-weight:400; font-family:'SerifDigits',Georgia,serif; }
.cl-rule{ width:56px; height:1px; margin:3cqh auto; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.cl-bless{ font-family:var(--serif); font-style:italic; font-size:clamp(14px,4.4cqw,17px); line-height:1.6; color:var(--brown); }
.cl-hash{ margin-top:2.6cqh; font-family:'DM Sans',system-ui,sans-serif; font-weight:600; font-size:clamp(11px,3.2cqw,13px); letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }
.cl-rsvp{ margin-top:3cqh; display:flex; flex-direction:column; align-items:center; gap:1.6cqh; }
.cl-rsvp .rsvp-btn{ margin-top:1.2cqh; }
.cl-rsvp-by{ font-family:'SerifDigitsBold',Georgia,serif; font-weight:700; font-size:clamp(10px,3cqw,12.5px); letter-spacing:.05em; text-transform:none; color:var(--ink-soft); }
.rsvp-btn{ font-family:'DM Sans',system-ui,sans-serif; font-weight:800; font-size:clamp(14px,4cqw,18px); letter-spacing:.02em; text-indent:0;
  color:var(--rsvp-bg,#6B4A22); background:transparent; border:1.5px solid var(--rsvp-bg,#6B4A22); /* outlined: brown rule + brown text (per theme via --rsvp-bg) */
  border-radius:999px; padding:15px 46px; cursor:pointer; box-shadow:none;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.rsvp-btn:hover{ background:var(--rsvp-bg,#6B4A22); color:var(--rsvp-fg,#FBEDD8); transform:translateY(-1px); }
.rsvp-btn:active{ transform:translateY(1px); }
.inv.theme-saawan .rsvp-btn{ --rsvp-bg:#5F6E4E; --rsvp-fg:#F3F9EE; }
.inv.theme-gharmi .rsvp-btn{ --rsvp-bg:#4F6878; --rsvp-fg:#F5FAFD; }

/* ---------- RSVP modal ---------- */
.rsvp-modal{ position:absolute; inset:0; z-index:45; display:none; align-items:flex-end; justify-content:center;
  background:rgba(58,42,20,.45); backdrop-filter:blur(3px); }
.rsvp-modal.open{ display:flex; }
.rsvp-card{ position:relative; width:100%; max-height:88%; overflow-y:auto; scrollbar-width:none;
  background:var(--cream); border-top:1px solid var(--gold); border-radius:24px 24px 0 0; padding:30px 24px 34px; text-align:center;
  box-shadow:0 -18px 50px -20px rgba(58,42,20,.5); animation:rsvpUp .45s cubic-bezier(.2,.7,.2,1); }
.rsvp-orn{ margin:10px auto 0; }
.rsvp-orn i{ width:52px; }
.rsvp-orn b{ width:5px; height:5px; }
.rsvp-card::-webkit-scrollbar{ display:none; }
@keyframes rsvpUp{ from{ transform:translateY(40px); opacity:0 } to{ transform:none; opacity:1 } }
.rsvp-x{ position:absolute; top:12px; right:14px; width:30px; height:30px; border-radius:50%; border:1px solid rgba(166,124,46,.4);
  background:none; color:var(--gold-deep); font-size:17px; line-height:1; cursor:pointer; }
.rsvp-t{ font-family:'DM Sans',system-ui,sans-serif; font-weight:800; font-size:21px; letter-spacing:.16em; text-transform:uppercase; color:var(--brown); line-height:1.1; }
.rsvp-s{ font-family:var(--serif); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-top:4px; }
.rsvp-form{ display:flex; flex-direction:column; gap:16px; margin-top:18px; text-align:left; }
.rf-l{ display:flex; flex-direction:column; gap:8px; font-family:var(--serif); font-weight:600; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brown); }
.rf-in{ font-family:var(--serif); font-size:16px; color:var(--ink); background:transparent; }
.rf-in, select.rf-in, textarea.rf-in{ border:1px solid rgba(166,124,46,.45); border-radius:3px; padding:12px 13px; outline:none; width:100%; }
.rf-in:focus{ border-color:var(--gold-deep); }
.rf-pills{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{ font-family:var(--serif); font-size:13.5px; letter-spacing:.04em; color:var(--brown); background:transparent;
  border:1px solid rgba(166,124,46,.45); border-radius:999px; padding:9px 16px; cursor:pointer; transition:.15s; white-space:nowrap; }
.pill.sel{ background:var(--rsvp-bg,#6B4A22); border-color:var(--rsvp-bg,#6B4A22); color:var(--rsvp-fg,#FBEDD8); font-weight:600; }
.rsvp-send{ font-family:'DM Sans',system-ui,sans-serif; font-weight:800; font-size:15px; letter-spacing:.06em;
  color:var(--rsvp-fg,#FBEDD8); background:var(--rsvp-bg,#6B4A22); border:1px solid transparent;
  border-radius:999px; padding:15px; cursor:pointer; margin-top:6px; }
.rsvp-done{ display:none; padding:26px 8px 10px; }
.rsvp-dmsg{ font-family:var(--serif); font-style:italic; font-size:15px; line-height:1.6; color:var(--ink-soft); margin:10px 0 0; }
.rsvp-card.sent .rsvp-form, .rsvp-card.sent .rsvp-head-note{ display:none; }
.rsvp-card.sent .rsvp-done{ display:block; }

/* ---------- COVER (envelope video) ---------- */
.inv-cover{ position:absolute; inset:0; z-index:40; overflow:hidden; cursor:pointer; container-type:inline-size;
  background:#ECE2E8; transition:opacity 1s ease; }
.cv-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;
  z-index:2; background:#ECE2E8; filter:contrast(1.05) saturate(1.04);
  transition:transform 1.5s cubic-bezier(.5,0,.2,1), opacity 1.3s ease; }
.cv-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; background:url('grain.png'); background-size:260px;
  opacity:.08; mix-blend-mode:overlay; }
.cv-hint{ position:absolute; bottom:6%; left:0; right:0; z-index:13; display:flex; flex-direction:column; align-items:center; gap:11px;
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; text-indent:.34em; color:#4A3A26;
  opacity:.92; transition:opacity .4s; text-shadow:0 1px 6px rgba(255,250,240,.8); }
.cv-hint .d{ width:27px; height:27px; border-radius:50%; border:1px solid rgba(166,124,46,.5); display:flex; align-items:center; justify-content:center; animation:invTap 2.4s ease-in-out infinite; }
.cv-hint .d::after{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold-deep); }
@keyframes invTap{ 0%,100%{ transform:translateY(0); opacity:.7 } 50%{ transform:translateY(-3px); opacity:1 } }
.inv-cover.opening .cv-hint{ opacity:0; }
.inv-cover.dolly .cv-video{ transform:scale(1.18); opacity:0; }
.inv-cover.dolly .cv-grain{ opacity:0; transition:opacity 1s; }
.inv-cover.gone{ opacity:0; pointer-events:none; }

/* ---------- chrome ---------- */
.inv-prog{ position:absolute; top:0; left:0; height:2px; width:0; z-index:30;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright)); opacity:0; transition:opacity .4s; }
.inv.is-open .inv-prog{ opacity:1; }
.inv-bot{ position:absolute; bottom:0; left:0; right:0; z-index:26; display:flex; justify-content:flex-end; align-items:center;
  padding:14px; opacity:0; pointer-events:none; transition:opacity .5s ease; }
.inv.is-open .inv-bot{ opacity:1; pointer-events:auto; }
.inv-ico{ width:29px; height:29px; border-radius:50%; border:1px solid rgba(201,161,78,.55); cursor:pointer;
  display:flex; align-items:center; justify-content:center; color:var(--gold-deep);
  background:rgba(251,237,216,.6); backdrop-filter:blur(6px); transition:.2s; }
.inv-ico svg{ width:12px; height:12px; }
.inv-ico.on{ background:var(--gold-bright); color:#5A4126; border-color:var(--gold-bright); }
.inv-ico .muteslash{ display:none; }
.inv-ico:not(.on) .muteslash{ display:block; }
.inv-scrollcue{ position:absolute; bottom:16px; left:50%; transform:translateX(-50%); z-index:20;
  display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:none; opacity:0;
  font-family:var(--sans); font-size:8.5px; letter-spacing:.3em; text-transform:uppercase; color:rgba(110,79,46,.85);
  text-shadow:0 1px 4px rgba(251,237,216,.8); transition:opacity .5s ease; }
.inv-scrollcue .ch{ width:18px; height:28px; border-radius:10px; border:1.5px solid rgba(110,79,46,.6); position:relative; }
.inv-scrollcue .ch::after{ content:''; position:absolute; left:50%; top:6px; width:3px; height:6px; border-radius:2px; background:rgba(110,79,46,.85); transform:translateX(-50%); animation:invWheel 1.6s ease-in-out infinite; }
@keyframes invWheel{ 0%,100%{ transform:translate(-50%,0); opacity:.4 } 50%{ transform:translate(-50%,7px); opacity:1 } }

@media (prefers-reduced-motion: reduce){
  .sc-haze{ display:none; }
  .fx-leaf,.fx-petal,.fx-dust,.fx-spark{ display:none; }
  /* candle flames + drapes keep their gentle motion — core to the design, requested explicitly */
  .arch{ -webkit-mask-position:0 0 !important; mask-position:0 0 !important; }
  .art img, .deco img{ animation:none; }
}

/* saawan blossom cutouts: poster-identical pixels, gentle CSS drift */
.blcut{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:3; pointer-events:none; will-change:transform; }
.blcut.tl{ transform-origin:2% 2%; animation:blDriftA 8s ease-in-out infinite alternate; }
.blcut.tr{ transform-origin:98% 2%; animation:blDriftB 9.5s ease-in-out infinite alternate; }
@keyframes blDriftA{ from{ transform:translate3d(0,0,0) rotate(0deg) } to{ transform:translate3d(1.5px,2.5px,0) rotate(.45deg) } }
@keyframes blDriftB{ from{ transform:translate3d(0,0,0) rotate(0deg) } to{ transform:translate3d(-1.5px,2.5px,0) rotate(-.45deg) } }
.scene.sec-anand .blcut.akcut{ left:50%; margin-left:calc(-.5*var(--aw)); width:var(--aw); top:auto; bottom:0; height:auto; object-fit:unset; inset:auto auto 0 50%; }
@media (prefers-reduced-motion: reduce){ .blcut{ animation:none; } }

/* saawan: cancel each video's encoder color shift so window edges are invisible */
.inv.theme-saawan .scene.sec-vatna .scene-vid{ filter:url(#svfix-mai); }
.inv.theme-saawan .scene.sec-jago .scene-vid{ filter:url(#svfix-mai); }
.inv.theme-saawan .scene.sec-anand .akband video{ filter:url(#svfix-akb); }

/* saawan AK: shared wind video, full-screen cover geometry, maiyan corner windows */
.inv.theme-saawan .scene.sec-anand .akband{ inset:0; left:0; top:0; bottom:auto; width:100%; height:100%; margin:0; transform:none;
  -webkit-mask-image:url('live/blmask-maiyan-2.png'); -webkit-mask-size:cover; -webkit-mask-position:center; -webkit-mask-repeat:no-repeat;
  mask-image:url('live/blmask-maiyan-2.png'); mask-size:cover; mask-position:center; mask-repeat:no-repeat; }
.inv.theme-saawan .scene.sec-anand .akband video{ object-fit:cover; object-position:center; }
.inv.theme-saawan .scene.sec-anand .akband video{ filter:url(#svfix-mai); }

/* petals shed from the corner blossom branches (saawan) */
.bl-petal{ position:absolute; opacity:0; background:linear-gradient(135deg,#F8CFDA,#EFA8BC); border-radius:70% 8% 70% 8%; animation:blPetalFall ease-in infinite; }
@keyframes blPetalFall{
  0%{ opacity:0; transform:translate3d(0,0,0) rotate(0deg); }
  8%{ opacity:.9; }
  60%{ opacity:.85; transform:translate3d(-2.2cqw,34cqh,0) rotate(190deg); }
  92%{ opacity:0; transform:translate3d(1.8cqw,58cqh,0) rotate(320deg); }
  100%{ opacity:0; transform:translate3d(1.8cqw,60cqh,0) rotate(330deg); }
}
@media (prefers-reduced-motion: reduce){ .bl-petal{ display:none; } }
.inv.theme-gharmi .scene.sec-anand .bl-petal{ background:linear-gradient(135deg,#FBE08A,#F2BF4A); }

/* gharmi anand: poster regenerated with pink blossoms + clean arch; old yellow-era band loop would mismatch, so it stays hidden */
.inv.theme-gharmi .scene.sec-anand .akband{ display:none; }
/* gharmi: cancel each bouquet video's encoder color shift so it matches its poster */
.inv.theme-gharmi .scene.sec-anand .akband video{ filter:url(#svfix-ga); }

/* gharmi maiyan: generated breeze loop plays full-frame; #svfix-gv maps the video paper onto --bg (poster is its exact first frame) */
.inv.theme-gharmi .scene.sec-vatna .scene-vid{ -webkit-mask-image:none; mask-image:none; filter:url(#svfix-gv); }
.inv.theme-gharmi .scene.sec-vatna .vid-base{ filter:url(#svfix-gv); }
.inv.theme-gharmi .scene.sec-jago .vid-base{ filter:url(#svfix-gjE); }
/* patjhar anand: poster's own corner blossoms on warp canvases; canvases sit at the artwork's top corners */
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand{ --bg:rgb(253,240,222); }
.scene.sec-anand .akwarp{ position:absolute; left:50%; transform:translateX(-50%); width:var(--aw); bottom:0; height:calc(2.16406*var(--aw)); z-index:2; pointer-events:none; }
.inv.theme-saawan .scene.sec-anand .akwarp,.inv.theme-gharmi .scene.sec-anand .akwarp{ display:none; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand .akband{ display:none; }
/* akvid preview: higgsfield breeze video through top-corner windows over the static base; akwarp canvases hidden */
.scene.sec-anand .akvid-l{ position:absolute; left:50%; transform:translateX(-50%); width:var(--aw); height:calc(2.16406*var(--aw)); bottom:0; z-index:2; object-fit:cover; pointer-events:none;
  -webkit-mask-image:radial-gradient(46% 20% at 0% 0%,#000 58%,transparent 93%),radial-gradient(46% 20% at 100% 0%,#000 58%,transparent 93%);
  mask-image:radial-gradient(46% 20% at 0% 0%,#000 58%,transparent 93%),radial-gradient(46% 20% at 100% 0%,#000 58%,transparent 93%); }
.scene.sec-anand:has(.akvid-l) .akwarp{ display:none; }
.inv.theme-saawan .scene.sec-anand .akvid-l,.inv.theme-gharmi .scene.sec-anand .akvid-l{ display:none; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand .vid-base{ display:none; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand .ak-base{ -webkit-mask-image:none; mask-image:none; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand.has-vid{ --bg:rgb(253,240,222); }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand.has-vid .vzoom{ display:none; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-anand .scene-vid{ transform:translateX(-50%); filter:none;
  -webkit-mask-image:radial-gradient(26% 11% at 0% 0%,#000 40%,transparent 78%),radial-gradient(26% 11% at 100% 0%,#000 40%,transparent 78%); -webkit-mask-composite:source-over;
  mask-image:radial-gradient(26% 11% at 0% 0%,#000 40%,transparent 78%),radial-gradient(26% 11% at 100% 0%,#000 40%,transparent 78%); mask-composite:add; }
/* basant anand: same corner-window blossom sway as gharmi, video color-matched to the green paper; old wind akband + vzoom stay hidden */
.inv.theme-saawan .scene.sec-anand .akband{ display:none; }
.inv.theme-saawan .scene.sec-anand.has-vid{ --bg:rgb(245,247,242); }
.inv.theme-saawan .scene.sec-anand.has-vid .vzoom{ display:none; }
.inv.theme-saawan .scene.sec-anand .scene-vid{ transform:translateX(-50%); filter:url(#svfix-akg);
  -webkit-mask-image:radial-gradient(46% 19% at 0% 0%,#000 55%,transparent 95%),radial-gradient(46% 19% at 100% 0%,#000 55%,transparent 95%); -webkit-mask-composite:source-over;
  mask-image:radial-gradient(46% 19% at 0% 0%,#000 55%,transparent 95%),radial-gradient(46% 19% at 100% 0%,#000 55%,transparent 95%); mask-composite:add; }
/* gharmi anand: blossom-sway video shows only through feathered top-corner windows; the arch, couple and canopy stay the static poster. Neutralize the autumn has-vid layers: keep --bg, kill the vzoom zoom/mask, no scale on the video, corner masks composite additively */
.inv.theme-gharmi .scene.sec-anand.has-vid{ --bg:#F5FAFD; }
.inv.theme-gharmi .scene.sec-anand.has-vid .vzoom{ display:none; }
.inv.theme-gharmi .scene.sec-anand .scene-vid{ transform:translateX(-50%); filter:url(#svfix-gay); /* pink→maiyan-yellow matrix fitted on the poster; paper/gold/olive map to themselves */
  -webkit-mask-image:radial-gradient(46% 19% at 0% 0%,#000 55%,transparent 95%),radial-gradient(46% 19% at 100% 0%,#000 55%,transparent 95%); -webkit-mask-composite:source-over;
  mask-image:radial-gradient(46% 19% at 0% 0%,#000 55%,transparent 95%),radial-gradient(46% 19% at 100% 0%,#000 55%,transparent 95%); mask-composite:add; }
/* patjhar maiyan: static base + swaying spray canvas, pixel-aligned to the poster's cover-crop */
.scene.sec-vatna .mai-sway{ position:absolute; z-index:1; }
.mai-sway .ms-base{ position:absolute; inset:0; width:100%; height:100%; }
.mai-sway .ms-cv{ position:absolute; left:0; top:0; }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-vatna .mai-sway .ms-cv{ filter:url(#pf-maiyan); }
/* jago (all themes): mesh-warp — original r23 drape pixels on a canvas + sprite flame flicker; per-theme base/layer baked to each theme's screen color — no filter */
.scene.sec-jago .jago-warp{ position:absolute; z-index:1; }
.jago-warp .jw-base{ position:absolute; inset:0; width:100%; height:100%; }
.jago-warp .jw-cv{ position:absolute; left:0; top:0; }
.jago-warp .jw-flame{ position:absolute; background-repeat:no-repeat; animation:jwFl 1.5s ease-in-out infinite; }
@keyframes jwFl{ 0%,100%{ filter:brightness(.94) saturate(.96) } 30%{ filter:brightness(1.16) saturate(1.12) } 55%{ filter:brightness(1) } 75%{ filter:brightness(1.1) saturate(1.06) } }
/* gharmi jago: full-screen loop (Take E) like maiyan; poster = its source still */
.inv.theme-gharmi .scene.sec-jago .scene-vid{ -webkit-mask-image:none; mask-image:none; filter:url(#svfix-gjE); }
/* gharmi jago: autumn overlay art stays hidden; drapes animate via a strip loop pinned to the top band (16:9 crop of the same still, so it lands pixel-aligned on the cover frame) */
.inv.theme-gharmi .scene.sec-jago .vid-over{ display:none; }
/* gharmi jago flames: uniform teardrops with tips, anchored on the candle cups */
.inv.theme-gharmi .sec-jago .fx-flame{ width:2.1%; aspect-ratio:1; border-radius:2% 50% 50% 50%; filter:blur(.35px);
  background:radial-gradient(circle at 35% 65%, #FFF6D2 0%, #FFCA5E 42%, #F2921E 72%, rgba(242,146,30,.25) 92%, rgba(242,146,30,0) 100%);
  transform:translate(-50%,-88%) rotate(45deg); animation:gjFlame 1.5s ease-in-out infinite; }
@keyframes gjFlame{
  0%,100%{ transform:translate(-50%,-88%) rotate(45deg) scale(1); opacity:.96 }
  30%{ transform:translate(-50.4%,-90%) rotate(46.5deg) scale(.94,1.08); opacity:.88 }
  60%{ transform:translate(-49.6%,-87%) rotate(43.5deg) scale(1.04,.96); opacity:1 }
}

/* gharmi anand: video shows ONLY through windows traced around the corner art — arch and background always come from the static poster, so no drift or ghosting */
.inv.theme-gharmi .scene.sec-anand .akband{
  -webkit-mask-image:url('live/blmask-gm-ak.png?g3'); -webkit-mask-size:100% 100%; -webkit-mask-repeat:no-repeat;
  mask-image:url('live/blmask-gm-ak.png?g3'); mask-size:100% 100%; mask-repeat:no-repeat; }

/* patjhar anand: full-frame breeze video, box fitted to treematch2 geometry (video arch lines 159/921px = poster 99/1406px, apex 60 = 104) */
.scene.sec-anand .akhf{ position:absolute; z-index:2; left:calc(50% - .6131*var(--aw)); width:calc(1.20603*var(--aw)); height:calc(2.16484*var(--aw)); bottom:calc(-.00078*var(--aw)); pointer-events:none; }
.scene.sec-anand .akhf video{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; transition:opacity 1.2s ease; }
/* video shows only the two corner-branch zones (soft-edged); centre (ੴ, arch) and lower frame come from the static ak-base poster, so they can never drift */
.scene.sec-anand .akhf{ -webkit-mask-image:radial-gradient(ellipse 29% 26% at 12% 8%,#000 75%,transparent 100%),radial-gradient(ellipse 29% 26% at 88% 8%,#000 75%,transparent 100%); mask-image:radial-gradient(ellipse 29% 26% at 12% 8%,#000 75%,transparent 100%),radial-gradient(ellipse 29% 26% at 88% 8%,#000 75%,transparent 100%); }
.inv.theme-saawan .scene.sec-anand .akhf,.inv.theme-gharmi .scene.sec-anand .akhf{ display:none; }
/* patjhar paper match (all screens except cover) = anand paper rgb(253,240,222) */
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-fam,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-vatna,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-jago,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-rec,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-close{ --bg:rgb(253,240,222); }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-vatna video,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-vatna img:not([src*="leaf"]){ filter:url(#pf-maiyan); }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-jago .jago-warp{ filter:url(#pf-jago); }
.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-rec .deco img,.inv:not(.theme-saawan):not(.theme-gharmi) .scene.sec-rec .cur{ filter:url(#pf-rec); }
/* families: no vignette wash — flat paper edge to edge */
.scene.sec-fam::after{ display:none; }
/* families arch: inline vector, fixed-pixel strokes (never sub-pixel/blurred when scaled) */
.arch-art .arch-walls{ position:relative; background:none; }
.arch-art svg .ao{ stroke-width:2px; }
/* gharmi (display "Saawan"): families arch = raster <img> at the maiyan poster's pixel density (592px per screen width; same 5px line profile, core colour after #svfix-gv, warm paper halo) */
.arch-ras img.famcap{ display:block; width:100%; height:auto; flex:0 0 auto; }
.arch-ras .arch-walls{ position:relative; flex:1; background:none; }
.arch-ras img.arch-wall{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.arch-art svg .ai{ stroke-width:1.1px; }
.arch-art .famcap{ flex:0 0 auto; aspect-ratio:1024/384; height:auto; }
.arch-art .arch-wall{ shape-rendering:crispEdges; }