/* For Oishy · styles
   Scenes 1–2 live in the party palette (blush, melon, butter).
   Scenes 3–6 live in the letter palette (wine, paper, wax, gold). */

*,*::before,*::after{box-sizing:border-box}
:root{
  --blush:#FFE4EC;--melon:#FF5C7A;--butter:#FFD66B;--mint:#8FE3C8;--grape:#3B2244;--lilac:#B69CFF;
  --plum:#1E1224;--cream:#FFF1E0;
  --wine:#2A0E17;--paper:#FAF4E8;--ink:#2B2118;--wax:#9E1B32;--gold:#D9B77E;--parch:#F3E6D0;
  --f-round:"Fredoka","Hanken Grotesk",system-ui,sans-serif;
  --f-hand:"Caveat","Tiro Bangla","Noto Serif Bengali","Bangla Sangam MN",cursive;
  --f-script:"Pinyon Script","Snell Roundhand","Apple Chancery",cursive;
  --f-serif:"Cormorant Garamond","Tiro Bangla",Georgia,serif;
  --f-bn:"Galada","Tiro Bangla","Noto Sans Bengali","Bangla Sangam MN",sans-serif;
  --f-ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none}
html{-webkit-text-size-adjust:100%;background:var(--blush)}
body{background:var(--blush);color:var(--grape);font-family:var(--f-ui);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;transition:background-color .9s}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* overflow:clip (where supported) stops scripts and focus from scrolling these fixed layers */
#stage{position:fixed;left:0;right:0;top:0;height:100vh;height:100dvh;overflow:hidden;overflow:clip;opacity:0;transition:opacity .7s ease}
html.is-ready #stage{opacity:1}
.scene{position:absolute;inset:0;overflow:hidden;overflow:clip;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s linear .9s}
.scene.is-active{opacity:1;visibility:visible;transition:opacity .9s ease,visibility 0s}
.scene:not(.is-active) *,.scene:not(.is-active) *::before,.scene:not(.is-active) *::after{animation-play-state:paused!important}

/* ---------- shared bits ---------- */
.btn{appearance:none;-webkit-appearance:none;border:0;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:999px;font:600 16px/1 var(--f-ui);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .3s ease}
.btn:active{transform:scale(.97)}
.btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn-warm{background:linear-gradient(180deg,#FFD9A0,#FF9F5A);color:#3A1A08;box-shadow:0 0 0 calc(var(--w,0) * 16px) rgba(255,208,138,.28),0 12px 30px -10px rgba(255,160,80,.7)}
.btn-gold{background:linear-gradient(180deg,#F4DEA8,#C99B55);color:#2A1606;box-shadow:0 14px 30px -12px rgba(217,183,126,.75)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ghost{background:transparent;color:#F7EEDC;box-shadow:inset 0 0 0 1.5px rgba(247,238,220,.4)}
.btn-link{appearance:none;border:0;background:none;padding:10px 12px;font:500 14px/1 var(--f-ui);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.grain{position:absolute;inset:-50%;z-index:20;pointer-events:none;opacity:.08;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.dust{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(1.5px 1.5px at 12% 22%,rgba(243,230,208,.5) 50%,transparent 60%),radial-gradient(1px 1px at 78% 14%,rgba(243,230,208,.45) 50%,transparent 60%),radial-gradient(2px 2px at 64% 72%,rgba(243,230,208,.3) 50%,transparent 60%),radial-gradient(1.2px 1.2px at 30% 84%,rgba(243,230,208,.4) 50%,transparent 60%),radial-gradient(1.6px 1.6px at 88% 58%,rgba(243,230,208,.35) 50%,transparent 60%),radial-gradient(1px 1px at 44% 40%,rgba(243,230,208,.3) 50%,transparent 60%);animation:dust 16s ease-in-out infinite alternate}
@keyframes dust{to{transform:translate3d(-3%,-6%,0)}}

/* ================= 1 · GIFT ================= */
.scene-gift{--g:min(46vw,27vh,210px);--bw:min(16vw,9.5vh,68px);background:linear-gradient(180deg,#FFF0F4 0%,#FFE0E9 55%,#FFD3DF 100%);color:var(--grape)}
.gb-bokeh{position:absolute;inset:-15%;background:radial-gradient(circle at 18% 28%,rgba(255,255,255,.9) 0 4%,transparent 4.5%),radial-gradient(circle at 84% 18%,rgba(255,214,107,.55) 0 5%,transparent 5.5%),radial-gradient(circle at 76% 72%,rgba(143,227,200,.5) 0 6%,transparent 6.5%),radial-gradient(circle at 12% 78%,rgba(255,92,122,.22) 0 8%,transparent 8.5%),radial-gradient(circle at 52% 46%,rgba(255,255,255,.55) 0 3%,transparent 3.5%);filter:blur(6px);animation:gb-drift 14s ease-in-out infinite alternate}
@keyframes gb-drift{to{transform:translate3d(-4%,3%,0) rotate(4deg)}}
.gb-floaters{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.floater{position:absolute;bottom:-40px;left:var(--x);width:var(--s);height:var(--s);fill:var(--c);opacity:.5;animation:float-up var(--dur) linear var(--delay) infinite}
@keyframes float-up{0%{transform:translate(0,0) rotate(-8deg)}50%{transform:translate(18px,-55vh) rotate(8deg)}100%{transform:translate(0,-115vh) rotate(-8deg)}}

.sound-hint{position:absolute;top:calc(var(--sat) + 16px);left:50%;z-index:8;display:inline-flex;align-items:center;gap:7px;margin:0;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:600 12.5px/1 var(--f-ui);letter-spacing:.03em;color:#7A4A6E;white-space:nowrap;transform:translateX(-50%);transition:opacity .5s,transform .5s}
.sound-hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.is-open .sound-hint{opacity:0;transform:translate(-50%,-10px)}

.gb-top{position:absolute;left:0;right:0;top:14%;z-index:2;display:grid;justify-items:center;text-align:center;transition:opacity .45s,transform .45s}
.gb-small{font:500 min(7vw,4vh,28px)/1 "Caveat",cursive;color:#7A4A6E}
.gb-name{margin:.06em 0 0;font:700 min(17vw,9vh,78px)/1 var(--f-round);letter-spacing:-.01em;color:var(--grape)}
.gb-bn{margin-top:.15em;font:400 min(7vw,3.8vh,30px)/1.3 var(--f-bn);color:#C23B61}
.is-open .gb-top{opacity:0;transform:translateY(-14px);pointer-events:none}

.gb-rays{position:absolute;left:50%;top:57%;z-index:1;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;background:repeating-conic-gradient(from 0deg,rgba(255,214,107,.5) 0deg 7deg,transparent 7deg 18deg);-webkit-mask-image:radial-gradient(circle,#000 0 6%,transparent 34%);mask-image:radial-gradient(circle,#000 0 6%,transparent 34%);opacity:0;transform:scale(.3);transition:opacity .6s,transform 1.2s cubic-bezier(.2,.8,.2,1)}
.is-open .gb-rays{opacity:1;transform:scale(1);animation:spin 22s linear infinite}
.is-settled .gb-rays{opacity:.35;transition:opacity 2s}
@keyframes spin{to{rotate:360deg}}

.gb-spark{position:absolute;z-index:2;width:14px;height:14px;background:var(--butter);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:twinkle 2.4s ease-in-out infinite;transition:opacity .3s}
.gb-spark.s1{left:calc(50% - var(--g) * .78);top:calc(57% - var(--g) * .3);animation-delay:.2s}
.gb-spark.s2{left:calc(50% + var(--g) * .66);top:calc(57% - var(--g) * .12);width:11px;height:11px;background:var(--melon);animation-delay:1s}
.gb-spark.s3{left:calc(50% - var(--g) * .6);top:calc(57% + var(--g) * .42);width:9px;height:9px;background:#5CCFAA;animation-delay:1.6s}
.gb-spark.s4{left:calc(50% + var(--g) * .5);top:calc(57% + var(--g) * .56);width:10px;height:10px;background:var(--lilac);animation-delay:.6s}
@keyframes twinkle{0%,100%{transform:scale(.3) rotate(0deg);opacity:.25}50%{transform:scale(1) rotate(45deg);opacity:1}}
.is-open .gb-spark{opacity:0}

.gb-gift{position:absolute;left:50%;top:57%;z-index:3;width:var(--g);height:var(--g);margin:calc(var(--g) / -2) 0 0 calc(var(--g) / -2);padding:0;border:0;background:none;cursor:pointer;transform-origin:50% 90%;transition:transform .9s cubic-bezier(.5,0,.75,0) 1.2s,opacity .7s ease 1.5s}
.gb-gift::before{content:"";position:absolute;inset:-22%}
.gb-gift:focus-visible{outline:2px dashed var(--grape);outline-offset:12px;border-radius:12px}
.scene-gift:not(.is-open) .gb-gift:not(.is-wiggle):not(.is-hop){animation:idle 3.6s ease-in-out 1s infinite}
@keyframes idle{0%,78%,100%{rotate:0deg}83%{rotate:-4deg}88%{rotate:4deg}93%{rotate:-2deg}}
.gb-gift.is-wiggle{animation:wiggle .55s ease-in-out}
@keyframes wiggle{0%,100%{rotate:0deg}20%{rotate:-8deg}40%{rotate:7deg}60%{rotate:-5deg}80%{rotate:3deg}}
.gb-gift.is-hop{animation:hop .7s ease-in-out}
@keyframes hop{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 calc(var(--g) * -.16);rotate:-8deg}50%{translate:0 0;rotate:6deg}70%{translate:0 calc(var(--g) * -.06);rotate:-3deg}}
.is-open .gb-gift{transform:translateY(calc(var(--g) * .7)) scale(.8);opacity:0;pointer-events:none}
.gb-shadow{position:absolute;left:10%;right:10%;bottom:-7%;height:11%;border-radius:50%;background:radial-gradient(closest-side,rgba(59,34,68,.24),transparent)}
.gb-body{position:absolute;left:6.7%;right:6.7%;bottom:0;height:64%;border-radius:4% 4% 9% 9%;background:linear-gradient(90deg,#FF8098 0%,#FF5C7A 50%,#E8486A 100%);box-shadow:inset 0 calc(var(--g) * -.053) 0 rgba(120,20,50,.1)}
.gb-body::before,.gb-lid::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:17%;transform:translateX(-50%);background:linear-gradient(90deg,#FFE39A,#FFD15C 60%,#F2BD3F)}
.gb-lid{position:absolute;left:0;right:0;top:22.7%;z-index:2;height:20%;border-radius:calc(var(--g) * .053);background:linear-gradient(90deg,#FF91A6 0%,#FF6782 50%,#EE4F70 100%);box-shadow:0 calc(var(--g) * .033) 0 calc(var(--g) * -.007) rgba(150,25,60,.18);transition:transform .9s cubic-bezier(.25,.8,.25,1),opacity .9s}
.gb-lid::before{width:17.3%}
.gb-bow{position:absolute;left:50%;bottom:100%;width:56%;height:113%;margin:0 0 -2.7% -28%;transform-origin:50% 100%;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.gb-bow i{position:absolute;bottom:6%;width:45.2%;height:82.4%;border:calc(var(--g) * .053) solid #FFD15C;border-radius:55% 55% 45% 45%}
.gb-bow i:first-child{left:2.4%;transform:rotate(18deg);transform-origin:right bottom;border-color:#FFE39A #F2BD3F #F2BD3F #FFE39A}
.gb-bow i:last-child{right:2.4%;transform:rotate(-18deg);transform-origin:left bottom}
.gb-bow b{position:absolute;left:50%;bottom:0;width:21.4%;height:47%;margin-left:-10.7%;border-radius:calc(var(--g) * .04);background:linear-gradient(#FFE39A,#F2BD3F)}
.is-loose .gb-bow{transform:scale(1.1) rotate(-5deg)}
.is-open .gb-lid{transform:translate(calc(var(--g) * .3),calc(var(--g) * -1.9)) rotate(28deg);opacity:0}

.gb-bubble{position:absolute;left:50%;top:calc(57% - var(--g) * .5 - 76px);z-index:5;margin:0;padding:10px 16px 11px;border-radius:18px;background:#fff;font:600 23px/1.1 "Caveat",cursive;color:var(--grape);white-space:nowrap;box-shadow:0 10px 24px -10px rgba(59,34,68,.35);opacity:0;transform:translateX(-50%) scale(.6);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none}
.gb-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;width:14px;height:14px;margin-left:-7px;border-radius:2px;background:#fff;transform:rotate(45deg)}
.gb-bubble.is-on{opacity:1;transform:translateX(-50%) scale(1)}

.gb-hint,.gb-lock{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 9%);z-index:3;display:grid;justify-items:center;text-align:center;transition:opacity .4s}
.gb-hint{gap:12px;font:600 12.5px/1 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:#7A4A6E}
.gb-dots{display:flex;gap:7px}
.gb-dots i{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--melon);transition:background .2s,transform .2s}
.gb-dots i.is-on{background:var(--melon);transform:scale(1.15)}
.is-open .gb-hint{opacity:0}
.gb-lock{gap:4px}
.gb-lock-label{font:600 12px/1.2 var(--f-ui);letter-spacing:.18em;text-transform:uppercase;color:#7A4A6E}
.gb-lock-time{font:600 min(13vw,7vh,58px)/1.1 var(--f-round);font-variant-numeric:tabular-nums;color:var(--grape)}
.gb-lock-when{font:500 22px/1.1 "Caveat",cursive;color:#C23B61}

.gb-title{position:absolute;left:0;right:0;top:calc(var(--sat) + 7%);z-index:4;padding-inline:16px;text-align:center;pointer-events:none}
.gb-h{margin:0;font:700 min(11.5vw,6.2vh,54px)/1.04 var(--f-round);color:var(--grape)}
.gb-h .ch{display:inline-block;opacity:0;transform:translateY(40px) scale(.5) rotate(-10deg)}
.is-open .gb-h .ch{animation:ch-in .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.35s + var(--i) * 45ms)}
@keyframes ch-in{to{opacity:1;transform:none}}
.gb-h-bn{margin:.2em 0 0;font:400 min(7vw,3.6vh,30px)/1.35 var(--f-bn);color:#C23B61;opacity:0;transform:translateY(8px);transition:opacity .6s 1.3s,transform .6s 1.3s}
.is-open .gb-h-bn{opacity:1;transform:none}

.gb-field{position:absolute;inset:0;z-index:6;pointer-events:none}
.gb-balloon{position:absolute;left:var(--x);top:var(--y);width:var(--bw);height:calc(var(--bw) * 1.23);margin-left:calc(var(--bw) / -2);padding:0;border:0;border-radius:50% 50% 48% 48%/56% 56% 44% 44%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0 7%,rgba(255,255,255,0) 18%),var(--c);box-shadow:inset -6px -8px 14px rgba(0,0,0,.1);pointer-events:auto;cursor:pointer;transform-origin:50% 120%;animation:rise 1.7s cubic-bezier(.2,.7,.3,1) both,bob var(--dur,3s) ease-in-out 1.7s infinite}
.gb-balloon::before{content:"";position:absolute;left:50%;top:99%;width:10px;height:7px;margin-left:-5px;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%)}
.gb-balloon::after{content:"";position:absolute;left:50%;top:calc(100% + 6px);width:1.2px;height:calc(var(--bw) * .95);background:linear-gradient(rgba(59,34,68,.45),rgba(59,34,68,.08))}
.gb-balloon:focus-visible{outline:2px dashed var(--grape);outline-offset:4px}
@keyframes rise{from{transform:translateY(110vh)}to{transform:translateY(0)}}
@keyframes bob{0%,100%{translate:0 0;rotate:-4deg}50%{translate:0 -9px;rotate:4deg}}
.gb-balloon.is-popped{pointer-events:none;animation:burst .22s ease-out forwards}
@keyframes burst{0%{transform:scale(1);opacity:1}60%{transform:scale(1.35);opacity:.6}100%{transform:scale(1.7);opacity:0}}

.gb-note{position:absolute;left:50%;top:58%;z-index:7;width:min(84vw,360px);padding:18px 20px 20px;border-radius:6px;background:#FFFDF8;box-shadow:0 18px 30px -18px rgba(59,34,68,.5),0 0 0 1px rgba(59,34,68,.05);text-align:center;opacity:0;transform:translateX(-50%) rotate(var(--tilt,-1.6deg));transition:opacity .5s .9s;pointer-events:none}
.gb-note::before{content:"";position:absolute;top:-11px;left:50%;width:78px;height:22px;margin-left:-39px;background:rgba(255,214,107,.8);transform:rotate(2deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.is-balloons .gb-note{opacity:1}
.gb-note.is-swap{animation:note-swap .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes note-swap{0%{transform:translateX(-50%) rotate(var(--tilt,-1.6deg)) scale(.82);opacity:.2}100%{transform:translateX(-50%) rotate(var(--tilt,-1.6deg)) scale(1);opacity:1}}
.gb-note-num{display:block;min-height:11px;margin-bottom:8px;font:600 11px/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:#C23B61}
.gb-note-text{margin:0;font:600 min(7.6vw,4.2vh,32px)/1.15 "Caveat",cursive;color:var(--grape);text-wrap:balance}
.gb-count{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 6%);z-index:7;display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding-inline:40px;opacity:0;transition:opacity .5s 1s}
.is-balloons .gb-count{opacity:1}
.gb-count i{width:8px;height:8px;border-radius:50%;background:rgba(59,34,68,.15);transition:background .3s,transform .3s}
.gb-count i.is-on{background:var(--melon);transform:scale(1.2)}

/* ================= 2 · CAKE ================= */
.scene-cake{--ck:min(74vw,39vh,300px);--lit:0;background:radial-gradient(120% 70% at 50% 58%,#3A2030 0%,#1E1224 55%,#120A15 100%);color:var(--cream)}
.ck-glow{position:absolute;left:50%;top:48%;width:180vmax;height:180vmax;margin:-90vmax 0 0 -90vmax;background:radial-gradient(circle,rgba(255,179,92,.42) 0%,rgba(255,140,70,.14) 14%,transparent 30%);opacity:var(--lit);transition:opacity .6s ease;pointer-events:none}
.ck-top{position:absolute;left:0;right:0;top:calc(var(--sat) + 9%);z-index:2;padding-inline:24px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .8s .5s,transform .8s .5s}
.scene-cake.is-ready .ck-top{opacity:1;transform:none}
.ck-title{margin:0;font:700 min(11vw,6vh,48px)/1.05 "Caveat",cursive;color:var(--cream);text-shadow:0 0 24px rgba(255,179,92,.35)}
.ck-sub{max-width:22em;margin:10px auto 0;font:500 15px/1.5 var(--f-ui);color:rgba(255,241,224,.72)}
.scene-cake.is-wished .ck-top,.scene-cake.is-wished .ck-controls{opacity:0;pointer-events:none;transition:opacity .6s}

.cake{position:absolute;left:50%;top:55%;z-index:1;width:var(--ck);aspect-ratio:1;margin-left:calc(var(--ck) / -2);opacity:0;transform:translateY(-50%) translateY(50px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s}
.scene-cake.is-ready .cake{opacity:1;transform:translateY(-50%)}
.ck-plate{position:absolute;left:-7%;right:-7%;bottom:1%;height:12%;border-radius:50%;background:radial-gradient(ellipse at 50% 35%,#FFFFFF,#E9DDE6 62%,#BFAEBC);box-shadow:0 14px 24px -10px rgba(0,0,0,.6)}
.ck-tier{position:absolute;border-radius:0 0 10% 10%/0 0 20% 20%}
.ck-tier::before{content:"";position:absolute;left:0;right:0;top:-9%;height:18%;border-radius:50%}
.ck-tier-bottom{left:4%;right:4%;bottom:7%;height:34%;background:linear-gradient(90deg,#EF6A8C,#FF9DB3 38%,#F77A98 70%,#E25D80)}
.ck-tier-bottom::before{background:#FFB3C4}
.ck-tier-top{left:19%;right:19%;bottom:40%;height:25%;background:linear-gradient(90deg,#EFDDBF,#FFF9EE 38%,#F8EAD2 70%,#E8D2AE)}
.ck-tier-top::before{background:#FFFDF6}
.ck-drip{position:absolute;left:0;top:0;width:100%;height:40%;overflow:visible}
.ck-tier-bottom .ck-drip path{fill:#FFF4E6}
.ck-tier-top .ck-drip path{fill:#FF8FA8}
.ck-name{position:absolute;left:0;right:0;bottom:16%;text-align:center;font:700 calc(var(--ck) * .12)/1 "Caveat",cursive;color:#FFF4E6;text-shadow:0 2px 0 rgba(180,40,80,.35)}
.sprinkle{position:absolute;width:calc(var(--ck) * .018);height:calc(var(--ck) * .05);border-radius:4px;background:var(--c);transform:rotate(var(--r))}
.ck-candles{position:absolute;inset:0;z-index:3;pointer-events:none}
.candle{position:absolute;left:var(--cx);bottom:62%;width:calc(var(--ck) * .036);height:calc(var(--ck) * .17);margin-left:calc(var(--ck) * -.018);padding:0;border:0;border-radius:calc(var(--ck) * .008);background:repeating-linear-gradient(135deg,#FFFFFF 0 calc(var(--ck) * .02),#FF8FA8 calc(var(--ck) * .02) calc(var(--ck) * .036));box-shadow:inset -2px 0 3px rgba(0,0,0,.15);transform:rotate(var(--rot,0deg));transform-origin:50% 100%;cursor:pointer;pointer-events:auto}
.candle::before{content:"";position:absolute;left:50%;bottom:100%;width:2px;height:calc(var(--ck) * .022);margin-left:-1px;border-radius:1px;background:#3A2A2A}
.candle::after{content:"";position:absolute;inset:-90% -150% -10%}
.flame-wrap{position:absolute;left:50%;bottom:calc(100% + var(--ck) * .014);width:calc(var(--ck) * .052);height:calc(var(--ck) * .095);margin-left:calc(var(--ck) * -.026);transform-origin:50% 100%;pointer-events:none}
.flame{position:absolute;inset:0;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(ellipse 60% 70% at 50% 72%,#FFFFFF 0%,#FFF3B0 22%,#FFC24A 50%,#FF7A1A 80%,rgba(255,90,20,0) 100%);box-shadow:0 0 14px 5px rgba(255,190,90,.55),0 0 44px 16px rgba(255,150,60,.22);transform-origin:50% 90%;opacity:0;scale:.2;animation:flicker .14s ease-in-out infinite alternate;transition:opacity .3s,scale .45s cubic-bezier(.3,1.6,.5,1)}
.candle.is-lit .flame{opacity:1;scale:1}
.candle.is-out .flame{opacity:0;scale:.1;transition:opacity .25s,scale .3s ease-in}
@keyframes flicker{0%{transform:rotate(-2deg) scaleY(1)}50%{transform:rotate(1deg) scaleY(1.06)}100%{transform:rotate(2deg) scale(1.03,.95)}}
.is-tapmode:not(.is-wished) .candle.is-lit:not(.is-out) .flame-wrap::after{content:"";position:absolute;left:50%;top:50%;width:260%;height:160%;margin:-80% 0 0 -130%;border-radius:50%;box-shadow:0 0 0 2px rgba(255,241,224,.5);animation:tap-ring 1.6s ease-out infinite}
@keyframes tap-ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.4);opacity:0}}
.smoke{position:absolute;left:50%;bottom:calc(100% + var(--ck) * .02);width:calc(var(--ck) * .07);height:calc(var(--ck) * .22);margin-left:calc(var(--ck) * -.035);overflow:visible;pointer-events:none;opacity:0}
.smoke path{fill:none;stroke:rgba(225,220,232,.75);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70;stroke-dashoffset:70}
.candle.is-out .smoke{animation:smoke 2.4s ease-out forwards}
.candle.is-out .smoke path{animation:smoke-draw 1.3s ease-out forwards}
@keyframes smoke{0%{opacity:.9;transform:translateY(0) scale(.6)}100%{opacity:0;transform:translateY(calc(var(--ck) * -.14)) scale(1.3) rotate(8deg)}}
@keyframes smoke-draw{to{stroke-dashoffset:0}}

.ck-controls{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 6%);z-index:3;display:grid;justify-items:center;gap:6px;padding-inline:24px;opacity:0;transition:opacity .6s 1.8s}
.scene-cake.is-ready .ck-controls{opacity:1}
.scene-cake.is-ready.is-wished .ck-controls{opacity:0;pointer-events:none;transition:opacity .6s}
.ck-controls .btn-link{color:rgba(255,241,224,.75)}
.ck-status{min-height:1.5em;margin:0;font:500 14px/1.5 var(--f-ui);color:rgba(255,241,224,.85);text-align:center}
.ck-done{position:absolute;left:0;right:0;top:calc(var(--sat) + 11%);z-index:4;padding-inline:24px;text-align:center;pointer-events:none}
.ck-done p{margin:0;opacity:0;transform:translateY(10px);transition:opacity 1s,transform 1s}
.ck-done-1{font:700 min(10vw,5.4vh,44px)/1.1 "Caveat",cursive;color:var(--cream);text-shadow:0 0 30px rgba(255,214,107,.35)}
.ck-done-2{margin-top:16px!important;font:italic 500 min(6.4vw,3.4vh,27px)/1.3 var(--f-serif);color:rgba(255,241,224,.9)}
.is-wished .ck-done-1{opacity:1;transform:none;transition-delay:.9s}
.is-more .ck-done-2{opacity:1;transform:none}

/* ================= 3 · LETTER ================= */
.scene-letter{--ev:min(84vw,44vh,360px);background:radial-gradient(120% 80% at 50% 40%,#4E1D2B 0%,#2A0E17 58%,#150609 100%);color:var(--parch)}
.lt-to{position:absolute;left:0;right:0;top:calc(var(--sat) + 11%);z-index:1;margin:0;text-align:center;font:400 min(15vw,8vh,66px)/1.15 var(--f-script);color:var(--parch);text-shadow:0 2px 20px rgba(0,0,0,.4);opacity:0;transform:translateY(10px);transition:opacity 1s .3s,transform 1s .3s}
.lt-when{position:absolute;left:0;right:0;top:calc(var(--sat) + 11% + min(15vw,8vh,66px) * 1.25);z-index:1;margin:0;text-align:center;font:600 10.5px/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:rgba(243,230,208,.6);opacity:0;transition:opacity 1s .6s}
.scene-letter.is-ready .lt-to{opacity:1;transform:none}
.scene-letter.is-ready .lt-when{opacity:1}
.scene-letter.is-broken .lt-when{opacity:0;transition:opacity .4s}
.scene-letter.is-away .lt-to{opacity:0;transform:translateY(-10px);transition:opacity .6s,transform .6s}

.lt-env{position:absolute;left:50%;top:53%;z-index:2;width:var(--ev);height:calc(var(--ev) * .661);margin:calc(var(--ev) * -.33) 0 0 calc(var(--ev) / -2);perspective:1100px;opacity:0;transform:translateY(60px);transition:transform 1.1s cubic-bezier(.2,.8,.2,1),opacity .9s}
.scene-letter.is-ready .lt-env{opacity:1;transform:none}
.scene-letter.is-away .lt-env{opacity:0;transform:translateY(110px) scale(.92);transition:transform .7s cubic-bezier(.5,0,.7,.4),opacity .6s}
.lt-back{position:absolute;inset:0;border-radius:6px;background:linear-gradient(#D7C2A0,#E4D3B6);box-shadow:0 30px 50px -22px rgba(0,0,0,.7)}
.lt-letter{position:absolute;left:5%;right:5%;bottom:6.4%;z-index:2;height:84.6%;display:grid;align-content:start;gap:calc(var(--ev) * .04);padding:calc(var(--ev) * .08) calc(var(--ev) * .07);border-radius:3px;background:#FBF6EC;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.lt-letter span{height:2px;border-radius:2px;background:rgba(43,33,24,.14)}
.lt-letter span:nth-child(1){width:52%}.lt-letter span:nth-child(2){width:86%}.lt-letter span:nth-child(3){width:70%}
.scene-letter.is-rise .lt-letter{transform:translateY(calc(var(--ev) * -.44))}
.lt-front{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%}
.lt-flap{position:absolute;left:0;top:0;z-index:4;width:100%;height:62%;transform-origin:50% 0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.4,.1,.2,1)}
.lt-flap-face{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:6px 6px 0 0}
.lt-flap-out{background:linear-gradient(180deg,#F4EAD7 0%,#E6D5B8 100%)}
.lt-flap-in{background:linear-gradient(0deg,#CDB690,#DCC7A4);transform:rotateX(180deg)}
.scene-letter.is-flap .lt-flap{transform:rotateX(180deg)}
.scene-letter.is-flap-back .lt-flap{z-index:1}

.lt-seal{position:absolute;left:50%;top:62%;z-index:6;width:calc(var(--ev) * .28);height:calc(var(--ev) * .28);margin:calc(var(--ev) * -.14) 0 0 calc(var(--ev) * -.14);padding:0;border:0;border-radius:50%;background:none;cursor:pointer;touch-action:none;-webkit-touch-callout:none;transform:scale(calc(1 - var(--p,0) * .1))}
.lt-seal::before{content:"";position:absolute;inset:-30%;border-radius:50%}
.lt-seal::after{content:"";position:absolute;inset:-4%;border-radius:50%;animation:halo 2.4s ease-out infinite;pointer-events:none}
@keyframes halo{0%{box-shadow:0 0 0 0 rgba(217,183,126,.5)}100%{box-shadow:0 0 0 calc(var(--ev) * .08) rgba(217,183,126,0)}}
.lt-seal:focus-visible{outline:2px solid var(--gold);outline-offset:calc(var(--ev) * .06)}
.lt-ring{position:absolute;left:-17%;top:-17%;width:134%;height:134%;overflow:visible;transform:rotate(-90deg);pointer-events:none;transition:opacity .2s}
.lt-ring circle{fill:none;stroke-width:3.2}
.lt-ring-track{stroke:rgba(110,70,30,.16)}
.lt-ring-fill{stroke:#B98631;stroke-linecap:round;stroke-dasharray:289.03;stroke-dashoffset:289.03;filter:drop-shadow(0 0 3px rgba(217,183,126,.9))}
.lt-half{position:absolute;inset:0;transition:transform .9s cubic-bezier(.5,0,.8,.5),opacity .9s ease-in}
/* The crack runs down the middle; the outer points reach past the box so the wax shadow isn't cut square */
.lt-half-l{clip-path:polygon(-30% -30%,53% -30%,53% 0,46% 24%,56% 43%,45% 63%,54% 81%,48% 100%,48% 130%,-30% 130%)}
.lt-half-r{clip-path:polygon(53% -30%,130% -30%,130% 130%,48% 130%,48% 100%,54% 81%,45% 63%,56% 43%,46% 24%,53% 0)}
.lt-wax{position:absolute;inset:0;display:grid;place-items:center;border-radius:47% 53% 50% 50%/52% 46% 54% 48%;background:radial-gradient(circle at 36% 30%,#CF3C57 0%,#A31E36 42%,#6F0F22 100%);box-shadow:inset 0 0 0 calc(var(--ev) * .02) rgba(0,0,0,.07),inset 0 -4px 8px rgba(0,0,0,.35),inset 0 3px 6px rgba(255,255,255,.18),0 5px 12px rgba(0,0,0,.45)}
.lt-wax::before{content:"";position:absolute;inset:13%;border-radius:50%;border:1.5px solid rgba(255,190,190,.18);box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}
.lt-mono{position:relative;font:400 calc(var(--ev) * .16)/1 var(--f-script);color:#861427;text-shadow:0 1px 0 rgba(255,160,170,.35),0 -1px 0 rgba(0,0,0,.4);transform:translate(4%,6%)}
.lt-seal.is-close .lt-wax{animation:tremble .09s linear infinite}
@keyframes tremble{0%{translate:.8px 0}50%{translate:-.8px .5px}100%{translate:0 -.5px}}
.scene-letter.is-broken .lt-seal{pointer-events:none}
.scene-letter.is-broken .lt-seal::after{display:none}
.scene-letter.is-broken .lt-ring{opacity:0}
.scene-letter.is-broken .lt-half-l{transform:translate(-40%,130%) rotate(-40deg);opacity:0}
.scene-letter.is-broken .lt-half-r{transform:translate(38%,140%) rotate(36deg);opacity:0}
.lt-hint{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 13%);z-index:2;margin:0;text-align:center;font:600 11px/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:rgba(243,230,208,.75);opacity:0;transition:opacity .6s 1.2s}
.scene-letter.is-ready .lt-hint{opacity:1;animation:breathe 2.8s ease-in-out 2s infinite}
@keyframes breathe{50%{opacity:.45}}
.scene-letter.is-holding .lt-hint{opacity:.3;animation:none}
.scene-letter.is-broken .lt-hint{opacity:0;animation:none;transition:opacity .3s}

.lt-paper{position:absolute;left:50%;top:calc(var(--sat) + 14px);bottom:calc(var(--sab) + 14px);z-index:8;width:min(calc(100vw - 28px),540px);border-radius:4px;color:var(--ink);background:#FAF4E8;box-shadow:0 40px 70px -30px rgba(0,0,0,.85),0 0 0 1px rgba(120,90,50,.08);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(50px) scale(.9) rotate(-1deg);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.scene-letter.is-away .lt-paper{opacity:1;pointer-events:auto;transform:translateX(-50%) rotate(-.5deg)}
.lt-paper-inner{height:100%;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:26px clamp(20px,6vw,40px) 44px;background:repeating-linear-gradient(180deg,transparent 0 39px,rgba(120,90,50,.11) 39px 40px) 0 22px/100% auto local;-webkit-user-select:text;user-select:text}
.lt-date{display:block;padding-right:34px;text-align:right;font:500 21px/40px "Caveat",cursive;color:rgba(43,33,24,.55)}
.lt-body p{margin:0 0 40px;font:500 min(7vw,28px)/40px var(--f-hand);color:var(--ink)}
.lt-body .lt-greeting{margin-bottom:0;font-weight:700}
.lt-body .lt-signoff{margin:0;text-align:right}
.lt-body .lt-signature{margin:0;text-align:right;font:400 min(10vw,40px)/56px var(--f-script);color:#7B1A2C}
/* Bangla letter: Atma reads like pen handwriting; Galada for the greeting and signature */
.lt-body.is-bn p{font:500 min(6.1vw,24px)/40px "Atma","Tiro Bangla","Noto Sans Bengali","Kohinoor Bangla",sans-serif}
.lt-body.is-bn .lt-greeting{font:400 min(7.6vw,30px)/40px var(--f-bn)}
.lt-body.is-bn .lt-signoff{font-weight:600}
.lt-body.is-bn .lt-signature{font:400 min(8.4vw,34px)/56px var(--f-bn);color:#7B1A2C}
.w{display:inline-block;padding:0 .08em;margin:0 -.08em;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}
.is-writing .w{animation:write var(--d) linear var(--t) forwards}
@keyframes write{to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}}
.is-written .w{animation:none;-webkit-clip-path:none;clip-path:none}
.lt-skip{position:absolute;left:0;right:0;bottom:0;margin:0;padding:30px 0 14px;border-radius:0 0 4px 4px;background:linear-gradient(rgba(250,244,232,0),#FAF4E8 60%);text-align:center;font:600 10.5px/1 var(--f-ui);letter-spacing:.22em;text-transform:uppercase;color:rgba(43,33,24,.45);opacity:0;pointer-events:none;transition:opacity .5s}
.is-writing .lt-skip{opacity:1}
.is-written .lt-skip{opacity:0}
#to-story{display:flex;margin:22px auto 0;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .8s .3s,transform .8s .3s}
.is-written #to-story{opacity:1;transform:none;pointer-events:auto}
.lt-leak{position:absolute;inset:0;z-index:11;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(110deg,transparent 25%,rgba(255,170,90,.45) 45%,rgba(255,110,90,.3) 55%,transparent 75%);transform:translateX(-110%)}
.is-leak .lt-leak{animation:leak 1.7s ease-in-out forwards}
@keyframes leak{0%{transform:translateX(-110%);opacity:0}20%{opacity:1}100%{transform:translateX(110%);opacity:0}}

/* ================= 4 · STORY ================= */
.scene-story{background:radial-gradient(120% 70% at 50% 30%,#3D1522 0%,#220B13 60%,#12050A 100%);color:var(--parch)}
.st-scroll{position:absolute;inset:0;z-index:1;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:y mandatory;scrollbar-width:none}
.st-scroll::-webkit-scrollbar{display:none}
.st-card{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:min(1.6vh,14px);padding:calc(var(--sat) + 36px) 24px calc(var(--sab) + 36px);text-align:center;scroll-snap-align:start;scroll-snap-stop:always}
.st-kicker{margin:0;font:600 11px/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.st-date{margin:0;font:500 min(6vw,3vh,24px)/1 "Caveat",cursive;color:rgba(243,230,208,.75)}
.st-title{max-width:14em;margin:0;font:italic 500 min(9vw,4.8vh,42px)/1.05 var(--f-serif);color:#F7EEDC;text-wrap:balance}
.st-text{max-width:24em;margin:0;font:500 min(4.2vw,2.1vh,17px)/1.5 var(--f-ui);color:rgba(243,230,208,.8)}
.polaroid{position:relative;flex:none;width:min(70vw,37vh,330px);margin:4px 0;padding:min(2.6vw,10px) min(2.6vw,10px) min(11vw,46px);border-radius:3px;background:#FBF8F1;box-shadow:0 30px 50px -24px rgba(0,0,0,.85);opacity:0;transform:rotate(var(--r,-2deg)) translateY(-22px) scale(.95);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .8s}
.st-card.is-seen .polaroid{opacity:1;transform:rotate(var(--r,-2deg))}
.polaroid.is-square{width:min(74vw,38vh,340px)}
.polaroid.is-wide{width:min(82vw,44vh,380px)}
.polaroid .ph{position:relative;aspect-ratio:var(--ar,4 / 5);overflow:hidden;background:#2A1A1C}
.polaroid img{display:block;width:100%;height:100%;object-fit:cover;filter:sepia(.9) brightness(1.8) contrast(.45) saturate(.4) blur(5px);transform:scale(1.06);transition:filter 3.4s cubic-bezier(.3,.1,.3,1) .5s,transform 6s ease-out .5s}
.st-card.is-seen .polaroid img{filter:none;transform:none}
.polaroid .ph::after{content:"";position:absolute;inset:0;background:#FBF8F1;opacity:.9;transition:opacity 2.8s ease .4s}
.st-card.is-seen .polaroid .ph::after{opacity:0}
.ph.is-missing{background:linear-gradient(135deg,#E9D8C4,#CDB08E)}
.ph.is-missing img{display:none}
.ph.is-missing::before{content:"photo coming soon";position:absolute;inset:0;display:grid;place-items:center;font:600 24px/1 "Caveat",cursive;color:rgba(43,33,24,.5)}
.polaroid figcaption{position:absolute;left:8px;right:8px;bottom:min(3vw,12px);font:600 min(6vw,24px)/1 "Caveat",cursive;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-intro .st-big{margin:0;font:400 min(30vw,16vh,140px)/1 var(--f-script);color:#F7EEDC;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.st-intro .st-count{margin:0;font:italic 500 22px/1.2 var(--f-serif);color:rgba(243,230,208,.8)}
.st-swipe{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 7%);display:grid;justify-items:center;gap:10px;font:600 10.5px/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:rgba(243,230,208,.6)}
.st-swipe::before{content:"";width:12px;height:12px;border-left:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{translate:0 4px}50%{translate:0 -4px}}
.st-outro h2{margin:0;font:italic 500 min(11vw,5.8vh,50px)/1.05 var(--f-serif);color:#F7EEDC}
.st-outro p{max-width:20em;margin:0;font:500 16px/1.5 var(--f-ui);color:rgba(243,230,208,.8)}
.st-outro .btn{margin-top:18px}
.st-dots{position:absolute;right:calc(env(safe-area-inset-right,0px) + 10px);top:50%;z-index:5;display:grid;gap:9px;transform:translateY(-50%);pointer-events:none}
.st-dots i{width:6px;height:6px;border-radius:50%;background:rgba(243,230,208,.25);transition:background .3s,transform .3s}
.st-dots i.is-on{background:var(--gold);transform:scale(1.35)}

/* ================= 5 · REVEAL ================= */
.scene-reveal{--tw:min(86vw,370px);background:radial-gradient(90% 60% at 50% 48%,#4A1A28 0%,#220B13 62%,#110509 100%);color:var(--parch)}
.rv-top{position:absolute;left:0;right:0;top:calc(var(--sat) + 12%);z-index:1;padding-inline:24px;text-align:center}
.rv-title{margin:0;font:italic 500 min(11vw,5.8vh,48px)/1.05 var(--f-serif);color:#F7EEDC}
.rv-sub{margin:12px 0 0;font:500 15px/1.5 var(--f-ui);color:rgba(243,230,208,.75)}
.ticket{position:absolute;left:50%;top:51%;z-index:2;width:var(--tw);height:calc(var(--tw) * .6);transform:translate(-50%,-50%);filter:drop-shadow(0 26px 28px rgba(0,0,0,.55))}
.ticket-card{position:absolute;inset:0;overflow:hidden;border-radius:16px;background:#FFF9EE;-webkit-mask:radial-gradient(circle at left center,transparent 15px,#000 16px) left/51% 100% no-repeat,radial-gradient(circle at right center,transparent 15px,#000 16px) right/51% 100% no-repeat;mask:radial-gradient(circle at left center,transparent 15px,#000 16px) left/51% 100% no-repeat,radial-gradient(circle at right center,transparent 15px,#000 16px) right/51% 100% no-repeat}
.ticket-under{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:20px 30px;text-align:center}
.ticket-under small{font:600 11px/1 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--wax)}
.ticket-under strong{font:italic 600 min(8vw,34px)/1.1 var(--f-serif);color:var(--ink);text-wrap:balance}
.ticket-under span{font:600 min(5.6vw,22px)/1.2 "Caveat",cursive;color:#7B1A2C}
#foil{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;transition:opacity .9s}
#foil.is-gone{opacity:0;pointer-events:none}
.ticket.is-revealed{animation:ticket-pop .9s cubic-bezier(.3,1.5,.5,1)}
@keyframes ticket-pop{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%) scale(1)}}
.rv-actions{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 9%);z-index:3;display:grid;justify-items:center;gap:8px}
.rv-actions .btn-link{color:rgba(243,230,208,.75)}

/* ================= 6 · CREDITS ================= */
.scene-credits{background:#0A0406;color:#EFE3CF}
.cr-window{position:absolute;inset:0;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(transparent 0,#000 16%,#000 78%,transparent 94%);mask-image:linear-gradient(transparent 0,#000 16%,#000 78%,transparent 94%)}
.cr-roll{position:absolute;left:0;right:0;top:0;display:grid;justify-items:center;gap:38px;padding:0 24px;text-align:center;will-change:transform;transform:translateY(100vh)}
.cr-head{margin:0;font:600 12px/1.4 var(--f-ui);letter-spacing:.3em;text-transform:uppercase;color:rgba(239,227,207,.6)}
.cr-star{margin:-26px 0 0;font:500 min(17vw,76px)/1 var(--f-serif);letter-spacing:.12em;color:#F7EEDC}
.cr-block{display:grid;gap:8px}
.cr-role{margin:0;font:600 11px/1.3 var(--f-ui);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.cr-name{margin:0;font:500 min(7vw,30px)/1.2 var(--f-serif);color:#F7EEDC;text-wrap:balance}
.cr-end{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center;opacity:0;pointer-events:none;transition:opacity 1.6s}
.is-ended .cr-end{opacity:1;pointer-events:auto}
.is-ended .cr-roll{opacity:0;transition:opacity .8s}
.cr-bn{margin:0;font:400 min(14vw,64px)/1.35 var(--f-bn);color:#F2C46B;text-shadow:0 0 30px rgba(242,196,107,.35)}
.cr-en{margin:0;font:400 min(12vw,56px)/1.15 var(--f-script);color:#F7EEDC}
.cr-from{margin:6px 0 0;font:italic 500 20px/1.4 var(--f-serif);color:rgba(239,227,207,.75)}
.cr-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}
.cr-skip{position:absolute;left:0;right:0;bottom:calc(var(--sab) + 18px);z-index:2;margin:0;text-align:center;font:600 10px/1 var(--f-ui);letter-spacing:.24em;text-transform:uppercase;color:rgba(239,227,207,.35);transition:opacity .5s}
.is-ended .cr-skip{opacity:0}

/* ================= global layers ================= */
#confetti{position:fixed;inset:0;z-index:50;width:100%;height:100%;pointer-events:none}
#mute{position:fixed;top:calc(var(--sat) + 12px);right:calc(env(safe-area-inset-right,0px) + 12px);z-index:55;display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#F7EEDC;opacity:0;pointer-events:none;cursor:pointer;transition:opacity .5s,background .5s,color .5s}
#mute svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#mute .i-off,#mute.is-muted .i-on{display:none}
#mute.is-muted .i-off{display:block}
#mute.is-on{opacity:1;pointer-events:auto}
body[data-scene="gift"] #mute{background:rgba(255,255,255,.6);color:var(--grape)}
body.paper-open #mute{background:rgba(43,33,24,.07);color:var(--ink)}
.curtain{position:fixed;inset:0;z-index:60;background:#000;opacity:0;pointer-events:none;transition:opacity .95s ease}
.curtain.is-down{opacity:1;pointer-events:auto}
.preview-badge{position:fixed;left:calc(env(safe-area-inset-left,0px) + 10px);bottom:calc(var(--sab) + 10px);z-index:70;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;font:600 10.5px/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.rotate{position:fixed;inset:0;z-index:100;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;background:var(--plum);color:var(--cream);text-align:center;font:600 18px/1.4 var(--f-ui)}
.rotate svg{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.6;animation:tilt 2s ease-in-out infinite}
@keyframes tilt{0%,100%{rotate:-90deg}50%{rotate:0deg}}
@media (orientation:landscape) and (max-height:500px){.rotate{display:flex}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .gb-h .ch{opacity:1;transform:none}
}