/* ============================================================
   Ananya & Chandan — "The Sealed Envelope" invite
   Palette: Rose & Champagne (light) · indigo evening for Reception
   ============================================================ */
:root{
  --gold:#B8933F;--gold2:#E6C98A;--gold3:#FFF6E6;--rose:#D9A7A7;--rose2:#F6E3E3;--ink:#4A2E36;--mauve:#8E5F69;
  --tx:0;--ty:0;
  --serif:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --script:'Great Vibes','Pinyon Script','Snell Roundhand','Apple Chancery','URW Chancery L','Brush Script MT',cursive;
  --display:'Playfair Display',var(--serif);
  --sans:'Jost','Helvetica Neue',Arial,sans-serif;
  --foilA:#6E4F22;--foilB:#B8933F;--foilC:#F1DDA8;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--rose2);font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
a{color:inherit}
.caps{font-family:var(--sans);font-weight:300;letter-spacing:.32em;text-transform:uppercase;font-size:.72rem}
.script{font-family:var(--script);font-weight:400}
.muted{color:var(--muted,var(--mauve))}
.ph{font-style:italic;opacity:.55;border-bottom:1px dashed currentColor}
.px{will-change:transform;transform:translate(calc(var(--tx) * 28px * var(--d,1)),calc(var(--ty) * 28px * var(--d,1)));transition:transform .25s ease-out}
.rv{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.page.active .rv{opacity:1;transform:none}
.page.active .rv:nth-child(1){transition-delay:.1s}.page.active .rv:nth-child(2){transition-delay:.25s}.page.active .rv:nth-child(3){transition-delay:.4s}
.page.active .rv:nth-child(4){transition-delay:.55s}.page.active .rv:nth-child(5){transition-delay:.7s}.page.active .rv:nth-child(6){transition-delay:.85s}.page.active .rv:nth-child(7){transition-delay:1s}.page.active .rv:nth-child(8){transition-delay:1.15s}
.mono{display:block;color:var(--monocol,var(--gold))}
.rule{width:64px;height:1px;background:var(--gold);margin:1.2rem auto;position:relative}
.rule::before,.rule::after{content:'';position:absolute;top:-2px;width:5px;height:5px;background:var(--gold);transform:rotate(45deg)}
.rule::before{left:-10px}.rule::after{right:-10px}
.btns{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}
.btn{font-family:var(--sans);font-weight:400;letter-spacing:.22em;text-transform:uppercase;font-size:.64rem;padding:.78rem 1.3rem;border-radius:999px;border:1px solid var(--gold);color:var(--fg,var(--ink));background:var(--btn,rgba(255,255,255,.6));text-decoration:none;transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.btn.solid{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#4A2E36;border-color:transparent}
.linkbtn{font-family:var(--sans);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7;text-decoration:underline;text-underline-offset:4px}
.card{background:var(--card,rgba(255,255,255,.72));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--cardb,#fff);border-radius:26px;padding:clamp(1rem,3vw,1.8rem) clamp(1.1rem,4.5vw,2.4rem);box-shadow:0 30px 60px -30px rgba(74,46,54,.35);width:100%;max-width:560px;transition:background 1.2s,border-color 1.2s}
.foil{background:linear-gradient(100deg,var(--foilA) 0%,var(--foilB) 30%,var(--foilC) 48%,var(--foilB) 60%,var(--foilA) 100%);background-size:250% 100%;background-position:calc(50% + var(--tx) * 60%) 0;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .25s ease-out}

/* ---------------- scroller & pages ---------------- */
#scroller{position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;scroll-behavior:smooth;scrollbar-width:none;opacity:0;transition:opacity 1s;overscroll-behavior-y:contain}
body.open #scroller{opacity:1}
#scroller::-webkit-scrollbar{display:none}
.page{position:relative;height:100vh;height:100dvh;scroll-snap-align:start;overflow:hidden;color:var(--fg,var(--ink))}
.bg{position:absolute;inset:0;z-index:0;overflow:hidden;background:linear-gradient(180deg,var(--bgA) 0%,var(--bgB) 55%,var(--bgC) 100%);transition:background 1.2s}
.content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:6vh 7vw;max-width:760px;margin:0 auto}
.content>*{flex-shrink:0}
/* very short viewports: let the page grow instead of clipping (mandatory snap still allows scrolling inside a tall snap area) */
@media (max-height:600px){.page{height:auto;min-height:100vh;min-height:100dvh}.content{height:auto;min-height:100vh;min-height:100dvh}}
.glow{position:absolute;left:50%;top:40%;width:80vmin;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.75) 0%,rgba(255,255,255,.25) 35%,rgba(255,255,255,0) 70%)}
.bokeh{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 70%);filter:blur(2px)}
.petals{position:absolute;inset:0;pointer-events:none}
.petal{position:absolute;top:-30px;width:14px;height:20px;background:linear-gradient(160deg,var(--petA,#F7CFD3),var(--petB,#E8A9B0));border-radius:100% 0 100% 0;opacity:.75;animation:fall var(--t,12s) linear infinite var(--dl,0s)}
@keyframes fall{0%{transform:translate(0,-40px) rotate(0)}100%{transform:translate(var(--sw,40px),110vh) rotate(720deg)}}
.stars{position:absolute;inset:-40px}
.star{position:absolute;border-radius:50%;background:#fff;animation:tw var(--t,3s) ease-in-out infinite var(--dl,0s)}
@keyframes tw{0%,100%{opacity:.15}50%{opacity:1}}
.scrollhint{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:3;opacity:.8}
.chev{width:12px;height:12px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(45deg);opacity:.5}50%{transform:translateY(8px) rotate(45deg);opacity:1}}

/* page palettes */
.pg-cover{--bgA:#EBC4C2;--bgB:#F6E3E3;--bgC:#FFF6F3;--muted:#8E5F69;--monocol:#8E6B3A}
.pg-date{--bgA:#FFF6F3;--bgB:#FBEDEA;--bgC:#F6E3E3;--muted:#A07A80;--card:rgba(255,255,255,.7);--cardb:#fff}
.pg-couple{--bgA:#F9E4E6;--bgB:#FBEDEA;--bgC:#FFF8F4;--muted:#A07A80}
.pg-sched{--bgA:#FFF8F2;--bgB:#FBEFE6;--bgC:#F6E3E3;--muted:#A07A80}
.pg-recep{--bgA:#3E2A3A;--bgB:#6E4A5C;--bgC:#B98289;--fg:#FFF4F0;--muted:#F2D4D8;--card:rgba(60,30,40,.4);--cardb:rgba(255,255,255,.25);--btn:rgba(255,255,255,.12);--monocol:#E6C98A}
.pg-muh{--bgA:#F9D9CF;--bgB:#FCE9E1;--bgC:#FFF7F2;--muted:#B07A6A;--card:rgba(255,255,255,.72);--cardb:#fff;--sketch:#B8864F}
.pg-lunch{--bgA:#FBEFD9;--bgB:#FFF4E2;--bgC:#FFFAF2;--muted:#A07A3C;--card:rgba(255,255,255,.74);--cardb:#fff}
.pg-venue{--bgA:#EEF2EC;--bgB:#F6F0EC;--bgC:#FBEDEA;--muted:#7F8E80;--card:rgba(255,255,255,.78);--cardb:#fff;--road:#DCCFCB;--roadM:#D9A7A7}
.pg-travel{--bgA:#FBEDEA;--bgB:#F3ECE6;--bgC:#EEF2EC;--muted:#8E6F75;--road:#DCCFCB;--roadM:#D9A7A7}
.pg-end{--bgA:#5E3C4C;--bgB:#8E6474;--bgC:#B98289;--fg:#FFF8F4;--muted:#F2D4D8;--btn:rgba(255,255,255,.14);--monocol:#E6C98A}
body[data-state=married] .pg-end{--bgA:#F6E3E3;--bgB:#FBEDEA;--bgC:#FFF6F3;--fg:#4A2E36;--muted:#8E5F69;--btn:rgba(255,255,255,.6);--monocol:#8E6B3A}
body[data-state=married] .pg-end .stars{opacity:0}
body[data-state=muh] .pg-date,body[data-state=recep] .pg-date{--bgA:#F8C9B4;--bgB:#FBE3D0;--bgC:#FFF3E6}

/* ---------------- envelope ---------------- */
#envelope{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#EBC4C2,#F6E3E3 55%,#FFF6F3);transition:opacity 1.1s ease .5s,visibility 0s 1.7s}
body.open #envelope{opacity:0;visibility:hidden;pointer-events:none}
.env-bg{position:absolute;inset:0;overflow:hidden}
.mandala{position:absolute;left:50%;top:50%;width:min(135vmin,980px);aspect-ratio:1;translate:-50% -50%;color:#B8933F;opacity:.16;animation:mandalaspin 160s linear infinite}
@keyframes mandalaspin{to{rotate:360deg}}
.corner{position:absolute;width:min(46vw,340px);height:auto;aspect-ratio:200/120;color:#B8933F;opacity:.55}
.corner.tl{left:-4%;top:2%;transform:scaleX(-1) rotate(12deg)}
.corner.br{right:-4%;bottom:2%;transform:rotate(192deg)}
.corner.light{color:#E6C98A;opacity:.5}
.page .corner{opacity:0;transition:opacity 1.6s ease .4s}
.page.active .corner{opacity:.55}
.page.active .corner.light{opacity:.5}
.page .corner use{stroke-dasharray:420;stroke-dashoffset:420;transition:stroke-dashoffset 2.6s ease-out .3s}
.page.active .corner use{stroke-dashoffset:0}
body[data-state=married] .pg-end .corner.light{color:#B8933F}
.dust i{position:absolute;width:3px;height:3px;border-radius:50%;background:#E6C98A;box-shadow:0 0 8px 2px rgba(230,201,138,.7);animation:dust var(--t,9s) ease-in-out infinite var(--dl,0s);opacity:0}
@keyframes dust{0%,100%{opacity:0;transform:translateY(0)}20%{opacity:.9}80%{opacity:.6}100%{transform:translateY(-60px)}}
.env-scene{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:1.3rem;perspective:1400px;width:100%;padding:0 6vw}
.env-kicker{color:#8E5F69;font-size:.62rem}
.rv-env{animation:envin 1.2s ease both .3s}
@keyframes envin{from{opacity:0;transform:translateY(12px)}}
.env{position:relative;width:min(86vw,520px);aspect-ratio:1.5;transform-style:preserve-3d;animation:envfloat 6s ease-in-out infinite, envin 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes envfloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
.env-back{position:absolute;inset:0;border-radius:14px;background:linear-gradient(160deg,#F3D6D6,#E8BFBF);box-shadow:0 40px 80px -30px rgba(74,46,54,.45),0 2px 0 rgba(255,255,255,.6) inset}
.env-liner{position:absolute;inset:3% 3% auto 3%;height:60%;border-radius:10px 10px 0 0;background:#FBEDEA;background-image:radial-gradient(circle at 10px 10px,rgba(184,147,63,.18) 1.2px,transparent 1.6px);background-size:20px 20px;clip-path:polygon(0 0,100% 0,50% 70%)}
.env-card{position:absolute;left:6%;right:6%;bottom:6%;height:92%;background:#FFFBF7;border:1px solid #F0DCDC;border-radius:10px;box-shadow:0 10px 30px -14px rgba(74,46,54,.4);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;transform:translateY(0);transition:transform 1s cubic-bezier(.2,.7,.2,1) .7s,opacity .6s ease 1.5s;z-index:2;color:#4A2E36}
.env-names{font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,4.6vw,2rem);line-height:1.15;margin-top:.3rem}
.env-names .amp,.env-title .amp{font-family:var(--script);font-style:normal;font-size:.8em;color:var(--gold);margin:0 .2em}
.env-front{position:absolute;inset:0;z-index:3;border-radius:14px;background:linear-gradient(165deg,#F8E1E1 0%,#EEC9C9 100%);clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);box-shadow:0 -1px 0 rgba(255,255,255,.7) inset}
.env-front::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 30%);clip-path:polygon(0 0,50% 48%,100% 0)}
.env-front::after{content:'';position:absolute;left:5%;right:5%;bottom:5%;top:52%;border:1px solid rgba(184,147,63,.28);border-radius:6px;pointer-events:none}
.env-to{position:absolute;left:50%;top:76%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.1rem;color:#4A2E36;width:84%}
.env-to .caps{font-size:.52rem;opacity:.6}
.env-guest{font-size:clamp(1.45rem,5vw,2.3rem);line-height:1.2;color:#6B3F4C;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.env-to .underline{display:block;width:0;height:1px;background:var(--gold);margin-top:.15rem;animation:draw 1.2s ease forwards 1.3s}
@keyframes draw{to{width:70%}}
.env-flap{position:absolute;left:0;right:0;top:0;height:52%;z-index:4;background:linear-gradient(180deg,#F0CECE,#E4B7B7);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;border-radius:14px 14px 0 0;transition:transform 1s cubic-bezier(.6,0,.3,1) .35s,z-index 0s .85s;backface-visibility:hidden}
.env-flap::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%)}
.env.open .env-flap{transform:rotateX(-180deg);z-index:1}
.env.open .env-card{transform:translateY(-62%)}
.env.open .env-front{transition:opacity .4s 1.2s}
.env.fly .env-card{transform:translateY(-70%) scale(2.6);opacity:0}
/* seal — burgundy wax with gold rim */
.seal{position:absolute;left:50%;top:50%;width:clamp(68px,15vw,92px);aspect-ratio:1;transform:translate(-50%,-52%);z-index:6;transition:transform .5s,opacity .5s;display:grid;place-items:center;filter:drop-shadow(0 8px 14px rgba(74,20,34,.45))}
.seal-wax{position:absolute;inset:0;border-radius:47% 53% 49% 51%/52% 46% 54% 48%;background:radial-gradient(circle at 36% 30%,#C45B6B 0%,#962F44 38%,#6F1E31 70%,#4F1222 100%);box-shadow:inset 0 3px 5px rgba(255,255,255,.35),inset 0 -6px 10px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.08);display:grid;place-items:center;animation:sealpulse 2.6s ease-in-out infinite}
.seal-rim{position:absolute;inset:11%;border-radius:50%;border:1.5px solid rgba(230,201,138,.85);box-shadow:inset 0 0 0 3px rgba(111,30,49,.9),inset 0 0 0 4px rgba(230,201,138,.45)}
@keyframes sealpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.seal-mono{position:relative;width:52%;height:52%;color:#F1DDA8;opacity:.95;filter:drop-shadow(0 1px 0 rgba(0,0,0,.45))}
.seal-ring{position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(184,147,63,.65);animation:ring 2.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.8);opacity:0}30%{opacity:.8}100%{transform:scale(1.5);opacity:0}}
.seal.crack .seal-wax{animation:crack .55s ease forwards}
.seal.crack .seal-ring{display:none}
@keyframes crack{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.9) rotate(5deg);opacity:1}100%{transform:scale(0) rotate(20deg);opacity:0}}
.seal-sparks{position:absolute;left:50%;top:50%;z-index:7;pointer-events:none}
.seal-sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--gold2);opacity:0}
.env.open .seal-sparks i{animation:spark .9s ease-out forwards}
@keyframes spark{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--sx),var(--sy)) scale(.2);opacity:0}}
.env-under{text-align:center;animation-delay:.7s}
.env-title{font-family:var(--display);font-style:italic;font-size:clamp(1.6rem,5.4vw,2.4rem);color:#5A2F3C;line-height:1.1}
.env-hint{color:#8E5F69;font-size:.6rem;animation:envin 1.2s ease both .9s, hintpulse 2.6s ease-in-out infinite 2s}
@keyframes hintpulse{0%,100%{opacity:.6}50%{opacity:1}}
.env.open ~ .env-hint,.env.open ~ .env-under{opacity:0;transition:opacity .3s}
@media (max-height:700px){.env-scene{gap:.8rem}.env{width:min(80vw,460px)}.env-title{font-size:1.4rem}}

/* ---------------- cover ---------------- */
.pg-cover .content{padding-bottom:12vh}
.blossom{position:absolute;width:min(46vw,360px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(217,167,167,.55) 0%,rgba(217,167,167,.2) 40%,transparent 70%)}
.blossom.l{left:-12%;top:-8%}.blossom.r{right:-14%;bottom:-10%}
.pg-cover .art{position:absolute;right:-2%;bottom:0;height:min(72vh,640px);aspect-ratio:3/4;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 60%,#000 40%,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 50% 60%,#000 40%,transparent 75%);opacity:.95}
.pg-cover .art img{height:100%;width:100%;object-fit:cover;display:block}
@media (max-width:760px){
  .pg-cover .content{justify-content:flex-start;padding-top:max(7vh,40px);padding-bottom:0}
  .pg-cover .art{height:36vh;right:50%;transform:translateX(50%);bottom:0;opacity:.95;-webkit-mask-image:radial-gradient(ellipse 62% 78% at 50% 100%,#000 50%,rgba(0,0,0,.5) 75%,transparent 100%);mask-image:radial-gradient(ellipse 62% 78% at 50% 100%,#000 50%,rgba(0,0,0,.5) 75%,transparent 100%)}
  .pg-cover .art.px{transform:translateX(50%) translate(calc(var(--tx) * 10px),calc(var(--ty) * 10px))}
  .pg-cover .cover-mono{width:88px;margin-bottom:.6rem}
  .pg-cover .scrollhint{bottom:2vh;padding:.45rem .9rem;border-radius:999px;background:rgba(255,251,247,.7);backdrop-filter:blur(6px);color:#6B3F4C}
  .page .corner{width:38vw}.page .corner.br{bottom:-1%;right:-8%}.page .corner.tl{top:0;left:-8%}
}
@media (max-width:760px) and (max-height:700px){.pg-cover .art{height:28vh}.pg-cover .content{padding-top:5vh}}
.cameo{width:clamp(110px,22vw,160px);aspect-ratio:1;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 1px var(--gold),0 24px 50px -24px rgba(74,46,54,.5);margin:1rem auto 0}
.cameo img{width:100%;height:100%;object-fit:cover;object-position:50% 38%;transform:scale(1.35);display:block}
.cover-mono{width:clamp(104px,16vw,150px);margin-bottom:1.1rem;filter:drop-shadow(0 6px 14px rgba(142,107,58,.25))}
.dear{font-size:clamp(1.05rem,3.3vw,1.5rem);font-style:italic;color:var(--muted)}
.dear .guest{display:block;font-family:var(--script);font-style:normal;font-size:clamp(2.2rem,8vw,3.6rem);line-height:1.1;color:#6B3F4C;margin:.1em 0 .25em}
.dear .guest::after{content:'';display:block;width:56px;height:1px;background:var(--gold);margin:.35rem auto 0}
.names{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(1.75rem,6.4vw,4.2rem);line-height:1.15;white-space:nowrap;word-spacing:.08em;margin-top:.6rem;color:#5A2F3C;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.names .ini{letter-spacing:.12em}
.names .amp{display:block;font-family:var(--script);font-style:normal;font-size:.6em;line-height:1.1;margin:.05em 0;color:var(--gold)}

/* ---------------- save the date ---------------- */
.sub{font-style:italic;font-size:clamp(1rem,3vw,1.25rem);color:var(--muted);margin-top:.4rem}
.datecard{position:relative;width:min(100%,460px);margin:1.1rem auto 0;border-radius:22px;background:rgba(255,251,247,.85);border:1px solid #fff;box-shadow:0 30px 60px -30px rgba(74,46,54,.35);padding:1.2rem 1rem 1.1rem;text-align:center;backdrop-filter:blur(10px)}
.datecard::before{content:'';position:absolute;inset:8px;border:1px solid rgba(184,147,63,.35);border-radius:16px;pointer-events:none}
.bigdate{display:flex;align-items:baseline;justify-content:center;gap:.6rem;margin-top:.2rem;line-height:1}
.bigdate .num{font-family:var(--display);font-style:italic;font-size:clamp(3.4rem,13vw,5.2rem);color:#6B3F4C}
.bigdate .amp{font-family:var(--script);font-size:clamp(1.8rem,6vw,2.8rem);color:var(--gold)}
.bigmon{font-family:var(--display);font-style:italic;font-size:clamp(1.15rem,3.8vw,1.5rem);color:#6B3F4C;margin-top:.1rem}
.daylist{display:flex;align-items:stretch;justify-content:center;gap:clamp(.6rem,3vw,1.4rem);margin-top:.8rem;padding-top:.7rem;border-top:1px solid #F0DCDC}
.daylist>div{flex:1;min-width:0}
.daylist .caps{display:block;font-size:.52rem;color:var(--muted)}
.daylist strong{display:block;font-family:var(--script);font-weight:400;font-size:clamp(1.5rem,5.4vw,2rem);line-height:1.15;color:#5A2F3C;margin-top:.1rem}
.daylist em{display:block;font-size:.95rem}
.daylist .vsep{width:1px;background:linear-gradient(transparent,var(--gold),transparent)}
.countwrap{margin-top:1.2rem;width:100%}
.cd{display:flex;gap:clamp(.4rem,2vw,1rem);justify-content:center;margin:.6rem 0 .3rem}
.cd div{min-width:clamp(56px,15vw,88px);padding:.65rem .3rem;border-radius:16px;background:var(--card);border:1px solid var(--cardb);backdrop-filter:blur(10px)}
.cd b{display:block;font-weight:300;font-size:clamp(1.8rem,7vw,3rem);line-height:1;font-variant-numeric:tabular-nums}
.cd span{font-family:var(--sans);font-size:.56rem;letter-spacing:.25em;text-transform:uppercase;opacity:.8}
.cd-main{font-size:clamp(2rem,7vw,3.4rem);line-height:1.1;font-weight:300;margin-top:.4rem}
.cd-sub{font-style:italic;font-size:clamp(1rem,3vw,1.25rem);opacity:.85;margin-top:.4rem}
.confetti{position:absolute;top:-20px;width:8px;height:14px;opacity:0;animation:conf var(--t,7s) linear infinite var(--dl,0s)}
body[data-state=married] .confetti{opacity:1}
@keyframes conf{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(900deg)}}
@media (max-width:640px){.cd div{min-width:0;flex:1}}

/* ---------------- couple ---------------- */
.kolam{position:absolute;left:50%;top:50%;width:min(120vmin,900px);aspect-ratio:1;transform:translate(-50%,-50%);color:var(--gold);opacity:.18}
.kolam.end{opacity:.14;color:#E6C98A}
.kolam .kl *{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 3.2s ease-out}
.page.active .kolam .kl *{stroke-dashoffset:0}
.couple{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(.8rem,3vw,2rem);align-items:start;width:100%;margin-top:1.2rem}
.pg-couple .content{max-width:940px}
.knotmark{align-self:center;display:grid;place-items:center;position:relative;isolation:isolate}
.knotmark .mono{width:clamp(84px,11vw,120px);filter:drop-shadow(0 8px 18px rgba(142,107,58,.22))}
.knotmark::before{content:'';position:absolute;width:130%;height:130%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.6),rgba(255,255,255,0) 70%);z-index:-1}
.person{position:relative;z-index:1}
@media (max-width:560px){.knotmark .mono{width:84px}}
.person{text-align:center}
.pname{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,4.6vw,2.4rem);line-height:1.15;color:#6B3F4C}
@media (min-width:561px){.pname{white-space:nowrap;font-size:clamp(1.4rem,3vw,2.3rem)}}
.rel{font-style:italic;color:var(--muted);margin-top:.35rem;font-size:.95rem}
.parents{font-size:clamp(.95rem,2.8vw,1.15rem);line-height:1.45;margin-top:.15rem}
.parents .ini{letter-spacing:.1em}
.town{font-size:.56rem;margin-top:.35rem;color:var(--muted)}
.hero.photo img{object-position:50% 40%}
.knotmark{display:grid;place-items:center}
.quote{font-size:clamp(1.15rem,3.6vw,1.6rem);font-style:italic;line-height:1.45;max-width:30ch;color:#5C3F49}
@media (max-width:560px){.couple{grid-template-columns:1fr;gap:.6rem}}

/* ---------------- schedule overview ---------------- */
.h-ev{font-size:clamp(2.8rem,9vw,5.2rem);line-height:1;font-weight:300}
.timeline{list-style:none;position:relative;width:min(100%,520px);margin:1.2rem auto 0;text-align:left}
.timeline::before{content:'';position:absolute;left:11px;top:10px;bottom:10px;width:1px;background:linear-gradient(var(--gold),transparent);}
.timeline li{position:relative;display:flex;gap:1.1rem;padding:.75rem 0 .75rem 0;cursor:pointer;transition:transform .25s}
.timeline li:hover{transform:translateX(4px)}
.timeline .node{flex:0 0 22px;height:22px;border-radius:50%;border:1px solid var(--gold);background:#FFFBF7;position:relative;margin-top:.2rem}
.timeline .node::after{content:'';position:absolute;inset:6px;border-radius:50%;background:var(--gold);transform:scale(0);transition:transform .4s}
.page.active .timeline li:nth-child(1) .node::after{transform:scale(1);transition-delay:.9s}
.page.active .timeline li:nth-child(2) .node::after{transform:scale(1);transition-delay:1.2s}
.page.active .timeline li:nth-child(3) .node::after{transform:scale(1);transition-delay:1.5s}
.timeline strong{display:block;font-weight:300;font-size:clamp(1.5rem,4.6vw,2rem);line-height:1.1;font-family:var(--display);font-style:italic;color:#6B3F4C}
.timeline .caps{font-size:.56rem;color:var(--muted)}
.timeline em{font-size:.98rem;opacity:.8}
.jasmine{position:absolute;top:0;left:0;right:0;height:30vh;pointer-events:none}
.strand{position:absolute;top:0;width:2px;background:repeating-linear-gradient(#fff 0 6px,transparent 6px 14px);transform-origin:top;animation:strandsway 4.5s ease-in-out infinite var(--dl,0s)}
.strand::after{content:'';position:absolute;left:50%;bottom:-6px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
@keyframes strandsway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}

/* ---------------- event pages ---------------- */
.content.ev{justify-content:flex-start;justify-content:safe center;padding-top:max(4vh,24px);padding-bottom:max(4vh,24px)}
.content.ev .kicker{margin:0 0 .8rem;font-size:.66rem}
.hero{width:min(100%,560px);aspect-ratio:3/2;position:relative;flex:0 1 auto;max-height:38vh;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 42%,rgba(0,0,0,.6) 68%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 50%,#000 42%,rgba(0,0,0,.6) 68%,transparent 100%)}
.hero.wide{max-height:28vh}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.pg-muh .hero img,.pg-lunch .hero img,.pg-venue .hero img{mix-blend-mode:multiply;opacity:.96}
.content.ev .h-ev{font-size:clamp(2.8rem,9vw,4.8rem);margin-top:1.1rem;line-height:1.25;padding:0 .3em}
.content.ev .card{margin-top:.5rem}
.date{font-size:clamp(1.35rem,4.4vw,2rem);line-height:1.1;font-weight:300}
.when{font-size:clamp(1.1rem,3.4vw,1.45rem);font-style:italic;margin-top:.25rem}
.list{display:flex;gap:.4rem 1.2rem;justify-content:center;flex-wrap:wrap;margin-top:.7rem;font-style:italic;font-size:1rem;opacity:.88}
.list span::before{content:'✦';font-style:normal;color:var(--gold);margin-right:.45rem;font-size:.7em;vertical-align:middle}
@media (max-height:720px){.hero{max-height:28vh}.hero.wide{max-height:22vh}.content.ev .h-ev{font-size:clamp(2.2rem,7vw,3.4rem)}.card{padding:.8rem 1rem}.mapbox{height:130px}}
@media (max-height:620px){.hero{max-height:22vh}.list{display:none}}

/* reception */
.moon{position:absolute;top:3%;left:8%;width:clamp(44px,6vw,80px);aspect-ratio:1;border-radius:50%;background:#FFF7E8;box-shadow:0 0 50px rgba(255,247,232,.5);opacity:.9}
.lights{position:absolute;top:0;left:-2%;width:104%;height:20vh;min-height:120px}
.lights svg{width:100%;height:100%;overflow:visible;transform-origin:top;animation:sway 6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}
.wire{fill:none;stroke:rgba(255,255,255,.35);stroke-width:1}
.bulb{fill:#FFE9A8;filter:drop-shadow(0 0 6px #FFE08A) drop-shadow(0 0 14px rgba(255,210,120,.7));animation:blink 2.8s ease-in-out infinite var(--dl,0s)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
.lantern{position:absolute;bottom:-80px;width:26px;height:36px;border-radius:12px 12px 10px 10px;background:linear-gradient(#FFD9A0,#F2A86B);box-shadow:0 0 24px 6px rgba(255,190,120,.45);opacity:0;animation:rise var(--t,16s) linear infinite var(--dl,0s)}
.lantern::after{content:'';position:absolute;left:50%;bottom:-10px;width:2px;height:10px;background:#F2A86B;transform:translateX(-50%)}
@keyframes rise{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.9}100%{transform:translateY(-120vh) translateX(var(--sw,20px));opacity:0}}
/* muhurtam */
.sun{position:absolute;left:50%;top:55%;width:min(70vmin,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#FFF4DA 0%,#FFD9A8 35%,rgba(255,217,168,0) 70%)}
.rays{position:absolute;left:50%;top:55%;width:min(150vmin,1200px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;opacity:.35;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.9) 0 4deg,transparent 4deg 16deg);-webkit-mask:radial-gradient(circle,#000 10%,transparent 65%);mask:radial-gradient(circle,#000 10%,transparent 65%);animation:spin 90s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.bird{position:absolute;top:22%;left:-5%;width:26px;opacity:.55;animation:fly 28s linear infinite var(--dl,0s)}
.bird path{fill:none;stroke:var(--sketch,#8A5F3C);stroke-width:1.2;stroke-linecap:round}
@keyframes fly{0%{transform:translate(0,0)}50%{transform:translate(55vw,-6vh)}100%{transform:translate(110vw,2vh)}}
.diyas{position:absolute;left:0;right:0;bottom:0;height:60px}
.diya{position:absolute;bottom:10px;width:22px;height:24px}
.diya::before{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;background:#C98A6B;border-radius:0 0 50% 50%/0 0 100% 100%}
.diya::after{content:'';position:absolute;left:50%;bottom:40%;width:45%;aspect-ratio:1/1.5;transform:translateX(-50%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(#FFF6C8,#FFB347);box-shadow:0 0 14px 4px rgba(255,180,80,.6);animation:flame 1.6s ease-in-out infinite var(--dl,0s)}
@keyframes flame{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-52%) scale(1.08,1.15)}}
/* lunch */
.noon{position:absolute;left:50%;top:-18vmin;width:70vmin;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95) 0%,rgba(255,236,190,.7) 30%,rgba(255,236,190,0) 70%)}
.flash{position:absolute;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 18px 8px rgba(255,255,255,.9);opacity:0;animation:flash 6s ease-out infinite var(--dl,0s)}
@keyframes flash{0%,100%{opacity:0;transform:scale(.2)}2%{opacity:1;transform:scale(1.4)}10%{opacity:0;transform:scale(.6)}}

/* ---------------- venue ---------------- */
.map{position:absolute;inset:0;width:100%;height:100%}
.road{fill:none;stroke:var(--road);stroke-width:1.2;stroke-dasharray:4 6}
.road.main{stroke:var(--roadM);stroke-width:2.2;stroke-dasharray:none;opacity:.6}
.block{fill:rgba(255,255,255,.5);stroke:var(--road);stroke-width:1}
.pg-venue .hero{margin-top:0}
.venue-card{margin-top:.8rem}
.addr{font-size:clamp(1rem,2.9vw,1.2rem);line-height:1.5;font-style:italic;margin-top:.4rem}
.vmeta{margin-top:.5rem;font-size:1.02rem;font-style:italic}
.vmeta b{font-weight:500;font-style:normal}
.mapbox{position:relative;margin-top:.8rem;border-radius:16px;overflow:hidden;border:1px solid #EBD9CF;background:#EEF2EC;height:clamp(130px,20vh,210px)}
.mapbox iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.75) contrast(.95)}
.mapbtn{position:absolute;right:10px;bottom:10px;padding:.55rem .9rem;font-size:.58rem}
/* getting there */
.route{position:absolute;inset:0;width:100%;height:100%;color:var(--gold);opacity:.5}
.route path{stroke-dashoffset:0;animation:routeflow 14s linear infinite}
@keyframes routeflow{to{stroke-dashoffset:-200}}
.transit{display:grid;grid-template-columns:1fr;gap:.8rem;width:min(100%,520px);margin-top:1.3rem}
.tile{display:grid;grid-template-columns:auto 1fr auto;gap:.9rem;align-items:center;text-align:left;text-decoration:none;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:20px;padding:.95rem 1.1rem;box-shadow:0 20px 40px -28px rgba(74,46,54,.35);transition:transform .2s;min-width:0}
.tile:hover{transform:translateY(-2px)}
.tile>div{min-width:0}
.ticon{width:30px;height:30px;fill:var(--gold)}
.tile .caps{display:block;font-size:.5rem;color:var(--muted)}
.tile strong{display:block;font-weight:400;font-size:clamp(1.05rem,3.4vw,1.25rem);line-height:1.2;margin-top:.15rem;overflow-wrap:anywhere}
.tile em{display:block;font-size:.95rem;margin-top:.25rem;color:#6B3F4C}
.tile .go{font-family:var(--sans);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);white-space:nowrap}

/* ---------------- farewell ---------------- */
.foot-mono{width:clamp(110px,16vw,150px);margin-bottom:1.2rem;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.end-guest{font-family:var(--script);font-size:clamp(1.9rem,6.5vw,3rem);line-height:1.1;color:#FFF2D9;margin-bottom:.3rem}
body[data-state=married] .end-guest{color:#6B3F4C}
.end-main{font-size:clamp(2.6rem,9vw,4.8rem);line-height:1.25;padding:0 .3em}
.end-sub{font-style:italic;font-size:clamp(1.05rem,3.2vw,1.4rem);opacity:.9;margin-top:.4rem;max-width:32ch}
.foot{font-family:var(--sans);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;opacity:.95;margin-top:1.4rem;color:#FFF2D9;text-shadow:0 1px 8px rgba(74,30,46,.5)}
body[data-state=married] .foot{color:#6B3F4C;text-shadow:none}

/* ---------------- garland nav ---------------- */
#garland{position:fixed;right:max(10px,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:20;display:flex;flex-direction:column;gap:12px;align-items:center;padding:10px 4px;opacity:0;transition:opacity 1s .6s}
body.open #garland{opacity:1}
#garland .string{position:absolute;left:50%;top:6px;bottom:6px;width:1px;background:linear-gradient(transparent,var(--gold) 15%,var(--gold) 85%,transparent);opacity:.6}
#garland button{position:relative;width:18px;height:18px;display:grid;place-items:center;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
#garland button svg{width:10px;height:10px;transition:all .4s}
#garland button .bl{position:absolute;width:18px;height:18px;opacity:0;transform:scale(.4) rotate(-40deg);transition:all .5s cubic-bezier(.2,.7,.2,1)}
#garland button.on .bl{opacity:1;transform:scale(1) rotate(0)}
#garland button.on .bd{opacity:0;transform:scale(.3)}
#garland button span{position:absolute;right:26px;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .3s;color:var(--navcol,#6B3F4C)}
#garland:hover button span{opacity:.85}

/* ---------------- firefly guide ---------------- */
#firefly{position:fixed;left:50%;top:50%;z-index:19;pointer-events:none;width:0;height:0;transition:left 2.6s cubic-bezier(.45,.05,.3,1),top 2.6s cubic-bezier(.2,.8,.4,1);opacity:0}
body.open #firefly{opacity:1;transition:left 2.6s cubic-bezier(.45,.05,.3,1),top 2.6s cubic-bezier(.2,.8,.4,1),opacity 1s 1.2s}
#firefly i{position:absolute;left:-5px;top:-5px;width:10px;height:10px;border-radius:50%;background:#FFF2C8;box-shadow:0 0 10px 3px rgba(230,201,138,.9),0 0 30px 10px rgba(230,201,138,.35);animation:ffbob 3.2s ease-in-out infinite,ffglow 1.8s ease-in-out infinite}
@keyframes ffbob{0%,100%{transform:translate(0,0)}30%{transform:translate(8px,-10px)}60%{transform:translate(-7px,-4px)}}
@keyframes ffglow{0%,100%{opacity:.75}50%{opacity:1}}
#firefly b{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:#FFF2C8;opacity:0;animation:trail 1.4s ease-out forwards}
@keyframes trail{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(.2) translateY(14px)}}

/* ---------------- tilt & popover ---------------- */
#tiltbtn{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:20;display:none;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;padding:.6rem 1rem;border-radius:999px;background:rgba(255,255,255,.75);color:#5C4A52;border:1px solid var(--gold)}
#calpop{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;background:rgba(40,20,30,.4);backdrop-filter:blur(4px);padding:1rem}
#calpop.open{display:flex}
.pop{background:#FFFBF7;color:#4A2E36;width:min(440px,100%);border-radius:26px;padding:1.5rem 1.3rem 1.2rem;box-shadow:0 30px 70px rgba(0,0,0,.3);animation:popin .35s cubic-bezier(.2,.7,.2,1)}
@keyframes popin{from{transform:translateY(24px) scale(.97);opacity:0}}
.pop h3{font-weight:300;font-size:1.6rem;text-align:center}
.pop p{text-align:center;font-style:italic;opacity:.7;margin:.2rem 0 .9rem}
.calrow{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.75rem 0;border-top:1px solid #EBD9CF;text-decoration:none;transition:background .2s}
.calrow:hover{background:rgba(184,147,63,.06)}
.calrow strong{font-weight:400;font-size:1.15rem;display:block;font-family:var(--display);font-style:italic}
.calrow small{font-family:var(--sans);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;opacity:.65}
.calrow .g{flex-shrink:0;display:inline-flex;align-items:center;gap:.4rem;font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;padding:.5rem .8rem;border-radius:999px;border:1px solid var(--gold);background:#fff}
.calrow .g svg{width:14px;height:14px}
.pop .close{display:block;margin:.9rem auto 0;font-family:var(--sans);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.env-card,.env-flap{transition:none!important}}

/* ================= Round 4 additions ================= */
/* ---- living paintings ---- */
.hero.living{width:min(100%,560px,calc(38vh * 1.5));aspect-ratio:3/2;max-height:none;overflow:visible;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.hero.living img,.hero.living .fxlayer{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%)}
.pg-recep .hero.living::after{content:'';position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(ellipse 60% 60% at 50% 50%,rgba(94,74,110,0) 45%,rgba(94,74,110,.55) 80%,rgba(94,74,110,.95) 100%);mix-blend-mode:multiply}
.hero.living.wide{width:min(100%,560px,calc(28vh * 1.5))}
.hero.living img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 1.8s ease,transform 1.8s cubic-bezier(.2,.7,.2,1);filter:saturate(.55) blur(7px);transform:scale(1.07)}
.page.active .hero.living img{filter:none;transform:scale(1);animation:heroBreathe 16s ease-in-out 1.8s infinite alternate}
@keyframes heroBreathe{from{transform:scale(1) translate(0,0)}to{transform:scale(1.045) translate(-.6%,-.8%)}}
.hero.living .fx{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.4s ease 1s}
.page.active .hero.living .fx{opacity:1}
.fx .bulb{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:radial-gradient(circle,#FFF6D2 0%,rgba(255,228,150,.85) 35%,rgba(255,210,120,0) 70%);box-shadow:0 0 10px 3px rgba(255,220,140,.55);animation:bulbTw var(--t,2.6s) ease-in-out infinite var(--dl,0s)}
@keyframes bulbTw{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.fx .lamp{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:radial-gradient(circle,rgba(255,236,180,.9) 0%,rgba(255,200,110,.45) 40%,rgba(255,190,100,0) 70%);animation:lampGlow var(--t,3.2s) ease-in-out infinite var(--dl,0s)}
@keyframes lampGlow{0%,100%{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}}
.fx .flame{position:absolute;width:7px;height:12px;margin:-11px 0 0 -3.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(#FFF6C8,#FFB347);box-shadow:0 0 12px 4px rgba(255,180,80,.6);transform-origin:50% 100%;animation:flame 1.4s ease-in-out infinite var(--dl,0s)}
.fx .sunglow{position:absolute;width:38%;aspect-ratio:1;margin:-19% 0 0 -19%;border-radius:50%;background:radial-gradient(circle,rgba(255,244,214,.9) 0%,rgba(255,217,168,.45) 35%,rgba(255,217,168,0) 70%);animation:sunPulse 6s ease-in-out infinite;mix-blend-mode:screen}
@keyframes sunPulse{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}
.fx .ray{position:absolute;inset:-20%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.55) 0 3deg,transparent 3deg 14deg);-webkit-mask:radial-gradient(circle at var(--cx,50%) var(--cy,45%),#000 0,transparent 55%);mask:radial-gradient(circle at var(--cx,50%) var(--cy,45%),#000 0,transparent 55%);opacity:.35;animation:spin 80s linear infinite;mix-blend-mode:screen}
.fx .petal{width:9px;height:13px;opacity:.85;animation-name:fallIn}
@keyframes fallIn{0%{transform:translate(0,-20px) rotate(0)}100%{transform:translate(var(--sw,30px),110%) rotate(540deg)}}
.fx .star{background:#fff}
.fx .sparkle{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#fff;box-shadow:0 0 10px 4px rgba(255,255,255,.8);opacity:0;animation:flash 5s ease-out infinite var(--dl,0s)}
.fx .bird{opacity:.5;width:16px}
.fx .sheen{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:300% 100%;background-position:calc(50% + var(--tx) * 80%) 0;transition:background-position .4s ease-out;mix-blend-mode:soft-light}
.hero.living .fxlayer{position:absolute;inset:0;will-change:transform;transform:translate(calc(var(--tx) * 10px),calc(var(--ty) * 8px));transition:transform .3s ease-out}
@media (max-height:720px){.hero.living{width:min(100%,560px,calc(30vh * 1.5))}.hero.living.wide{width:min(100%,560px,calc(22vh * 1.5))}}

/* ---- self-writing name ---- */
.handwrite{display:block;overflow:visible;max-width:100%}
.handwrite text{font-family:var(--script);fill:currentColor;stroke:currentColor;stroke-width:.6px;stroke-linejoin:round;stroke-linecap:round;paint-order:stroke fill}
.handwrite tspan{fill-opacity:0;stroke-dasharray:160;stroke-dashoffset:160;animation:hwStroke 1.1s ease forwards var(--dl,0s),hwFill .5s ease forwards calc(var(--dl,0s) + .55s)}
@keyframes hwStroke{to{stroke-dashoffset:0}}
@keyframes hwFill{to{fill-opacity:1}}
.handwrite .nib{fill:var(--gold);opacity:0;animation:nibMove var(--dur,2s) linear forwards .05s}
@keyframes nibMove{0%{opacity:0}5%{opacity:1}95%{opacity:1}100%{opacity:0}}
.env-guest.handwrite{height:clamp(2.2rem,7.5vw,3.4rem);width:100%;color:#6B3F4C;overflow:visible}
.dear .guest.handwrite{height:clamp(3rem,11vw,4.9rem);width:100%;margin:.1em auto .25em}
.dear .guest.handwrite::after{display:none}
.dear .guest-rule{display:block;width:56px;height:1px;background:var(--gold);margin:.1rem auto .55rem;transform:scaleX(0);transform-origin:left;animation:ruleIn .6s ease forwards var(--dl,1.6s)}
@keyframes ruleIn{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.handwrite tspan{fill-opacity:1;stroke-dashoffset:0;animation:none}}

/* ---- playlist ---- */
.playlist{width:min(100%,520px);margin-top:1rem;background:rgba(255,255,255,.8);border:1px solid #fff;border-radius:20px;padding:.8rem .9rem .9rem;box-shadow:0 20px 40px -28px rgba(74,46,54,.35);text-align:left}
.pl-head{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;margin-bottom:.7rem}
.pl-icon{width:28px;height:28px;fill:#1DB954}
.pl-head .caps{display:block;font-size:.5rem;color:var(--muted)}
.pl-head strong{display:block;font-weight:400;font-size:1.05rem;line-height:1.2;margin-top:.1rem}
.pl-open{font-family:var(--sans);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:.45rem .7rem;border-radius:999px;border:1px solid var(--gold);white-space:nowrap}
.playlist iframe{width:100%;height:152px;border:0;border-radius:12px;display:block;background:#f3e9e4}
@media (max-height:720px){.playlist iframe{height:80px}.pg-travel .sub{display:none}}
@media (max-height:620px){.playlist{display:none}}

/* ---- save my invite ---- */
#savecard.busy{opacity:.6;pointer-events:none}
#cardcanvas{position:fixed;left:-9999px;top:0}

/* ---- scroll-driven parallax (per page, --sp set by JS) ---- */
.page{--sp:0}
.hero.living{translate:0 calc(var(--sp) * -46px)}
.hero.living .fxlayer{translate:0 calc(var(--sp) * -70px)}
.hero.living img{scale:calc(1.03 + var(--sp) * var(--sp) * .12)}
.content.ev .kicker{translate:0 calc(var(--sp) * -20px)}
.content.ev .h-ev{translate:0 calc(var(--sp) * 24px)}
.content.ev .card{translate:0 calc(var(--sp) * 70px)}
.hero.living .fx .petal{translate:0 calc(var(--sp) * -40px)}
@media (prefers-reduced-motion:reduce){.hero.living,.hero.living .fxlayer,.content.ev .kicker,.content.ev .h-ev,.content.ev .card{translate:none}}