/* ═══════════════════════════════════════════════════════════════════════════
   ADITYA & ISHA — stylesheet.  Mobile first.
   You do not need to edit this file. All content lives in EDIT-HERE/config.js
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Italiana&family=Marcellus&family=Jost:wght@200;300;400;500&family=Ephesis&family=Noto+Serif+Devanagari:wght@400;500&display=swap');

/* ── 1. TOKENS ────────────────────────────────────────────────────────── */
:root{
  --f-display:"Marcellus",Georgia,serif;
  --f-engrave:"Italiana","Marcellus",serif;
  --f-body:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-script:"Ephesis","Marcellus",cursive;

  --t-xs:clamp(.66rem,.62rem + .16vw,.74rem);
  --t-sm:clamp(.8rem,.76rem + .2vw,.92rem);
  --t-base:clamp(.95rem,.9rem + .24vw,1.06rem);
  --t-lg:clamp(1.12rem,1.02rem + .45vw,1.42rem);
  --t-xl:clamp(1.6rem,1.3rem + 1.5vw,2.5rem);
  --t-2xl:clamp(2rem,1.5rem + 2.6vw,3.9rem);
  --t-3xl:clamp(2.7rem,1.9rem + 4.6vw,6.6rem);

  --s1:.5rem; --s2:1rem; --s3:1.35rem; --s4:1.8rem;
  --s5:2.4rem; --s6:3.2rem; --s7:3.8rem; --s8:4.6rem;
  --wrap:1180px;
  --gut:clamp(1.15rem,5vw,3.5rem);

  /* lantern light: the warm amber of paper against a night sky */
  --gold:#E8973A; --gold-lite:#FFDCA6; --gold-deep:#9A5A1E;
  --gold-line:rgba(232,151,58,.34);

  --m-bg1:#070D1C; --m-bg2:#142440; --m-glow:#FF9D4D; --m-glow-a:.19;

  --ink:#F4F1EA; --ink-soft:rgba(244,241,234,.72); --ink-mute:rgba(244,241,234,.5);
  --accent:var(--gold); --accent-2:#CBB27C; --accent-3:#9FB6D9;
  --card:rgba(255,255,255,.05); --card-line:rgba(255,255,255,.12);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --depth:1;                       /* 0 turns all 3D depth off */
}

/* ── 2. RESET ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;min-height:100dvh;width:100%;max-width:100%;
  font:300 var(--t-base)/1.7 var(--f-body);
  color:var(--ink);background:#080C1A;
  overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
body.locked,body.gated{overflow:hidden}
/* nothing decorative may ever push the page sideways on a phone */
.section,.hero{overflow:hidden}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4,p,figure{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--gold-lite);outline-offset:3px;border-radius:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── 3. MORPHING BACKGROUND ───────────────────────────────────────────── */
.bg{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 2%,
      color-mix(in srgb,var(--m-glow) calc(var(--m-glow-a)*100%),transparent) 0%,transparent 60%),
    linear-gradient(168deg,var(--m-bg1) 0%,var(--m-bg2) 52%,var(--m-bg1) 100%);
  transition:background 200ms linear;
}
.bg::after{
  content:"";position:absolute;inset:-22%;
  background:
    radial-gradient(38% 30% at 22% 26%,color-mix(in srgb,var(--m-glow) 13%,transparent),transparent 70%),
    radial-gradient(34% 26% at 78% 70%,color-mix(in srgb,var(--m-glow) 9%,transparent),transparent 70%);
  animation:wash 30s var(--ease-soft) infinite alternate;
}
@keyframes wash{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.1)}}
#dust{position:fixed;inset:0;z-index:-2;pointer-events:none}

/* ── 4. COLOUR WORLDS ─────────────────────────────────────────────────── */
[data-theme="carnival"]{
  --accent:#FFB84D;--accent-2:#FF6B3D;--accent-3:#F0648B;
  --card:rgba(255,255,255,.08);--card-line:rgba(255,200,140,.28);
  --ink:#FFF4E6;--ink-soft:rgba(255,244,230,.8);--ink-mute:rgba(255,244,230,.56);
}
[data-theme="sangeet"]{
  --accent:#FFC061;--accent-2:#FF7A45;--accent-3:#A06BE0;
  --card:rgba(120,60,190,.18);--card-line:rgba(255,122,69,.3);
  --ink:#F8EEFF;--ink-soft:rgba(248,238,255,.78);--ink-mute:rgba(248,238,255,.54);
}
[data-theme="wedding"]{
  --accent:#B87A2C;--accent-2:#CE9A55;--accent-3:#8C6226;
  --card:rgba(255,251,243,.68);--card-line:rgba(184,122,44,.3);
  --ink:#2C1F12;--ink-soft:rgba(44,31,18,.78);--ink-mute:rgba(44,31,18,.56);
  --gold-line:rgba(184,122,44,.42);--gold-lite:#8E5A1C;
}
[data-theme="reception"]{
  --accent:#FFCE8E;--accent-2:#E8973A;--accent-3:#8FAAD4;
  --card:rgba(255,255,255,.055);--card-line:rgba(255,206,142,.24);
  --ink:#FBF4E9;--ink-soft:rgba(251,244,233,.75);--ink-mute:rgba(251,244,233,.5);
}

/* ── SKY LANTERNS — they drift up behind everything, all the way down ── */
#sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.lant{position:absolute;bottom:-24vh;will-change:transform;contain:layout paint;
  animation:rise var(--dur,60s) linear infinite;animation-delay:var(--delay,0s)}
/* deliberately no CSS filter here: the glow lives inside the SVG, so the
   browser composites a static bitmap instead of re-blurring nine elements
   on every single frame. This was the main cause of the stutter. */
.lant__in{display:block;width:var(--w,42px);height:auto;
  animation:drift var(--sway,9s) ease-in-out infinite alternate;
  animation-delay:var(--delay2,0s)}
@keyframes rise{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(var(--dx,40px),-135vh,0)}
}
@keyframes drift{
  from{transform:translateX(-14px) rotate(-3deg)}
  to{transform:translateX(14px) rotate(3deg)}
}
/* the paper glows as the flame breathes */
.lant__glow{animation:lglow 3.4s ease-in-out infinite;transform-origin:center}
@keyframes lglow{0%,100%{opacity:.82}50%{opacity:1}}
body.calm #sky,body.calm .lant{display:none}
@media (prefers-reduced-motion:reduce){#sky{display:none}}

/* ═══════════════════════════════════════════════════════════════════════
   4b. ORNAMENT — the things that make this an invitation, not a web page
   ═══════════════════════════════════════════════════════════════════════ */

/* the rotating mandala that sits behind the big moments */
.mandala{position:absolute;left:50%;top:50%;translate:-50% -50%;pointer-events:none;z-index:0;
  width:var(--mw,min(96vw,720px));aspect-ratio:1;opacity:var(--mo,.3)}
.mandala svg{width:100%;height:100%;overflow:visible}
.mandala g{transform-origin:50% 50%;transform-box:fill-box}
.mandala .r1{animation:turn 160s linear infinite}
.mandala .r2{animation:turn 108s linear infinite reverse}
.mandala .r3{animation:turn 72s  linear infinite}
.mandala .r4{animation:breathe 11s var(--ease-soft) infinite alternate}
@keyframes turn{to{rotate:360deg}}
@keyframes breathe{from{scale:.94;opacity:.55}to{scale:1.06;opacity:1}}

/* paisley corner ornaments on a printed panel */
.corners{position:absolute;inset:0;pointer-events:none;color:var(--accent)}
.paisley{position:absolute;width:clamp(30px,9vw,48px);height:auto;opacity:.55}
.paisley:nth-child(1){top:8px;left:8px}
.paisley:nth-child(2){top:8px;right:8px;transform:scaleX(-1)}
.paisley:nth-child(3){bottom:8px;left:8px;transform:scaleY(-1)}
.paisley:nth-child(4){bottom:8px;right:8px;transform:scale(-1)}

/* the blessing at the head of the card */
.invocation{font:400 clamp(1.05rem,3.6vw,1.4rem)/1.7 "Noto Serif Devanagari",var(--f-display),serif;
  color:var(--accent);letter-spacing:.02em}
.invocation__roman{font:500 clamp(.5rem,1.7vw,.58rem)/1.6 var(--f-engrave);letter-spacing:.3em;
  text-indent:.3em;text-transform:uppercase;color:var(--ink-mute);margin-top:.35em;margin-bottom:1.4em}

/* the toran — a garland strung across the top of a section */
.toran{position:absolute;top:0;left:0;right:0;height:clamp(52px,11vw,96px);pointer-events:none;z-index:1;overflow:hidden}
.toran svg{width:102%;height:100%;margin-left:-1%}
.toran .leafdrop{transform-origin:top center;animation:sway 7s var(--ease-soft) infinite alternate}
.toran .leafdrop:nth-child(3n){animation-duration:9.2s;animation-delay:-2.1s}
.toran .leafdrop:nth-child(4n){animation-duration:6.1s;animation-delay:-3.4s}

/* an ornamental divider that draws itself as it comes into view */
.flourish{display:block;width:min(300px,78%);margin:var(--s3) auto;height:auto;overflow:visible}
.flourish path,.flourish line{stroke:var(--accent);fill:none;stroke-width:1;
  stroke-dasharray:var(--len,260);stroke-dashoffset:var(--len,260);
  transition:stroke-dashoffset 1.6s var(--ease)}
.in .flourish path,.in .flourish line,.flourish.in path,.flourish.in line{stroke-dashoffset:0}
.flourish .gem{fill:var(--accent);stroke:none;opacity:0;transition:opacity .7s var(--ease) 1.1s}
.in .flourish .gem,.flourish.in .gem{opacity:1}

/* a card that looks printed: deckled gold rule inside a soft panel */
.leaf{position:relative;padding:clamp(2rem,7vw,3.4rem) clamp(1.3rem,6vw,3rem);text-align:center;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 62%),
    var(--card);
  border:1px solid var(--card-line);border-radius:2px;
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2)}
.leaf::before,.leaf::after{content:"";position:absolute;width:clamp(30px,8vw,54px);height:clamp(30px,8vw,54px);
  border:1px solid var(--accent);opacity:.5;pointer-events:none}
.leaf::before{top:10px;left:10px;border-right:0;border-bottom:0;border-radius:3px 0 0 0}
.leaf::after{bottom:10px;right:10px;border-left:0;border-top:0;border-radius:0 0 3px 0}

/* ── 5. PRIMITIVES ────────────────────────────────────────────────────── */
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--gut)}
.section{position:relative;padding-block:var(--s7)}
.center{text-align:center}

.eyebrow{
  display:flex;align-items:center;gap:.8em;justify-content:center;
  font:500 var(--t-xs)/1 var(--f-engrave);
  letter-spacing:.36em;text-transform:uppercase;color:var(--accent);
  margin-bottom:var(--s3);
}
.eyebrow::before,.eyebrow::after{content:"";height:1px;flex:1;max-width:52px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.eyebrow::after{background:linear-gradient(270deg,transparent,var(--gold-line))}
.eyebrow--start{justify-content:flex-start}
.eyebrow--start::before{display:none}

.display{font:300 var(--t-2xl)/1.05 var(--f-display);letter-spacing:-.012em}
.display em{font-style:italic;color:var(--accent)}
.lede{font-size:var(--t-lg);font-weight:200;line-height:1.66;color:var(--ink-soft);max-width:54ch;margin-inline:auto}
.muted{color:var(--ink-mute);font-size:var(--t-sm)}

.rule{position:relative;height:16px;margin:var(--s4) auto;width:min(300px,72%)}
.rule::before{content:"";position:absolute;inset:50% 0 auto;height:1px;translate:0 -50%;
  background:linear-gradient(90deg,transparent,var(--gold-line) 20%,var(--gold-line) 80%,transparent);
  scale:var(--draw,0) 1;transform-origin:center;transition:scale 1.2s var(--ease) .1s}
.in .rule::before,.rule.in::before{--draw:1}
.rule::after{content:"❖";position:absolute;left:50%;top:50%;translate:-50% -50%;font-size:.6rem;color:var(--accent);
  opacity:var(--dot,0);transition:opacity .7s var(--ease) .7s}
.in .rule::after,.rule.in::after{--dot:1}

.glass{
  background:var(--card);border:1px solid var(--card-line);border-radius:3px;
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  position:relative;
}
.framed::after{content:"";position:absolute;inset:8px;border:1px solid var(--gold-line);pointer-events:none;border-radius:1px}

/* every button is a gold-foil plate, the same language as the invitation seal */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:54px;padding:0 2.1em;cursor:pointer;width:auto;
  font:500 clamp(.64rem,.58rem + .28vw,.76rem)/1 var(--f-engrave);
  letter-spacing:.24em;text-transform:uppercase;text-indent:.24em;
  text-decoration:none;color:var(--gold-lite);
  background:linear-gradient(180deg,rgba(217,177,104,.13),rgba(217,177,104,.03));
  border:1px solid var(--gold-line);border-radius:100px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .5s var(--ease),border-color .5s var(--ease),
    transform .3s var(--ease),box-shadow .5s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
/* the foil that sweeps up to fill the plate */
.btn::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(135deg,#A87B34 0%,#F6E3B4 42%,#E2BE79 62%,#B8873A 100%);
  transform:translateY(101%);transition:transform .55s var(--ease)}
/* the hairline ring engraved just inside the edge */
.btn::after{content:"";position:absolute;inset:4px;border-radius:100px;pointer-events:none;
  border:1px solid rgba(246,227,180,.24);transition:border-color .5s var(--ease)}
.btn:hover,.btn:focus-visible{color:#3A2708;border-color:var(--gold);
  box-shadow:0 12px 30px -14px rgba(217,177,104,.75)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn:hover::after,.btn:focus-visible::after{border-color:rgba(58,39,8,.28)}
.btn:active{transform:scale(.972)}

/* the solid one arrives already foiled, and the foil slides away on hover */
.btn--solid{color:#3A2708;border-color:var(--gold);
  box-shadow:0 12px 28px -16px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.45)}
.btn--solid::before{transform:translateY(0)}
.btn--solid::after{border-color:rgba(58,39,8,.28)}
.btn--solid:hover::before{transform:translateY(-101%)}
.btn--solid:hover{color:var(--gold-lite)}
.btn--solid:hover::after{border-color:rgba(246,227,180,.24)}
.btn--wide{width:100%}

/* ── 6. SCROLL CHOREOGRAPHY (the "page turning" 3D reveal) ────────────── */
.rise{opacity:0;transform:translate3d(0,22px,0);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rise.in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.07s}.rise[data-d="2"]{transition-delay:.14s}
.rise[data-d="3"]{transition-delay:.21s}.rise[data-d="4"]{transition-delay:.28s}
.rise[data-d="5"]{transition-delay:.35s}.rise[data-d="6"]{transition-delay:.42s}

.turn{perspective:1400px;perspective-origin:50% 60%}
.turn > *{
  opacity:0;transform:rotateX(calc(9deg * var(--depth))) translate3d(0,34px,-60px);
  transform-origin:50% 0;
  transition:opacity 1.05s var(--ease),transform 1.15s var(--ease);
}
.turn.in > *{opacity:1;transform:none}

/* ═══════════════════════════════════════════════════════════════════════
   6b. THE GATE — the opening video, and the light that becomes the site
   ═══════════════════════════════════════════════════════════════════════ */
.gate{position:fixed;inset:0;z-index:10000;background:#0D0A10;overflow:hidden;
  display:grid;align-items:end;justify-items:center;
  transition:opacity 1s var(--ease),visibility 1s}
.gate.done{opacity:0;visibility:hidden;pointer-events:none}
.gate__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 46%;
  background:#0D0A10}
.gate__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,16,10,.34) 0%,transparent 22%,transparent 40%,
    rgba(28,16,10,.66) 72%,rgba(16,9,5,.95) 100%)}

.gate__ui{position:relative;z-index:2;display:grid;justify-items:center;gap:.35rem;text-align:center;
  padding:0 var(--gut) max(clamp(2rem,7vh,3.8rem),env(safe-area-inset-bottom));
  transition:opacity .55s var(--ease),transform .7s var(--ease)}
.gate.playing .gate__ui{opacity:0;transform:translateY(16px);pointer-events:none}

.gate__btn{position:relative;cursor:pointer;border:0;background:none;padding:0;margin-bottom:.4rem;
  -webkit-tap-highlight-color:transparent}
.gate__btn-in{display:flex;align-items:center;justify-content:center;
  min-height:56px;padding:0 2.2em;border-radius:100px;
  font:500 clamp(.62rem,.56rem + .3vw,.76rem)/1 var(--f-engrave);
  letter-spacing:.26em;text-transform:uppercase;color:#3A2708;
  background:linear-gradient(135deg,#C79B4F 0%,#F6E3B4 42%,#E2BE79 62%,#B8873A 100%);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.gate__btn:active .gate__btn-in{transform:scale(.965)}
/* a soft halo breathing behind the button so the eye lands on it */
.gate__btn::before{content:"";position:absolute;inset:-14px;border-radius:100px;z-index:-1;
  background:radial-gradient(closest-side,rgba(255,214,140,.5),transparent 72%);
  animation:halo 3.2s var(--ease-soft) infinite}
.gate__btn::after{content:"";position:absolute;inset:0;border-radius:100px;pointer-events:none;
  border:1px solid rgba(255,240,200,.6);animation:ripple 3.2s var(--ease-soft) infinite}
@keyframes halo{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:.95;transform:scale(1.04)}}
@keyframes ripple{0%{opacity:.85;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.32)}}

.gate__flourish{width:min(190px,52%);height:auto;overflow:visible;margin:.5rem 0 .1rem}
.gate__flourish path{fill:none;stroke:rgba(246,227,180,.85);stroke-width:1}
.gate__flourish .g{fill:rgba(246,227,180,.95);stroke:none}
.gate__names{font:400 clamp(1.6rem,1.1rem + 3.2vw,2.6rem)/1.15 var(--f-engrave);letter-spacing:.06em;
  background:linear-gradient(178deg,#FFF9EA 6%,#F3E0B4 40%,#D9B168 72%,#A87B34 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.6))}
.gate__sub{font:500 clamp(.56rem,.5rem + .3vw,.68rem)/1 var(--f-engrave);letter-spacing:.36em;
  text-transform:uppercase;color:rgba(255,244,222,.82);text-shadow:0 1px 10px rgba(0,0,0,.8)}
.gate__hint{margin-top:.7rem;font:300 .68rem/1.4 var(--f-body);letter-spacing:.1em;
  color:rgba(255,240,214,.6);display:flex;align-items:center;gap:.45em}
.gate__hint svg{width:13px;height:13px;flex:none}

/* the sunset on the horizon swells until it is the whole screen */
.gate__bloom{position:absolute;left:50%;top:72%;translate:-50% -50%;
  width:22vmax;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#FFF8E6 0%,#FFD79A 22%,rgba(255,157,77,.85) 46%,rgba(226,110,40,0) 74%)}
.gate.bloom .gate__bloom{animation:bloom 1.45s cubic-bezier(.45,0,.25,1) forwards}
@keyframes bloom{0%{opacity:0;transform:scale(.25)}38%{opacity:1}100%{opacity:1;transform:scale(11)}}

/* the site emerges from that light rather than cutting in */
body.emerging #app,body.emerging .bg{animation:emerge 1.5s var(--ease) both}
@keyframes emerge{from{opacity:0;transform:scale(1.055)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .gate__btn::before,.gate__btn::after{animation:none}
  .gate.bloom .gate__bloom{animation:none;opacity:1;transform:scale(11)}
}

/* ── 7. PRELOADER — a diya being lit ──────────────────────────────────── */
.pre{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:#070A16;
  transition:opacity .9s var(--ease),visibility .9s}
.pre.done{opacity:0;visibility:hidden}
.pre__in{display:grid;place-items:center;gap:var(--s3);text-align:center;padding:var(--gut)}
.pre svg{width:96px;height:96px}
.pre circle{stroke-dasharray:302;stroke-dashoffset:302;animation:draw 1.7s var(--ease) forwards .1s}
@keyframes draw{to{stroke-dashoffset:0}}
.pre__mono{font:italic 300 2rem/1 var(--f-display);color:var(--gold-lite);opacity:0;animation:fu .9s var(--ease) forwards .75s}
.pre__cap{font:500 .58rem/1.6 var(--f-engrave);letter-spacing:.4em;text-transform:uppercase;color:rgba(217,177,104,.6);
  opacity:0;animation:fu .9s var(--ease) forwards 1.05s;max-width:22ch}
@keyframes fu{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}

/* ═══════════════════════════════════════════════════════════════════════
   8. HERO — built entirely in code. A 3D mandap gateway at night.
   ═══════════════════════════════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;
  padding-block:clamp(5.5rem,15vh,8rem) clamp(5rem,13vh,7rem);
  overflow:hidden;
}
.stage{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  perspective:900px;perspective-origin:50% 42%;
  transform-style:preserve-3d;
}
.layer{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
/* each layer sits at a real depth, so scroll + tilt give true parallax */
.layer[data-z]{transform:translate3d(0,calc(var(--py,0px) * var(--k)),calc(var(--z) * 1px * var(--depth)))
  scale(calc(1 + (var(--z) * -0.0011 * var(--depth))))}

/* sky + stars */
.sky{background:
  radial-gradient(130% 80% at 50% 100%,rgba(217,177,104,.16),transparent 58%),
  linear-gradient(180deg,#05070F 0%,#0B1024 44%,#161B3C 78%,#221A3A 100%)}
.stars i{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;
  animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.12;transform:scale(.8)}50%{opacity:.9;transform:scale(1.25)}}

/* floral borders at the top corners — drawn, not photographed */
.glowline{filter:drop-shadow(0 0 5px rgba(255,214,150,.65))}
.corner{position:absolute;top:0;width:min(78vw,430px);display:block}
.corner--l{left:0}
.corner--r{right:0;transform:scaleX(-1)}
@media(min-width:900px){.corner{width:min(42vw,520px)}}
.strand{animation:sway 8s var(--ease-soft) infinite alternate}
@keyframes sway{from{transform:rotate(-2.4deg)}to{transform:rotate(2.4deg)}}

/* keeps the middle of the screen calm enough to read */
.scrim{background:radial-gradient(62% 40% at 50% 52%,rgba(6,9,20,.78) 0%,rgba(6,9,20,.42) 46%,transparent 78%)}

/* ── DIYAS — the clay lamps, used everywhere a flame is needed ────────── */
.floor{top:auto;bottom:0;height:30%;
  background:radial-gradient(70% 100% at 50% 100%,rgba(232,151,58,.22),transparent 72%)}
.diyas{position:absolute;bottom:8%;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(6px,3.4vw,30px);padding-inline:5vw}
.diyas--footer{position:static;margin-bottom:var(--s3);bottom:auto;padding:0}

.diya{position:relative;display:block;width:var(--s,30px);flex:none}
.diya svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
/* the pool of light the lamp throws onto the floor */
.diya::after{content:"";position:absolute;left:50%;top:52%;translate:-50% 0;
  width:230%;height:150%;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(255,176,74,.34),transparent 68%);
  animation:pool 2.6s ease-in-out infinite}
@keyframes pool{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

.diya__flame,.flame{position:absolute;left:50%;bottom:76%;width:calc(var(--s,30px) * .26);
  height:calc(var(--s,30px) * .46);translate:-50% 0;
  border-radius:50% 50% 46% 46%;transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 78%,#FFF8DC 0%,#FFCB5E 38%,#FF8A3D 70%,rgba(255,120,40,0) 100%);
  box-shadow:0 0 14px 5px rgba(255,170,60,.45);animation:flicker 2.1s ease-in-out infinite}
.flame{width:8px;height:14px;bottom:97%}
@keyframes flicker{
  0%,100%{transform:translateX(-50%) scale(1,1) rotate(-1deg);opacity:.94}
  28%{transform:translateX(-50%) scale(.92,1.12) rotate(2deg);opacity:1}
  55%{transform:translateX(-50%) scale(1.07,.93) rotate(-2deg);opacity:.86}
  78%{transform:translateX(-50%) scale(.97,1.05) rotate(1deg);opacity:1}
}

/* the lantern film behind the names */
.hero__film{position:absolute;inset:0;overflow:hidden;z-index:0}
.hero__film video,.hero__film img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
/* darkened just enough to read against, and faded into the page below */
.hero__film::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(96% 62% at 50% 44%,rgba(4,9,18,0) 0%,rgba(4,9,18,.5) 62%,rgba(4,9,18,.86) 100%),
    linear-gradient(180deg,rgba(4,9,18,.5) 0%,rgba(4,9,18,.12) 26%,rgba(4,9,18,.16) 56%,
      rgba(5,10,20,.8) 86%,var(--m-bg1) 100%);
  opacity:calc(.55 + var(--dark,.3))}

.hero__inner{position:relative;z-index:2;text-align:center}
/* stacked on a phone, side by side once there is room */
.hero__names{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1em;margin-block:var(--s2)}
@media(min-width:640px){.hero__names{flex-direction:row;gap:clamp(.5rem,2vw,1.3rem)}}
.hero__name{font:400 var(--t-3xl)/1.04 var(--f-engrave);letter-spacing:.02em;
  filter:drop-shadow(0 2px 22px rgba(217,177,104,.28))}
/* the gold is painted on each letter, so the entrance animation cannot flatten it */
.hero__name,.hero__name .ltr{
  background-image:linear-gradient(178deg,#FFF9EA 6%,var(--gold-lite) 38%,var(--gold) 70%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__amp{font:italic 300 clamp(1.7rem,1.1rem + 3.2vw,4.4rem)/1 var(--f-display);color:var(--gold);opacity:.9}
.ltr{display:inline-block;opacity:0;transform:translate3d(0,.4em,-40px) rotateX(38deg)}
.loaded .ltr{animation:ltrIn 1s var(--ease) forwards}
@keyframes ltrIn{to{opacity:1;transform:none}}

.hero__script{font-family:var(--f-script);font-size:clamp(1.6rem,1.1rem + 2.4vw,2.8rem);
  line-height:1.35;color:var(--gold-lite);opacity:.95;margin-top:.1em}
/* ornaments inside the opened card are always drawn, there is no scroll there */
.lb .flourish path,.lb .flourish line{stroke-dashoffset:0}
.lb .flourish .gem{opacity:1}
.lb .flourish{width:min(200px,62%);margin-block:.5rem}
.hero__meta{display:flex;flex-direction:column;align-items:center;gap:.45em;margin-top:var(--s3);
  font:500 clamp(.62rem,.56rem + .3vw,.82rem)/1.5 var(--f-engrave);letter-spacing:.3em;color:var(--gold-lite);
  text-transform:uppercase}
.hero__meta span{display:block}
@media(min-width:700px){
  .hero__meta{flex-direction:row;gap:1em}
  .hero__meta span+span::before{content:"◆";margin-right:1em;color:var(--gold);opacity:.6;font-size:.5em;vertical-align:middle}
}

/* the scroll cue — impossible to miss, and tappable */
.cue{position:absolute;left:50%;bottom:max(clamp(1.1rem,4vh,2.4rem),env(safe-area-inset-bottom));
  translate:-50% 0;z-index:3;display:grid;justify-items:center;gap:.75rem;
  background:none;border:0;padding:.4rem 1rem;cursor:pointer;
  -webkit-tap-highlight-color:transparent;animation:cueBob 2.2s var(--ease-soft) infinite}
.cue__word{font:400 clamp(.6rem,2.2vw,.72rem)/1 var(--f-engrave);letter-spacing:.42em;
  text-indent:.42em;text-transform:uppercase;color:var(--gold-lite);
  text-shadow:0 2px 14px rgba(0,0,0,.85)}
.cue__ring{position:relative;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;
  color:#2A1806;background:linear-gradient(150deg,#FFE0AE,#F0A24A 52%,#C2701F 100%);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.5)}
.cue__ring svg{width:22px;height:22px;animation:cueArrow 1.6s var(--ease-soft) infinite}
/* two rings pulsing outward, so the eye is pulled downward */
.cue__ring::before,.cue__ring::after{content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(255,206,142,.75);animation:cueRipple 2.4s var(--ease-soft) infinite}
.cue__ring::after{animation-delay:1.2s}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}}
@keyframes cueArrow{0%,100%{transform:translateY(-2px);opacity:.75}50%{transform:translateY(3px);opacity:1}}
@keyframes cueRipple{0%{opacity:.9;transform:scale(1)}75%,100%{opacity:0;transform:scale(2.1)}}
.hero.scrolled .cue{opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .cue,.cue__ring svg,.cue__ring::before,.cue__ring::after{animation:none}
}

/* ── 9. COUNTDOWN ─────────────────────────────────────────────────────── */
/* no boxes — just the numbers, held apart by hairlines */
.countdown{display:flex;justify-content:center;align-items:flex-start;
  gap:clamp(.9rem,4.5vw,2.2rem);flex-wrap:nowrap;margin-top:var(--s4)}
.cd{position:relative;text-align:center;min-width:0}
.cd + .cd::before{content:"";position:absolute;left:calc(-1 * clamp(.45rem,2.25vw,1.1rem));
  top:12%;bottom:34%;width:1px;background:linear-gradient(180deg,transparent,var(--gold-line),transparent)}
.cd b{display:block;font:400 clamp(1.7rem,1.2rem + 2.4vw,3rem)/1 var(--f-engrave);
  color:var(--gold-lite);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 2px 22px rgba(255,157,77,.45)}
.cd span{display:block;margin-top:.5em;font:300 clamp(.5rem,1.8vw,.6rem)/1 var(--f-body);
  letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute)}

/* ── 10. INVITATION NOTE ──────────────────────────────────────────────── */
.invite{padding:var(--s5) clamp(1.2rem,5vw,3rem);text-align:center}
.invite p{font:300 var(--t-lg)/1.85 var(--f-display);color:var(--ink-soft)}
.invite .sig{font-family:var(--f-script);font-size:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);color:var(--accent);margin-top:var(--s3)}

/* ── 11. OUR STORY — medallions hung on a gold thread ─────────────────── */
.story{position:relative}
.chapters{--gap:clamp(2.8rem,9vw,4.2rem);
  position:relative;z-index:1;margin-top:var(--s4);display:grid;gap:var(--gap);perspective:1100px}
.chapter{position:relative;text-align:center;display:grid;justify-items:center;gap:.7rem}
/* the thread lives only in the space between two chapters, never behind words */
.chapter + .chapter::before{
  content:"";position:absolute;left:50%;translate:-.5px 0;
  top:calc(-1 * var(--gap));height:var(--gap);width:1px;
  background:linear-gradient(180deg,transparent 4%,var(--gold-line) 30%,var(--gold-line) 70%,transparent 96%);
  transform-origin:top;scale:1 0;transition:scale 1s var(--ease)}
.chapter.in::before{scale:1 1}
/* a single gold bead where the thread passes its midpoint */
.chapter + .chapter::after{
  content:"";position:absolute;left:50%;top:calc(-1 * var(--gap) / 2);
  width:4px;height:4px;rotate:45deg;translate:-50% -50%;
  background:var(--accent);opacity:0;transition:opacity .7s var(--ease) .5s;
  box-shadow:0 0 8px var(--accent)}
.chapter.in::after{opacity:.9}
.chapter__inner{position:relative}

/* the medallion: two counter-rotating gold rings around the date */
.medal{position:relative;width:clamp(92px,25vw,124px);aspect-ratio:1;display:grid;place-items:center;
  transform-style:preserve-3d;
  opacity:0;transform:rotateX(calc(50deg * var(--depth))) scale(.7);
  transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.chapter.in .medal{opacity:1;transform:none}
.medal svg{position:absolute;inset:0;width:100%;height:100%}
.medal .ring-a,.medal .ring-b{transform-box:fill-box;transform-origin:50% 50%}
.medal .ring-a{animation:turn 34s linear infinite}
.medal .ring-b{animation:turn 22s linear infinite reverse}
.medal__core{position:relative;z-index:1;display:grid;place-items:center;gap:.1em;
  width:66%;aspect-ratio:1;border-radius:50%;
  background:
    radial-gradient(circle at 42% 34%,rgba(255,246,224,.14),transparent 70%),
    color-mix(in srgb,var(--m-bg1) 92%,transparent);
  box-shadow:inset 0 0 18px rgba(217,177,104,.24),0 0 0 1px rgba(217,177,104,.16)}
.medal__mon{font:500 clamp(.62rem,2.2vw,.78rem)/1 var(--f-engrave);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-lite)}
.medal__yr{font:300 clamp(1.05rem,3.4vw,1.35rem)/1 var(--f-display);color:var(--accent)}

.chapter__inner{opacity:0;transform:translate3d(0,20px,-30px);
  transition:opacity 1s var(--ease) .12s,transform 1.1s var(--ease) .12s}
.chapter.in .chapter__inner{opacity:1;transform:none}
.chapter__title{font:300 var(--t-xl)/1.24 var(--f-display);color:var(--ink)}
.chapter__title em{font-style:italic;color:var(--accent)}
.chapter__text{margin-top:.55em;color:var(--ink-soft);font-weight:300;
  font-size:var(--t-base);max-width:44ch;margin-inline:auto}
@media(min-width:860px){.chapter__text{max-width:52ch}}

/* ── 12. SCRATCH TO REVEAL ────────────────────────────────────────────── */
.scratch{display:grid;justify-items:center;text-align:center;position:relative;z-index:1}
/* the envelope the scratch card sits inside */
.envelope{position:relative;width:min(430px,100%);margin-block:var(--s4) var(--s3);
  padding:clamp(1.1rem,4.5vw,1.9rem);border-radius:5px;
  background:
    radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 60%),
    linear-gradient(158deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--card-line);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.envelope::before,.envelope::after{content:"";position:absolute;width:clamp(26px,7vw,42px);height:clamp(26px,7vw,42px);
  border:1px solid var(--accent);opacity:.55;pointer-events:none}
.envelope::before{top:9px;left:9px;border-right:0;border-bottom:0}
.envelope::after{bottom:9px;right:9px;border-left:0;border-top:0}
/* the wax seal sitting on the flap */
.seal{position:absolute;top:0;left:50%;translate:-50% -52%;z-index:3;
  width:clamp(46px,12vw,58px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#F0D08A 0%,#C79240 38%,#8E5F1C 72%,#5E3C0E 100%);
  box-shadow:0 10px 22px -8px rgba(0,0,0,.9),inset 0 -3px 7px rgba(0,0,0,.45),
    inset 0 2px 6px rgba(255,244,206,.55),0 0 0 1px rgba(255,232,180,.35);
  font:italic 400 clamp(1.3rem,4.4vw,1.6rem)/1 var(--f-display);
  color:#3A2405;text-shadow:0 1px 0 rgba(255,236,190,.45);
  animation:sealbob 5.5s var(--ease-soft) infinite alternate}
@keyframes sealbob{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.scratch__card.revealed ~ .seal,.envelope.opened .seal{animation:sealpop .8s var(--ease) forwards}
@keyframes sealpop{to{transform:translateY(-14px) rotate(-14deg) scale(.86);opacity:.45}}

.stage3d{perspective:1000px;width:100%}
.scratch__card{
  position:relative;width:100%;aspect-ratio:1/.74;border-radius:3px;overflow:hidden;
  border:1px solid var(--gold-line);
  background:linear-gradient(150deg,#121933,#0B1023 58%,#141B34);
  box-shadow:inset 0 0 34px rgba(0,0,0,.55);
  transform-style:preserve-3d;touch-action:none;
  transform:rotateX(calc(var(--rx,0deg) * var(--depth))) rotateY(calc(var(--ry,0deg) * var(--depth)));
  transition:transform .5s var(--ease);
}
.scratch__under{position:absolute;inset:0;display:grid;place-content:center;
  padding:clamp(1rem,4vw,1.6rem);gap:0;text-align:center}
/* letter-spacing adds a trailing gap, so each spaced line is nudged back by half of it */
.scratch__label{font:500 clamp(.5rem,1.7vw,.58rem)/1.4 var(--f-engrave);letter-spacing:.32em;
  text-indent:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:.7em}
.scratch__top{font:300 clamp(2.7rem,1.9rem + 5vw,4.4rem)/1 var(--f-display);
  color:var(--gold-lite);letter-spacing:.01em}
.scratch__mid{font:500 clamp(.8rem,.66rem + .7vw,1.1rem)/1.5 var(--f-engrave);letter-spacing:.28em;
  text-indent:.28em;text-transform:uppercase;color:var(--ink);margin-top:.28em}
.scratch__bot{font:300 clamp(1.15rem,.95rem + .9vw,1.6rem)/1.5 var(--f-display);
  color:var(--gold);letter-spacing:.16em;text-indent:.16em}
.scratch__note{font:300 clamp(.56rem,1.9vw,.66rem)/1.6 var(--f-body);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-mute);margin-top:1.1em}
.scratch__foil{position:absolute;inset:0;display:block;cursor:grab;touch-action:none}
.scratch__foil.gone{opacity:0;pointer-events:none;transition:opacity .8s var(--ease)}
.scratch__card.revealed .scratch__under{animation:pop .9s var(--ease) both}
@keyframes pop{from{transform:scale(.93);opacity:.35}to{transform:none;opacity:1}}
.scratch__hint{font:500 var(--t-xs)/1.9 var(--f-engrave);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-mute);max-width:26ch;margin-inline:auto}

/* the gold burst when the date lands */
.burst{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0}
.scratch__card.revealed .burst{animation:burst 1.3s var(--ease) forwards}
@keyframes burst{0%{opacity:.9;box-shadow:inset 0 0 0 0 rgba(243,224,180,.55)}100%{opacity:0;box-shadow:inset 0 0 90px 30px rgba(243,224,180,0)}}

/* ── 13. FAMILIES (unlocked by the scratch card) ──────────────────────── */
.families{position:relative}
/* while locked the section stays small — no dead space on the page */
.families__body{display:grid;grid-template-rows:0fr;
  transition:grid-template-rows 1.1s var(--ease),opacity .9s var(--ease) .15s;opacity:0}
.families__body > div{overflow:hidden;min-height:0}
.families[data-locked="false"] .families__body{grid-template-rows:1fr;opacity:1}
.families__lock{display:grid;justify-items:center;gap:.85rem;text-align:center;padding:var(--s3) 0;
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.families[data-locked="false"] .families__lock{opacity:0;transform:translateY(-8px);pointer-events:none}
.families__lock svg{width:30px;height:30px;opacity:.75;animation:sealbob 4.5s var(--ease-soft) infinite alternate}
.families__lock p{font:500 var(--t-xs)/1.9 var(--f-engrave);letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-lite);max-width:26ch}
.families__lock p{font:500 var(--t-xs)/1.8 var(--f-engrave);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-lite);max-width:24ch}
.families__lock svg{width:34px;height:34px;opacity:.8}
.famgrid{display:grid;gap:var(--s4);margin-top:var(--s4);text-align:center}
@media(min-width:800px){.famgrid{grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s5)}}
.fam__label{font:500 var(--t-xs)/1 var(--f-engrave);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute)}
.fam__names{font:300 var(--t-lg)/1.4 var(--f-display);color:var(--ink);margin-top:.55em}
.fam__sur{font-family:var(--f-script);font-size:1.45rem;color:var(--accent);margin-top:.1em}
.fam__child{font:500 .58rem/1 var(--f-engrave);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute);margin-top:.9em}
.fam__div{justify-self:center;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-line),transparent)}
@media(min-width:800px){.fam__div{width:1px;height:82px;background:linear-gradient(180deg,transparent,var(--gold-line),transparent)}}

/* ── 14. THE EVENTS — a caricature set inside the gold frame ─────────── */
.deck{margin-top:var(--s6);display:grid;gap:var(--s8);justify-items:center}
@media(min-width:820px){.deck{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s5)}}

.evt{width:min(94%,420px);text-align:center}
.evt__frame{position:relative;aspect-ratio:1;display:block}
/* the lantern glow the frame hangs in */
.evt__halo{position:absolute;inset:-6%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,157,77,.28),rgba(255,120,40,.08) 52%,transparent 72%);
  animation:lglow 5s ease-in-out infinite}
/* the caricature sits exactly in the frame's opening: 46.88% x 73.44%, centred */
.evt__pic{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:1;
  width:46.88%;height:73.44%;border-radius:50%;overflow:hidden;
  box-shadow:inset 0 0 40px rgba(4,9,18,.55)}
.evt__pic img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.4s var(--ease)}
.evt:hover .evt__pic img{transform:scale(1.05)}
.evt__ring{position:absolute;inset:0;z-index:2;width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
  animation:frameSway 9s var(--ease-soft) infinite alternate}
@keyframes frameSway{from{transform:rotate(-1.1deg) translateY(-4px)}to{transform:rotate(1.1deg) translateY(4px)}}

.evt__body{margin-top:var(--s3)}
.evt__name{font:400 clamp(1.5rem,1.2rem + 1.6vw,2.1rem)/1.2 var(--f-engrave);
  letter-spacing:.05em;color:var(--gold-lite);text-shadow:0 2px 20px rgba(255,157,77,.35)}
.evt__tag{font-family:var(--f-script);font-size:clamp(1.15rem,1rem + .8vw,1.5rem);
  line-height:1.4;color:var(--accent);margin-top:.1em}
.evt__when{margin-top:.85em;font:400 clamp(.72rem,2.6vw,.86rem)/1.5 var(--f-engrave);
  letter-spacing:.28em;text-indent:.28em;text-transform:uppercase;color:#FFF0DC}
.evt__time{font:300 var(--t-base)/1.5 var(--f-body);color:#FFE3C0;letter-spacing:.04em}
.evt__where{margin-top:.5em;font:300 var(--t-sm)/1.6 var(--f-body);color:rgba(255,235,214,.82)}
.evt__dress{margin-top:.35em;font:400 .64rem/1.6 var(--f-engrave);letter-spacing:.2em;
  text-indent:.2em;text-transform:uppercase;color:rgba(255,224,190,.6)}
.evt__note{margin-top:.9em;font:300 var(--t-sm)/1.7 var(--f-body);color:rgba(255,235,214,.72);
  max-width:34ch;margin-inline:auto}
.evt__cal{margin-top:var(--s3);min-height:48px;font-size:.62rem}

/* ── 15. CARD DECOR PER EVENT ─────────────────────────────────────────── */
.bunting{top:0;left:-8%;width:116%;height:56px}
.bunting g{transform-origin:top center;animation:sway 7s var(--ease-soft) infinite alternate}
.bunting g:nth-child(3n){animation-duration:8.8s;animation-delay:-1.6s}
.bunting g:nth-child(4n){animation-duration:6.2s;animation-delay:-2.8s}
.lantern{width:28px;animation:bob 6s var(--ease-soft) infinite alternate}
@keyframes bob{from{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(7px) rotate(2deg)}}
.confetti{width:6px;height:9px;border-radius:1px;animation:fall linear infinite}
@keyframes fall{0%{transform:translate3d(0,-10%,0) rotate(0);opacity:0}14%{opacity:.85}100%{transform:translate3d(var(--dx,16px),120%,0) rotate(720deg);opacity:0}}

.disco{top:0;left:50%;translate:-50% 0;display:grid;justify-items:center}
.disco__wire{width:1px;height:20px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.3))}
.disco__ball{width:42px;aspect-ratio:1;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.85) 0 6deg,rgba(150,110,215,.5) 6deg 12deg),
             radial-gradient(circle at 32% 28%,#fff,#7B5EA7 60%,#2A1747);
  background-blend-mode:overlay,normal;
  box-shadow:0 0 26px rgba(255,61,166,.55),0 0 60px rgba(139,92,246,.4),inset -6px -6px 18px rgba(0,0,0,.6);
  animation:spin 15s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.beam{top:0;width:80px;height:76%;transform-origin:50% 0;filter:blur(12px);
  background:linear-gradient(180deg,var(--beam,rgba(255,61,166,.3)),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);
  animation:swing 9s var(--ease-soft) infinite alternate}
@keyframes swing{from{transform:rotate(-12deg)}to{transform:rotate(13deg)}}
.spark{width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 7px 2px rgba(255,209,102,.85);
  animation:tw 3.4s ease-in-out infinite}

.jasmine{top:0;left:0;width:100%;height:64px}
.strandj{transform-origin:top center;animation:sway 9s var(--ease-soft) infinite alternate}
.strandj:nth-child(3n){animation-duration:11s;animation-delay:-2.4s}
.diyarow{bottom:1.5%;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;
  gap:clamp(8px,5%,26px)}
.bell{top:6%;right:2%;width:30px;transform-origin:50% 8%;animation:ring 7s var(--ease-soft) infinite}
@keyframes ring{0%,74%,100%{transform:rotate(0)}80%{transform:rotate(9deg)}86%{transform:rotate(-7deg)}92%{transform:rotate(4deg)}}

.chandelier{top:0;left:50%;translate:-50% 0;width:96px;animation:bob 11s var(--ease-soft) infinite alternate}
.chandelier .drop{animation:tw 4s ease-in-out infinite}
.candlerow{bottom:2%;left:0;right:0;display:flex;justify-content:center;align-items:flex-end;gap:clamp(9px,5%,24px)}
.candlerow .candle{width:7px;height:26px}
.candlerow .flame{width:7px;height:12px}

/* ── 16. LIGHTBOX — the card opens and turns over ─────────────────────── */
.lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:clamp(.8rem,4vw,2rem);
  background:rgba(5,8,18,.9);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.lb.open{opacity:1;visibility:visible}
.lb__stage{perspective:1600px;width:min(430px,100%);max-height:100%}
.lb__flip{position:relative;width:100%;aspect-ratio:864/1821;max-height:78svh;margin-inline:auto;
  transform-style:preserve-3d;transition:transform .95s var(--ease);cursor:pointer}
.lb__flip.back{transform:rotateY(180deg)}
.lb__face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4px;overflow:hidden}
.lb__face img{width:100%;height:100%;object-fit:contain;background:#0A0E1E}
.lb__face--back{transform:rotateY(180deg);background:linear-gradient(160deg,#101733,#080C1C);
  border:1px solid var(--gold-line);display:grid;align-content:center;gap:.2rem;
  padding:clamp(1.2rem,5vw,2.2rem);overflow-y:auto}
/* the back of the card stays inside its event's colour world */
.lb[data-theme="carnival"]  .lb__face--back{background:linear-gradient(160deg,#5C1B60,#2C0E33)}
.lb[data-theme="sangeet"]   .lb__face--back{background:linear-gradient(160deg,#2C0B54,#11062A)}
.lb[data-theme="wedding"]   .lb__face--back{background:linear-gradient(160deg,#FCF7ED,#EDE0C6)}
.lb[data-theme="reception"] .lb__face--back{background:linear-gradient(160deg,#101733,#080C1C)}
.lb__face--back{text-align:center;justify-items:center}
.lb__eyebrow{font:500 .5rem/1 var(--f-engrave);letter-spacing:.36em;text-transform:uppercase;color:var(--accent);opacity:.85}
.lb__title{font:300 var(--t-xl)/1.15 var(--f-display);color:var(--gold-lite);margin-top:.5em}
.lb__tag{font-family:var(--f-script);font-size:clamp(1.3rem,5vw,1.7rem);color:var(--accent);line-height:1.4}
.lb__note{color:var(--ink-soft);font-size:var(--t-sm);max-width:34ch;margin-inline:auto}
.lb__lines{margin-top:.2em;display:grid;gap:.42em}
.lb__lines b{font:300 var(--t-lg)/1.35 var(--f-display);color:var(--ink)}
.lb__lines span{font:300 var(--t-sm)/1.5 var(--f-body);color:var(--ink-soft)}
.lb__lines i{font:500 .52rem/1 var(--f-engrave);letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-mute);font-style:normal}
.chips{display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;margin-top:var(--s3)}
.chip{font:500 .5rem/1 var(--f-engrave);letter-spacing:.2em;text-transform:uppercase;
  padding:.65em 1em;border:1px solid var(--card-line);border-radius:100px;color:var(--ink-soft)}
.lb__actions{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-top:var(--s3);width:100%}
.lb__actions .btn{flex:1 1 auto;min-height:46px;font-size:.55rem}
.lb__close{position:absolute;top:max(.7rem,env(safe-area-inset-top));right:.7rem;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;cursor:pointer;
  background:rgba(10,14,30,.7);border:1px solid var(--gold-line);color:var(--gold-lite)}
.lb__turn{margin-top:.9rem;text-align:center;font:500 .55rem/1 var(--f-engrave);
  letter-spacing:.26em;text-transform:uppercase;color:rgba(244,241,234,.55)}

/* ── 17. LOCATION — see section 26, THE PLACE ──────────────────────── */

/* the journey: three badges joined by a gold thread that draws itself */
.journey{position:relative;margin-top:var(--s5)}
.journey__line{position:absolute;left:8%;right:8%;top:clamp(26px,7vw,34px);height:2px;overflow:visible}
.journey__line path{fill:none;stroke:var(--gold-line);stroke-width:1.4;stroke-dasharray:5 7}
.journey__line .lit{stroke:var(--accent);stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
  transition:stroke-dashoffset 2.2s var(--ease) .2s;filter:drop-shadow(0 0 5px var(--accent))}
.journey.in .journey__line .lit{stroke-dashoffset:0}
.badges{position:relative;z-index:1;display:grid;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:.4rem;max-width:520px;margin-inline:auto}
/* a single badge stands alone, so the connecting thread is hidden */
.journey:has(.badge:only-child) .journey__line{display:none}
.badge{display:grid;justify-items:center;gap:.35rem;text-align:center;min-width:0}
.badge > *{max-width:100%;overflow-wrap:break-word}
.badge__ring{width:clamp(52px,14vw,68px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--gold-line);color:var(--accent);
  background:radial-gradient(circle at 40% 32%,rgba(255,246,224,.12),transparent 70%),
    color-mix(in srgb,var(--m-bg1) 88%,transparent);
  box-shadow:inset 0 0 14px rgba(217,177,104,.18);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)}
.journey.in .badge__ring{animation:badgein .9s var(--ease) both}
.badge:nth-child(2) .badge__ring{animation-delay:.14s}
.badge:nth-child(3) .badge__ring{animation-delay:.28s}
@keyframes badgein{from{transform:scale(.6) rotate(-20deg);opacity:0}to{transform:none;opacity:1}}
.badge__ring svg{width:46%;height:46%}
.badge__val{font:300 clamp(.9rem,3.3vw,1.12rem)/1.25 var(--f-display);color:var(--ink);text-wrap:balance}
.badge__lab{font:500 clamp(.44rem,1.5vw,.5rem)/1.5 var(--f-engrave);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);text-wrap:balance}
.badge__sub{font:300 clamp(.6rem,2.1vw,.68rem)/1.3 var(--f-body);color:var(--ink-mute)}

/* the map, warmed to match the night */
.map{position:relative;margin-top:var(--s5);overflow:hidden;aspect-ratio:4/3.2;
  border:1px solid var(--card-line);background:#080F1E;border-radius:4px}
@media(min-width:760px){.map{aspect-ratio:16/8}}
.map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  box-shadow:inset 0 0 60px 12px rgba(4,9,18,.7)}
.map iframe{width:100%;height:100%;border:0;filter:saturate(.5) brightness(.72) contrast(1.08) sepia(.24)}
.map__drawn{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:.6rem;
  text-align:center;padding:var(--s4) var(--s3)}
.map__drawn > svg.streets{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.map__pin{position:relative;width:34px;height:34px;color:var(--accent)}
.map__pin svg{width:100%;height:100%;filter:drop-shadow(0 0 10px rgba(255,157,77,.8))}
.map__pin::before{content:"";position:absolute;left:50%;top:64%;translate:-50% -50%;
  width:64px;height:64px;border-radius:50%;border:1px solid var(--accent);
  animation:pinpulse 2.8s var(--ease-soft) infinite}
@keyframes pinpulse{0%{opacity:.75;transform:translate(-50%,-50%) scale(.3)}
  70%,100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.map__label{position:relative;font:400 .62rem/1.6 var(--f-engrave);letter-spacing:.3em;
  text-indent:.3em;text-transform:uppercase;color:var(--ink-soft)}

.contacts{display:grid;gap:var(--s2);margin-top:var(--s5)}
@media(min-width:600px){.contacts{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}}
.contact{padding:var(--s3);text-align:center}
.contact b{display:block;font:400 var(--t-lg)/1.3 var(--f-display)}
.contact span{display:block;font-size:var(--t-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-mute);margin-block:.35em .6em}
.contact a{text-decoration:none;color:var(--accent);border-bottom:1px solid var(--gold-line);padding-bottom:2px}

/* ── 18. BLESSINGS + RSVP FORMS ───────────────────────────────────────── */
.formcard{padding:var(--s5) clamp(1.1rem,4.5vw,2.6rem);max-width:620px;margin-inline:auto;text-align:left}
.field{display:grid;gap:.5rem;margin-bottom:var(--s3)}
.field > label,.field > span{font:500 .55rem/1.6 var(--f-engrave);letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute)}
.field input,.field select,.field textarea{
  width:100%;min-height:52px;padding:.85rem .95rem;border-radius:2px;
  background:rgba(255,255,255,.05);color:var(--ink);border:1px solid var(--card-line);
  font-size:16px;font-weight:300;transition:border-color .4s var(--ease),background .4s var(--ease)}
.field textarea{min-height:126px;resize:vertical;line-height:1.65}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}
.field :is(input,select,textarea):focus{border-color:var(--gold);background:rgba(255,255,255,.08);outline:none}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 24px,calc(100% - 14px) 24px;background-size:6px 6px;background-repeat:no-repeat}
.field select option{background:#101632;color:#F4F1EA}
.radios{display:flex;gap:.5rem;flex-wrap:wrap}
.radios label{flex:1 1 140px;position:relative}
.radios input{position:absolute;opacity:0;width:0;height:0}
.radios span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 .8rem;cursor:pointer;
  border:1px solid var(--card-line);border-radius:2px;text-align:center;
  font:500 .55rem/1.3 var(--f-engrave);letter-spacing:.18em;text-transform:uppercase;transition:all .4s var(--ease)}
.radios input:checked + span{border-color:var(--gold);background:rgba(217,177,104,.14);color:var(--gold-lite)}
.radios input:focus-visible + span{outline:2px solid var(--gold-lite);outline-offset:2px}
.prompts{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:var(--s3)}
.prompt{font:300 var(--t-xs)/1.5 var(--f-body);letter-spacing:.02em;text-transform:none;
  padding:.68em 1.15em;border:1px solid var(--gold-line);border-radius:100px;color:var(--ink-soft);
  background:linear-gradient(180deg,rgba(217,177,104,.09),rgba(217,177,104,.02));
  cursor:pointer;text-align:left;transition:all .35s var(--ease);
  -webkit-tap-highlight-color:transparent}
.prompt:hover,.prompt:focus-visible{border-color:var(--gold);color:var(--gold-lite);
  background:linear-gradient(180deg,rgba(217,177,104,.2),rgba(217,177,104,.07));
  box-shadow:0 6px 18px -10px rgba(217,177,104,.7)}
.prompt:active{transform:scale(.98)}
.done{margin-top:var(--s3);text-align:center;font:300 var(--t-lg)/1.5 var(--f-display);color:var(--accent);min-height:1.6em}

/* ── 19. GALLERY ──────────────────────────────────────────────────────── */
.gallery{display:grid;gap:.6rem;grid-template-columns:repeat(2,1fr);margin-top:var(--s5)}
@media(min-width:760px){.gallery{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}}
.gallery figure{overflow:hidden;aspect-ratio:3/4;border:1px solid var(--card-line);border-radius:2px}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease);filter:saturate(.92)}
.gallery figure:hover img{transform:scale(1.06)}

/* ── 20. NAV RAIL + MUSIC ─────────────────────────────────────────────── */
.rail{position:fixed;right:14px;top:50%;translate:0 -50%;z-index:40;display:none;gap:.85rem}
@media(min-width:900px){.rail{display:grid}}
.rail a{width:22px;height:22px;display:grid;place-items:center;position:relative}
.rail i{width:6px;height:6px;rotate:45deg;border:1px solid var(--gold-line);transition:all .45s var(--ease)}
.rail a[aria-current="true"] i{background:var(--gold);border-color:var(--gold);scale:1.35;box-shadow:0 0 12px rgba(217,177,104,.7)}
.rail a:hover i{border-color:var(--gold)}

.music{position:fixed;left:14px;bottom:max(14px,env(safe-area-inset-bottom));z-index:40;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--gold-line);color:var(--gold);
  background:radial-gradient(circle at 38% 32%,rgba(246,227,180,.16),transparent 68%),rgba(9,13,28,.68);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:inset 0 0 14px rgba(217,177,104,.2),0 8px 22px -12px rgba(0,0,0,.8);
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease),transform .3s var(--ease);
  -webkit-tap-highlight-color:transparent}
.music:hover{border-color:var(--gold);box-shadow:inset 0 0 16px rgba(217,177,104,.3),0 0 22px -6px rgba(217,177,104,.6)}
.music:active{transform:scale(.94)}
.music .bars{display:flex;gap:2px;align-items:flex-end;height:14px}
.music .bars i{width:2px;height:4px;background:currentColor;border-radius:1px}
.music.nudge{animation:halo 2.4s var(--ease-soft) infinite;border-color:var(--gold)}
.music:not(.on) .bars{opacity:.55}
.music.on .bars i{animation:eq .9s ease-in-out infinite alternate}
.music.on .bars i:nth-child(2){animation-delay:.15s}.music.on .bars i:nth-child(3){animation-delay:.3s}
.music.on .bars i:nth-child(4){animation-delay:.45s}
@keyframes eq{to{height:14px}}

/* ── 21. FOOTER ───────────────────────────────────────────────────────── */
.footer{text-align:center;padding-block:var(--s7) calc(var(--s5) + env(safe-area-inset-bottom))}
.footer__line{font:400 var(--t-xl)/1.3 var(--f-engrave);letter-spacing:.2em;color:var(--gold-lite)}
.footer__date{font:italic 300 var(--t-lg)/1.5 var(--f-display);color:var(--ink-soft);margin-top:.4em}
.footer__closing{font-family:var(--f-script);font-size:1.45rem;color:var(--accent);margin-top:var(--s3)}
.footer__mark{margin-top:var(--s3);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-mute)}

/* ── 22. MOTION PREFERENCES ───────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rise,.turn > *,.chapter__inner{opacity:1 !important;transform:none !important}
  .ltr{opacity:1 !important;transform:none !important}
  #dust{display:none}
}
body.calm #dust,body.calm .confetti,body.calm .beam{display:none}
body.calm .rise,body.calm .turn > *,body.calm .chapter__inner{opacity:1;transform:none}
body.calm *{animation:none !important}

@media print{.rail,.music,.pre,.cue,#dust,.lb{display:none !important}}

/* ═══════════════════════════════════════════════════════════════════════
   23. LANTERN THEME — legibility pass over the night sky
   Text on this background needs a little lift, or it sinks into it.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --ink:#FFF3E4;
  --ink-soft:rgba(255,238,220,.86);
  --ink-mute:rgba(255,231,206,.66);
}
[data-theme="reception"]{
  --ink:#FFF3E4;--ink-soft:rgba(255,238,220,.86);--ink-mute:rgba(255,231,206,.66);
}
/* everything that sits over the sky gets a soft shadow so it separates */
.display,.lede,.eyebrow,.hero__meta,.hero__script,.invite p,.fam__names,.fam__sur,
.chapter__title,.evt__name,.evt__when,.venue__name,.venue__addr,.footer__line,
.footer__date,.footer__closing,.cd b,.map__label{
  text-shadow:0 1px 3px rgba(3,7,15,.6),0 2px 18px rgba(3,7,15,.45);
}
.lede,.muted,.evt__note,.evt__where,.field > label,.field > span,.badge__lab{
  color:var(--ink-soft);
}
.muted{color:var(--ink-mute)}
/* the big section titles carry the lantern light */
.display{
  font-family:var(--f-engrave);font-weight:400;letter-spacing:.03em;
  color:var(--gold-lite);
}
.display em{font-style:normal;color:var(--accent)}
.eyebrow{color:var(--accent);opacity:.95}
/* form fields read clearly against the dark */
.field input,.field select,.field textarea{
  background:rgba(10,18,32,.5);border-color:rgba(255,206,142,.28);color:#FFF3E4;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,231,206,.46)}
.field :is(input,select,textarea):focus{background:rgba(10,18,32,.66);border-color:var(--accent)}
/* the panels behind text get a touch more body */
.leaf,.glass,.contact{background:
  radial-gradient(120% 90% at 50% 0%,rgba(255,157,77,.1),transparent 62%),
  rgba(9,17,31,.42)}
.invocation{color:var(--accent)}
.invite p{color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   24. TYPE REPAIR
   Italiana is a hairline display face. It holds up at large sizes and falls
   apart small — which is where it had been used for nearly every label.
   Hard rule from here on: Italiana only at 18px and above. Everything
   smaller is Jost or Marcellus, heavier, tighter and brighter.
   ═══════════════════════════════════════════════════════════════════════ */

/* — the line beneath the names — */
.hero__meta{display:flex;flex-direction:column;align-items:center;gap:.3em;
  margin-top:var(--s4);font-family:var(--f-display);text-transform:none;letter-spacing:.08em}
.hero__meta span{display:block;font:400 clamp(1rem,.88rem + .62vw,1.28rem)/1.5 var(--f-display);
  color:#FFF0DC;text-shadow:0 1px 3px rgba(3,7,15,.8),0 2px 20px rgba(3,7,15,.6)}
.hero__meta span:first-child{font-size:clamp(.82rem,2.9vw,.96rem);letter-spacing:.26em;
  text-transform:uppercase;color:var(--accent)}
.hero__meta span:nth-child(2){font-size:clamp(1.3rem,1.05rem + 1.3vw,1.9rem);
  color:var(--gold-lite);letter-spacing:.05em;margin-block:.06em}
@media(min-width:760px){
  .hero__meta{flex-direction:column;gap:.3em}
  .hero__meta span+span::before{content:none}
}

/* — the countdown labels — */
.cd span{font:400 clamp(.7rem,2.5vw,.8rem)/1 var(--f-body);letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,231,206,.8);margin-top:.65em}
.cd b{font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem)}

/* — the families block — */
.fam__label{font:500 clamp(.8rem,2.9vw,.9rem)/1.5 var(--f-body);letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);opacity:.95}
.fam__names{font-size:clamp(1.25rem,1.05rem + .95vw,1.6rem);color:#FFF3E4}
.fam__sur{font-size:clamp(1.6rem,1.3rem + 1.2vw,2rem)}
.fam__child{font:400 clamp(.95rem,3.3vw,1.08rem)/1.5 var(--f-display);letter-spacing:.07em;
  text-transform:none;color:#FFE7CA;margin-top:.8em}

/* — every remaining micro-label moves off Italiana — */
.eyebrow,.chip,.evt__dress,.field > label,.field > span,.footer__mark,.map__label,
.badge__lab,.lb__eyebrow,.invocation__roman,.scratch__label,.scratch__note,.prompt,
.cue__word,.contact span,.landmark dt{
  font-family:var(--f-body);
}
.eyebrow{font-size:clamp(.78rem,2.8vw,.88rem);font-weight:500;letter-spacing:.22em;
  color:var(--accent);opacity:1}
.chip{font-size:.76rem;font-weight:400;letter-spacing:.1em;padding:.7em 1.15em;
  color:rgba(255,238,220,.9)}
.evt__when{font-family:var(--f-body);font-size:clamp(.86rem,3vw,.96rem);font-weight:500;
  letter-spacing:.14em;text-indent:.14em;color:#FFF0DC}
.evt__time{font-size:clamp(1.05rem,3.6vw,1.2rem);color:#FFE9CE;font-weight:400}
.evt__where{font-size:clamp(.9rem,3.1vw,1rem);color:rgba(255,238,220,.86)}
.evt__dress{font-size:clamp(.78rem,2.7vw,.86rem);font-weight:400;letter-spacing:.12em;
  text-indent:.12em;color:rgba(255,224,190,.78)}
.evt__note{font-size:clamp(.92rem,3.2vw,1rem);color:rgba(255,238,220,.8)}
.evt__tag{font-size:clamp(1.3rem,1.1rem + 1vw,1.7rem)}
.footer__mark{font-family:var(--f-body);font-size:.8rem;letter-spacing:.14em;
  color:rgba(255,231,206,.72)}
.contact span{font-size:.8rem;letter-spacing:.13em;color:var(--accent);opacity:.9}
.contact b{font-size:clamp(1.15rem,4vw,1.3rem)}
.contact a{font-size:1.05rem}
.invocation__roman{font-size:.82rem;font-weight:400;letter-spacing:.16em;text-indent:.16em;
  color:rgba(255,231,206,.72)}
.scratch__label{font-size:.82rem;font-weight:500;letter-spacing:.2em;text-indent:.2em}
.scratch__note{font-size:.86rem;letter-spacing:.06em;text-transform:none;
  color:rgba(255,238,220,.82)}
.scratch__hint{font-family:var(--f-body);font-size:clamp(.9rem,3.1vw,1rem);
  letter-spacing:.08em;text-transform:none;color:rgba(255,238,220,.82)}
.scratch__mid{font-size:clamp(1rem,.85rem + .9vw,1.35rem);letter-spacing:.2em;text-indent:.2em}
.families__lock p{font-family:var(--f-body);font-size:.92rem;letter-spacing:.1em;
  text-transform:none;color:var(--gold-lite)}
.cue__word{font-size:clamp(.8rem,2.9vw,.9rem);font-weight:500;letter-spacing:.3em;
  text-indent:.3em}
.lede{font-size:clamp(1.02rem,.96rem + .4vw,1.2rem);color:rgba(255,240,222,.88)}
.muted{font-size:clamp(.9rem,3.1vw,.98rem);color:rgba(255,231,206,.76)}
.invite p{font-size:clamp(1.12rem,1rem + .7vw,1.4rem)}
.invite .sig{font-size:clamp(1.7rem,1.4rem + 1.4vw,2.4rem)}
.footer__date{font-size:clamp(1.15rem,4vw,1.4rem)}
.footer__closing{font-size:clamp(1.6rem,1.35rem + 1.1vw,2.1rem)}

/* — buttons read as words, not whispers — */
.btn{font-family:var(--f-body);font-weight:500;font-size:clamp(.82rem,2.9vw,.92rem);
  letter-spacing:.16em;text-indent:.16em;min-height:56px}

/* ═══════════════════════════════════════════════════════════════════════
   25. THE WISH — write it on the paper, then send it up
   ═══════════════════════════════════════════════════════════════════════ */
.wish{position:relative;max-width:540px;margin:var(--s6) auto 0;
  display:grid;justify-items:center;
  transition:transform 1.6s cubic-bezier(.35,0,.2,1),opacity 1.6s var(--ease)}
.wish.sent{transform:translateY(-52vh) scale(.7);opacity:0}

/* the halo the paper sits in */
.wish__glow{position:absolute;left:50%;top:44%;translate:-50% -50%;z-index:0;
  width:150%;aspect-ratio:1/1.15;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,157,77,.3),rgba(255,120,40,.08) 54%,transparent 74%);
  animation:lglow 5.5s ease-in-out infinite}

/* the lantern paper itself */
.wish__paper{position:relative;z-index:1;width:100%;
  padding:clamp(2.2rem,8vw,3.2rem) clamp(1.4rem,6vw,2.4rem) clamp(1.9rem,7vw,2.6rem);
  border-radius:clamp(58px,20vw,110px) clamp(58px,20vw,110px) 10px 10px;
  border:1px solid rgba(255,206,142,.34);
  background:
    linear-gradient(178deg,rgba(255,232,196,.14),rgba(255,178,101,.07) 52%,rgba(255,157,77,.05)),
    rgba(12,21,38,.5);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,232,196,.24),0 -14px 60px -26px rgba(255,157,77,.7),
    0 30px 64px -36px rgba(0,0,0,.95)}
/* the paper ribs, like a real lantern */
.wish__paper::before{content:"";position:absolute;inset:14px 0;pointer-events:none;border-radius:inherit;
  background:repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 1px),
    rgba(255,206,142,.11) calc(100%/7 - 1px) calc(100%/7));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}

/* you write on ruled lines, not in boxes */
.wish__line{display:block;position:relative;z-index:1}
.wish__line + .wish__line{margin-top:var(--s4)}
.wish__cap{display:block;font:500 clamp(.8rem,2.9vw,.88rem)/1.5 var(--f-body);
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:.5em}
.wish__line input,.wish__line textarea{
  width:100%;display:block;border:0;border-bottom:1px solid rgba(255,206,142,.34);
  background:transparent;border-radius:0;padding:.55rem .1rem .7rem;
  font:300 17px/1.75 var(--f-body);color:#FFF3E4;letter-spacing:.015em;
  transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.wish__line textarea{resize:vertical;min-height:104px;
  background-image:repeating-linear-gradient(180deg,transparent 0 calc(1.75em - 1px),
    rgba(255,206,142,.16) calc(1.75em - 1px) 1.75em);
  background-attachment:local;border-bottom-color:transparent}
.wish__line :is(input,textarea)::placeholder{color:rgba(255,231,206,.42)}
.wish__line :is(input,textarea):focus{outline:none;border-bottom-color:var(--accent);
  box-shadow:0 2px 14px -6px rgba(255,157,77,.9)}
.wish__line--tall textarea:focus{box-shadow:none}

.wish__prompts{position:relative;z-index:1;margin-top:var(--s4);display:flex;
  flex-wrap:wrap;gap:.45rem;justify-content:center}
.wish__promptcap{flex:1 0 100%;text-align:center;margin-bottom:.2rem;
  font:300 .84rem/1.5 var(--f-body);letter-spacing:.06em;color:rgba(255,231,206,.6)}
.wish__prompt{font:300 .84rem/1.5 var(--f-body);letter-spacing:.02em;text-align:left;
  padding:.6em 1.05em;border-radius:100px;cursor:pointer;color:rgba(255,238,220,.86);
  border:1px solid rgba(255,206,142,.26);background:rgba(255,206,142,.06);
  transition:all .35s var(--ease);-webkit-tap-highlight-color:transparent}
.wish__prompt:hover,.wish__prompt:focus-visible{border-color:var(--accent);color:#FFF3E4;
  background:rgba(255,157,77,.16)}

/* the flame burning at the mouth of the paper */
.wish__flame{position:relative;z-index:2;display:block;width:18px;height:30px;margin-top:-9px;
  border-radius:50% 50% 46% 46%;transform-origin:50% 100%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 78%,#FFF8DC 0%,#FFCB5E 38%,#FF8A3D 70%,rgba(255,120,40,0) 100%);
  box-shadow:0 0 26px 11px rgba(255,157,77,.6);animation:flicker 2.1s ease-in-out infinite}

/* the release */
.wish__send{position:relative;z-index:1;margin-top:var(--s4);display:inline-flex;
  align-items:center;justify-content:center;gap:.75em;cursor:pointer;
  min-height:60px;padding:0 2.4em;border-radius:100px;border:1px solid rgba(255,232,196,.5);
  font:500 clamp(.86rem,3vw,.96rem)/1 var(--f-body);letter-spacing:.17em;text-indent:.17em;
  color:#33200A;background:linear-gradient(150deg,#FFE9C4 0%,#F5B45C 46%,#E08B2E 74%,#C2701F 100%);
  box-shadow:0 14px 34px -14px rgba(255,157,77,.85),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease),box-shadow .4s var(--ease)}
.wish__send:hover{transform:translateY(-2px);box-shadow:0 18px 40px -14px rgba(255,157,77,1),
  inset 0 1px 0 rgba(255,255,255,.7)}
.wish__send:active{transform:scale(.975)}
.wish__lant{width:20px;height:20px;flex:none}
/* a sheen that drifts across the gold */
.wish__sendglow{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.6) 50%,transparent 66%);
  transform:translateX(-120%);animation:sheen 4.5s var(--ease-soft) infinite}
@keyframes sheen{0%,62%{transform:translateX(-120%)}88%,100%{transform:translateX(120%)}}

.wish .done{margin-top:var(--s3);font-size:clamp(1rem,3.4vw,1.15rem)}
@media (prefers-reduced-motion:reduce){
  .wish__glow,.wish__flame,.wish__sendglow{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   26. THE PLACE — a lantern-lit card for the venue
   ═══════════════════════════════════════════════════════════════════════ */
.place{position:relative;margin-top:var(--s5);border-radius:6px;overflow:hidden;
  border:1px solid rgba(255,206,142,.26);
  box-shadow:0 30px 70px -38px rgba(0,0,0,.95)}
/* a warm horizon glowing up from the foot of the card */
.place__sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 62% at 50% 118%,rgba(255,157,77,.42),rgba(255,120,40,.12) 46%,transparent 72%),
    linear-gradient(178deg,rgba(9,17,31,.72),rgba(12,24,46,.6))}
/* a scattering of far-off lanterns inside the card */
.place__sky::after{content:"";position:absolute;inset:0;opacity:.55;
  background-image:
    radial-gradient(2.5px 3.5px at 14% 74%,rgba(255,190,120,.9),transparent),
    radial-gradient(2px 3px at 32% 58%,rgba(255,200,140,.75),transparent),
    radial-gradient(3px 4px at 58% 80%,rgba(255,180,110,.85),transparent),
    radial-gradient(2px 3px at 76% 62%,rgba(255,205,150,.7),transparent),
    radial-gradient(2.5px 3.5px at 88% 84%,rgba(255,190,120,.8),transparent),
    radial-gradient(1.6px 2.4px at 46% 90%,rgba(255,210,160,.6),transparent);
  animation:lglow 6s ease-in-out infinite}

.place__body{position:relative;z-index:1;text-align:center;
  padding:clamp(2.8rem,10vw,4rem) clamp(1.5rem,7vw,3rem) clamp(2.4rem,9vw,3.4rem)}
.place__pin{display:block;width:clamp(30px,8vw,38px);margin:0 auto var(--s3);color:var(--accent)}
.place__pin svg{width:100%;height:auto;filter:drop-shadow(0 0 12px rgba(255,157,77,.85))}
.place__name{font:400 clamp(1.6rem,1.25rem + 2vw,2.7rem)/1.24 var(--f-engrave);
  letter-spacing:.04em;color:var(--gold-lite);text-wrap:balance;
  text-shadow:0 2px 20px rgba(255,157,77,.35),0 1px 3px rgba(3,7,15,.8)}
/* a hairline rule with a lantern bead at its centre */
.place__rule{display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:var(--s3) auto;width:min(240px,72%)}
.place__rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(255,206,142,.5))}
.place__rule i:last-child{background:linear-gradient(270deg,transparent,rgba(255,206,142,.5))}
.place__rule b{width:7px;height:10px;border-radius:46% 46% 50% 50%;background:var(--accent);
  box-shadow:0 0 12px rgba(255,157,77,.9);animation:lglow 3.4s ease-in-out infinite}
.place__addr{white-space:pre-line;font:300 clamp(1.02rem,3.5vw,1.18rem)/1.85 var(--f-body);
  letter-spacing:.02em;color:#FFEEDA;max-width:32ch;margin-inline:auto}
.place__note{margin-top:1.1em;font:300 clamp(.9rem,3.1vw,.98rem)/1.7 var(--f-body);
  color:rgba(255,231,206,.72);max-width:34ch;margin-inline:auto}

.place__actions{margin-top:var(--s4);display:flex;flex-direction:column;align-items:center;gap:.8rem}
@media(min-width:560px){.place__actions{flex-direction:row;justify-content:center}}
/* the directions button: a lit gold plate */
.place__go{display:inline-flex;align-items:center;justify-content:center;gap:.7em;
  min-height:60px;padding:0 2.3em;border-radius:100px;text-decoration:none;
  font:500 clamp(.86rem,3vw,.96rem)/1 var(--f-body);letter-spacing:.17em;text-indent:.17em;
  color:#33200A;border:1px solid rgba(255,232,196,.5);
  background:linear-gradient(150deg,#FFE9C4 0%,#F5B45C 46%,#E08B2E 74%,#C2701F 100%);
  box-shadow:0 14px 34px -14px rgba(255,157,77,.9),inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .3s var(--ease),box-shadow .4s var(--ease);
  -webkit-tap-highlight-color:transparent}
.place__go svg{width:19px;height:19px;flex:none}
.place__go:hover{transform:translateY(-2px);box-shadow:0 20px 42px -14px rgba(255,157,77,1),
  inset 0 1px 0 rgba(255,255,255,.75)}
.place__go:active{transform:scale(.975)}
.place__stay{display:inline-flex;align-items:center;justify-content:center;min-height:60px;
  padding:0 2em;border-radius:100px;text-decoration:none;
  font:400 clamp(.84rem,2.9vw,.92rem)/1 var(--f-body);letter-spacing:.15em;text-indent:.15em;
  color:var(--gold-lite);border:1px solid rgba(255,206,142,.4);background:rgba(255,206,142,.07);
  transition:all .35s var(--ease)}
.place__stay:hover{border-color:var(--accent);background:rgba(255,157,77,.16);color:#FFF3E4}
@media (prefers-reduced-motion:reduce){.place__sky::after,.place__rule b{animation:none}}
/* .invite p is more specific than .eyebrow, so the eyebrow inside the
   invitation panel needs its own rule to keep the label styling */
.invite .eyebrow{font:500 clamp(.78rem,2.8vw,.88rem)/1.5 var(--f-body);
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════
   27. THE TWO OF US — photographs hung in the lantern light
   ═══════════════════════════════════════════════════════════════════════ */
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,3vw,1.1rem);
  margin-top:var(--s5)}
@media(min-width:900px){.gallery{grid-template-columns:repeat(4,1fr);gap:1.1rem}}

.gallery figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;border-radius:4px;
  border:1px solid rgba(255,206,142,.28);
  box-shadow:0 20px 44px -26px rgba(0,0,0,.95);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease),border-color .7s var(--ease)}
/* they hang at slight, alternating angles, like prints pegged on a line */
.gallery figure:nth-child(odd){transform:rotate(-1.1deg)}
.gallery figure:nth-child(even){transform:rotate(1.1deg)}
@media(min-width:900px){
  .gallery figure:nth-child(4n+1){transform:rotate(-1.4deg) translateY(6px)}
  .gallery figure:nth-child(4n+2){transform:rotate(1deg) translateY(-6px)}
  .gallery figure:nth-child(4n+3){transform:rotate(-.7deg) translateY(4px)}
  .gallery figure:nth-child(4n){transform:rotate(1.4deg) translateY(-4px)}
}
.gallery figure:hover,.gallery figure:focus-within{transform:rotate(0) translateY(-6px) scale(1.02);
  border-color:var(--accent);box-shadow:0 28px 56px -22px rgba(0,0,0,1),0 0 34px -8px rgba(255,157,77,.55)}

.gallery img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.9) contrast(1.03) brightness(.96);
  transition:transform 1.4s var(--ease),filter .7s var(--ease)}
.gallery figure:hover img{transform:scale(1.06);filter:saturate(1) contrast(1.05) brightness(1.02)}
/* the night warms the edges of every print so they belong to the sky */
.gallery figure::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 108%,rgba(255,157,77,.26),transparent 62%),
    linear-gradient(180deg,rgba(6,12,24,.22) 0%,transparent 32%,rgba(6,12,24,.34) 100%);
  mix-blend-mode:screen;opacity:.85}
/* a small gold peg at the top of each print */
.gallery figure::before{content:"";position:absolute;top:-1px;left:50%;translate:-50% 0;z-index:2;
  width:22px;height:3px;border-radius:0 0 3px 3px;background:linear-gradient(180deg,#FFE0AE,#C2701F);
  box-shadow:0 1px 8px rgba(255,157,77,.85)}
@media (prefers-reduced-motion:reduce){
  .gallery figure,.gallery img{transition:none}
  .gallery figure:nth-child(n){transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   28. A BRIGHTER NIGHT
   The sky was reading too dark on real screens. This lifts the whole page
   without losing the night: less scrim over the video, a warmer ambient
   wash, and lighter panels underneath the text.
   ═══════════════════════════════════════════════════════════════════════ */
.hero__film::after{
  background:
    radial-gradient(104% 66% at 50% 42%,rgba(6,12,26,0) 0%,rgba(6,12,26,.24) 62%,rgba(6,12,26,.6) 100%),
    linear-gradient(180deg,rgba(6,12,26,.3) 0%,rgba(6,12,26,0) 26%,rgba(6,12,26,.04) 56%,
      rgba(8,15,32,.58) 88%,var(--m-bg1) 100%);
  opacity:calc(.36 + var(--dark,.06));
}
.hero__film video,.hero__film img{filter:brightness(1.12) saturate(1.08)}

/* the ambient wash carries more warmth across every section */
.bg::after{
  background:
    radial-gradient(42% 34% at 22% 24%,color-mix(in srgb,var(--m-glow) 22%,transparent),transparent 70%),
    radial-gradient(38% 30% at 78% 68%,color-mix(in srgb,var(--m-glow) 16%,transparent),transparent 70%);
}

/* panels sit lighter on the sky so their text lifts off it */
.leaf,.glass,.contact,.place,.wish__paper{
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,176,92,.16),transparent 62%),
    rgba(26,40,68,.5);
}
.field input,.field select,.field textarea{background:rgba(26,40,68,.62)}

/* brighter ink throughout */
:root,[data-theme="reception"]{
  --ink:#FFF8EE;
  --ink-soft:rgba(255,246,234,.92);
  --ink-mute:rgba(255,240,222,.76);
}
.lede{color:rgba(255,248,238,.94)}
.muted{color:rgba(255,240,222,.84)}
.evt__note,.evt__where{color:rgba(255,246,234,.9)}
.place__addr{color:#FFF8EE}

/* ═══════════════════════════════════════════════════════════════════════
   29. THE WISH — a box that looks like a box
   The ruled writing lines and the paper ribs read as clutter, and the
   underline-only fields did not look typeable. Both are gone.
   ═══════════════════════════════════════════════════════════════════════ */
.wish__paper::before{display:none}          /* the paper ribs */

.wish__line input,.wish__line textarea{
  border:1px solid rgba(255,206,142,.42);
  border-radius:6px;
  background:rgba(10,20,40,.66);
  background-image:none;                     /* the ruled lines */
  padding:.95rem 1.05rem;
  font:300 17px/1.7 var(--f-body);
  color:#FFF8EE;
  box-shadow:inset 0 2px 10px rgba(0,0,0,.32);
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
.wish__line textarea{
  min-height:132px;resize:vertical;
  background-image:none;background-attachment:scroll;
  border-bottom-color:rgba(255,206,142,.42);
}
.wish__line :is(input,textarea)::placeholder{color:rgba(255,240,222,.5)}
.wish__line :is(input,textarea):hover{border-color:rgba(255,206,142,.62)}
.wish__line :is(input,textarea):focus{
  outline:none;
  border-color:var(--accent);
  background:rgba(14,26,50,.8);
  box-shadow:inset 0 2px 10px rgba(0,0,0,.28),0 0 0 3px rgba(232,151,58,.22);
}
/* a small caret hint so it reads as an input at a glance */
.wish__line{position:relative}
.wish__cap{color:var(--gold-lite);opacity:.95}

/* ═══════════════════════════════════════════════════════════════════════
   30. THE INVITATION CARD
   This should read as a physical wedding card, not a translucent panel.
   So: ivory paper, dark ink, a gold double rule, and a warm shadow — a
   real card resting on the night sky.
   ═══════════════════════════════════════════════════════════════════════ */
.leaf.invite{
  --ink-card:#3A2A16;
  position:relative;
  padding:clamp(2.9rem,10vw,4.4rem) clamp(1.7rem,7vw,3.4rem) clamp(2.4rem,9vw,3.4rem);
  border:0;border-radius:3px;
  background:
    radial-gradient(120% 78% at 50% 0%,rgba(255,224,174,.5),transparent 58%),
    linear-gradient(176deg,#FDF7EA 0%,#F7EEDB 46%,#F1E4CB 100%);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:
    0 2px 0 rgba(255,255,255,.7) inset,
    0 26px 60px -26px rgba(0,0,0,.85),
    0 0 46px -10px rgba(255,157,77,.4);
}
/* the double gold rule printed inside the edge */
.leaf.invite::before{
  content:"";position:absolute;inset:11px;pointer-events:none;
  border:1px solid rgba(160,110,40,.55);border-radius:2px;
}
.leaf.invite::after{
  content:"";position:absolute;inset:17px;pointer-events:none;
  border:1px solid rgba(160,110,40,.24);border-radius:1px;
}

/* dark ink on ivory, the way it is actually printed */
.leaf.invite .invocation{
  color:#8A5A1C;
  font-size:clamp(1.15rem,4vw,1.5rem);
}
.leaf.invite .invocation__roman{
  color:rgba(58,42,22,.62);letter-spacing:.2em;text-indent:.2em;
}
.leaf.invite .eyebrow{
  color:#9A6520;justify-content:center;
}
.leaf.invite .eyebrow::before,.leaf.invite .eyebrow::after{
  background:linear-gradient(90deg,transparent,rgba(160,110,40,.5));
}
.leaf.invite .eyebrow::after{background:linear-gradient(270deg,transparent,rgba(160,110,40,.5))}
.leaf.invite p{
  color:var(--ink-card);
  text-shadow:none;
  font-size:clamp(1.14rem,1rem + .75vw,1.45rem);
  line-height:1.9;
}
.leaf.invite .sig{
  color:#9A6520;
  font-size:clamp(1.8rem,1.45rem + 1.5vw,2.5rem);
}
/* the flourish and paisley corners switch to printed gold */
.leaf.invite .flourish path,.leaf.invite .flourish line{stroke:#A06E28}
.leaf.invite .flourish .gem{fill:#A06E28}
.leaf.invite .corners{color:#A06E28}
.leaf.invite .paisley{opacity:.62}

/* the toran garland above it keeps its own colour, but sits clear of the card */
#invitation .toran{opacity:.95}

/* ═══════════════════════════════════════════════════════════════════════
   31. THE OPENING — dissolving the film into the invitation
   The clip ends on a sky full of lanterns, and the invitation opens on a
   sky full of lanterns. So the two are cross-dissolved and pushed gently
   upward together, as though we simply drifted up with them. A white
   burst would have announced "the video finished"; this does not.
   ═══════════════════════════════════════════════════════════════════════ */
.gate{transition:opacity 1.5s cubic-bezier(.4,0,.2,1),visibility 1.5s}
.gate__vid{transition:transform 2.6s cubic-bezier(.3,0,.2,1),filter 1.4s var(--ease)}
.gate.bloom .gate__vid{transform:scale(1.14) translateY(-3%);filter:brightness(1.14) saturate(1.05)}
.gate.bloom .gate__scrim{opacity:0;transition:opacity 1.1s var(--ease)}

/* the burst is now only a soft warm veil, the colour of the lantern paper */
.gate__bloom{top:52%;width:40vmax;
  background:radial-gradient(circle,rgba(255,244,222,.5) 0%,rgba(255,214,150,.28) 38%,rgba(255,180,110,0) 72%)}
.gate.bloom .gate__bloom{animation:veil 1.6s cubic-bezier(.4,0,.2,1) forwards}
@keyframes veil{0%{opacity:0;transform:scale(.7)}45%{opacity:.85}100%{opacity:0;transform:scale(3.4)}}

/* the invitation rises into place rather than cutting in */
body.emerging #app,body.emerging .bg{animation:emerge 1.9s cubic-bezier(.3,0,.2,1) both}
@keyframes emerge{from{opacity:0;transform:scale(1.07) translateY(2.5%)}to{opacity:1;transform:none}}

/* ── the gate's own type, tuned to this film ──────────────────────────── */
.gate__scrim{
  background:linear-gradient(180deg,
    rgba(10,14,30,.34) 0%,transparent 20%,transparent 40%,
    rgba(12,10,22,.62) 72%,rgba(8,6,16,.93) 100%);
}
.gate__ui{gap:.5rem;padding-bottom:max(clamp(2.4rem,9vh,4.4rem),env(safe-area-inset-bottom))}
.gate__btn-in{
  min-height:60px;padding:0 2.5em;
  font-family:var(--f-body);font-weight:500;
  font-size:clamp(.86rem,3vw,.98rem);letter-spacing:.2em;text-indent:.2em;
  color:#3A2405;
  background:linear-gradient(150deg,#FFF3DC 0%,#FFDCA6 34%,#F0B45C 62%,#D08B34 100%);
  box-shadow:0 14px 34px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.75);
}
.gate__btn::before{background:radial-gradient(closest-side,rgba(255,236,196,.6),transparent 72%)}
.gate__btn::after{border-color:rgba(255,244,222,.7)}
.gate__flourish{margin:.85rem 0 .35rem;width:min(170px,46%)}
.gate__flourish path{stroke:rgba(255,236,200,.8)}
.gate__flourish .g{fill:rgba(255,236,200,.9)}
.gate__names{
  font-family:var(--f-engrave);font-weight:400;letter-spacing:.05em;
  font-size:clamp(2rem,1.4rem + 3.4vw,3.2rem);line-height:1.15;
  background-image:linear-gradient(178deg,#FFFBF0 4%,#FFE7BE 38%,#F3BE72 72%,#C88C38 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 16px rgba(0,0,0,.85));
}
.gate__sub{
  font-family:var(--f-script);text-transform:none;letter-spacing:.02em;
  font-size:clamp(1.4rem,1.1rem + 1.7vw,2.1rem);line-height:1.4;
  color:#FFE9C6;text-shadow:0 2px 14px rgba(0,0,0,.9);margin-top:.1em;
}
@media (prefers-reduced-motion:reduce){
  .gate.bloom .gate__vid{transform:none}
  .gate.bloom .gate__bloom{animation:none;opacity:0}
}

/* ═══════════════════════════════════════════════════════════════════════
   32. THE HANDOVER, REBUILT
   The old version faded the gate out while the site faded in from zero.
   Both sat half-transparent at the same moment, which is exactly what
   made the seam visible. Now the invitation is already there at full
   strength underneath, and only the film dissolves off the top of it.
   ═══════════════════════════════════════════════════════════════════════ */

/* the gate stops being a solid surface the instant the dissolve begins,
   so nothing muddies the sky showing through */
.gate.blend{background:transparent;transition:none}
.gate.blend .gate__vid{
  opacity:0;
  transform:scale(1.16) translateY(-3.5%);
  transition:opacity 1.5s cubic-bezier(.37,0,.24,1),
             transform 2.2s cubic-bezier(.25,0,.15,1),
             filter 1.2s var(--ease);
  filter:brightness(1.18) saturate(1.06);
}
.gate.blend .gate__scrim{opacity:0;transition:opacity .8s var(--ease)}
.gate.blend .gate__ui{opacity:0}

/* a warm bloom the colour of lantern paper, peaking exactly on the
   crossover so the eye has something to follow through the seam */
.gate.blend .gate__bloom{animation:handoverVeil 1.7s cubic-bezier(.37,0,.24,1) forwards}
@keyframes handoverVeil{
  0%{opacity:0;transform:scale(.65)}
  38%{opacity:.6}
  100%{opacity:0;transform:scale(3.6)}
}

/* the sky underneath picks the camera move up where the film left it,
   so the motion never stops — that continuity is what sells the join */
body.arriving .hero__film video,
body.arriving .hero__film img{
  animation:skyArrive 2.2s cubic-bezier(.25,0,.15,1) both;
}
@keyframes skyArrive{
  from{transform:scale(1.15) translateY(2.6%)}
  to{transform:none}
}
/* the names and the date settle in just behind the sky */
body.arriving .hero__inner{animation:heroSettle 1.7s cubic-bezier(.25,0,.15,1) .18s both}
@keyframes heroSettle{
  from{opacity:0;transform:translateY(22px) scale(.985)}
  to{opacity:1;transform:none}
}
/* the scroll cue waits until everything has landed */
body.arriving .cue{animation:cueArrive 1s var(--ease) 1.15s both}
@keyframes cueArrive{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1}}

/* the old whole-page fade is retired — it fought the dissolve */
body.emerging #app,body.emerging .bg{animation:none}

@media (prefers-reduced-motion:reduce){
  .gate.blend .gate__vid{transform:none;transition:opacity .4s linear}
  .gate.blend .gate__bloom{animation:none;opacity:0}
  body.arriving .hero__film video,body.arriving .hero__film img,
  body.arriving .hero__inner,body.arriving .cue{animation:none}
}