/* ============================================================
   KUSH — a birthday experience
   deep plum · burgundy · cream · warm gold · soft pink
   ============================================================ */

:root{
  --serif:"Playfair Display","Iowan Old Style",Georgia,"Times New Roman",serif;
  --script:"Dancing Script","Segoe Script","Brush Script MT",cursive;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --cream:#fbeedd;
  --cream-dim:rgba(251,238,221,.66);
  --cream-faint:rgba(251,238,221,.40);
  --gold:#f2ae56;
  --gold-soft:#f8c98a;

  --bgA:#140510; --bgB:#1c0718; --bgC:#290b1d;
  --glowC:rgba(158,44,64,.34); --glowO:.55; --glowY:74%;

  --safeT:env(safe-area-inset-top,0px);
  --safeB:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0; min-height:100vh; min-height:100dvh;
  background:#140510; color:var(--cream); font-family:var(--sans);
  overflow:hidden; overscroll-behavior:none; -webkit-font-smoothing:antialiased;
}
.hidden{ display:none !important; }

/* ── backdrop ───────────────────────────────────────── */
.backdrop{
  position:fixed; inset:0; z-index:0;
  background:linear-gradient(180deg,var(--bgA) 0%,var(--bgB) 52%,var(--bgC) 100%);
  transition:background 1.6s ease;
}
.backdrop .glow{
  position:absolute; left:50%; top:var(--glowY);
  width:170vmax; height:120vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,var(--glowC) 0%,transparent 60%);
  opacity:var(--glowO);
  transition:opacity 1.6s ease,background 1.6s ease,top 1.6s ease;
  animation:breathe 11s ease-in-out infinite;
}
@keyframes breathe{ 0%,100%{transform:translate(-50%,-50%) scale(1)} 50%{transform:translate(-50%,-50%) scale(1.09)} }

body[data-scene="cakeIntro"],
body[data-scene="cake"]{ --bgA:#170617; --bgB:#26091f; --bgC:#4a1430; --glowC:rgba(184,54,74,.44); --glowO:.9; --glowY:70%; }
body[data-scene="balloons"]{ --bgA:#1a0722; --bgB:#2c0c28; --bgC:#54183a; --glowC:rgba(190,60,90,.4); --glowO:.85; }
body[data-scene="memories"]{ --bgA:#180820; --bgB:#2a0d26; --bgC:#4e1636; --glowC:rgba(184,60,80,.4); --glowO:.8; }
body[data-scene="envelope"],
body[data-scene="gift"]{ --bgA:#170a2c; --bgB:#280f3c; --bgC:#4a1845; --glowC:rgba(150,62,148,.4); --glowO:.85; }
body[data-scene="final"]{ --bgA:#1b0722; --bgB:#320c28; --bgC:#5e1c39; --glowC:rgba(206,66,84,.5); --glowO:1; --glowY:66%; }

#fx{ position:fixed; inset:0; z-index:3; pointer-events:none; }

/* ── scenes ─────────────────────────────────────────── */
#app{ position:relative; z-index:2; }
.scene{
  position:fixed; inset:0; display:grid; place-items:center;
  padding:calc(var(--safeT) + 18px) 18px calc(var(--safeB) + 18px);
  opacity:0; visibility:hidden; transform:scale(.985) translateY(8px); filter:blur(10px);
  pointer-events:none;
  transition:opacity .8s ease,transform .8s var(--ease),filter .8s ease,visibility 0s .8s;
}
.scene.active{ opacity:1; visibility:visible; transform:none; filter:none; pointer-events:auto; transition-delay:0s; }

.stack{
  width:100%; max-width:400px; display:flex; flex-direction:column;
  align-items:center; gap:16px; text-align:center;
}

.line,.reveal{
  opacity:0; transform:translateY(18px);
  transition:opacity .9s ease,transform .9s var(--ease);
}
.line.in,.reveal.in{ opacity:1; transform:none; }

/* ── type ───────────────────────────────────────────── */
h1,h2{ margin:0; font-weight:700; } p{ margin:0; }

.big{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.55rem,7vw,2.15rem); line-height:1.22; color:#fff4e6;
  text-shadow:0 0 26px rgba(255,196,140,.22),0 2px 12px rgba(0,0,0,.45);
}
.scene-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(1.1rem,4.9vw,1.4rem); color:#fff4e6;
  text-shadow:0 0 22px rgba(255,196,140,.25),0 2px 10px rgba(0,0,0,.5);
}
.line:not(.big):not(.btn):not(.scene-title):not(.fine):not(.tap-hint),
.sub{ font-size:clamp(.95rem,4.1vw,1.06rem); line-height:1.6; color:var(--cream-dim); }
.accent{ color:var(--gold-soft) !important; }
.fine{ font-size:clamp(.7rem,3.1vw,.8rem); line-height:1.55; color:var(--cream-faint); }

.script-name,.script-sign{
  font-family:var(--script); font-weight:600; color:var(--gold);
  text-shadow:0 0 22px rgba(242,174,86,.35);
}
.script-name{ font-size:clamp(1.9rem,8.4vw,2.5rem); line-height:1.1; }
.script-sign{ font-size:1.5em; line-height:1; margin-left:.18em; vertical-align:-.12em; }

/* ── buttons ────────────────────────────────────────── */
.btn{
  appearance:none; border:0; cursor:pointer; font-family:var(--sans);
  font-weight:600; font-size:clamp(.93rem,3.9vw,1rem); letter-spacing:.02em;
  color:#fff8ef; padding:1em 1.9em; width:min(78%,290px); border-radius:999px;
  background:linear-gradient(102deg,#f4ab60 0%,#ec8f45 46%,#dc6d2d 100%);
  box-shadow:0 14px 34px -12px rgba(226,116,48,.75),
             inset 0 1px 0 rgba(255,255,255,.42),inset 0 -2px 6px rgba(140,50,10,.25);
  text-shadow:0 1px 2px rgba(120,44,10,.35);
  transition:transform .18s var(--ease),box-shadow .3s ease,opacity .9s ease;
}
.btn:active{ transform:scale(.965); }
.btn:focus-visible{ outline:2px solid var(--gold-soft); outline-offset:4px; }
.btn.tiny{ width:auto; padding:.7em 1.4em; font-size:.85rem; }

/* ── opening card ───────────────────────────────────── */
.card{
  position:relative; width:min(86%,306px); padding:30px 22px 22px; border-radius:20px;
  background:linear-gradient(180deg,rgba(46,15,36,.62),rgba(24,8,20,.62));
  border:1px solid rgba(242,174,86,.26);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,220,180,.08);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.card-knob{
  position:absolute; top:0; left:50%; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%); background:#1c0718; border:1px solid rgba(242,174,86,.32);
}
.card-emoji{ font-size:1.9rem; line-height:1; }
.kicker{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--cream-faint); }

/* ── cake ───────────────────────────────────────────── */
.cake-wrap{
  position:relative; z-index:2; display:flex; flex-direction:column;
  align-items:center; gap:10px; width:100%; max-width:400px; text-align:center;
}
.cake-stage{
  position:relative; width:min(74vw,280px); aspect-ratio:320/300;
  filter:drop-shadow(0 22px 30px rgba(0,0,0,.55));
}
.cake-glow{
  position:absolute; left:50%; top:58%; width:150%; height:130%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,rgba(255,168,86,.26) 0%,transparent 62%);
  opacity:calc(1 - var(--flameOut,0)*.85); transition:opacity 1s ease; pointer-events:none;
}
.cake-svg{ position:absolute; inset:0; width:100%; height:100%; }

/* tiers drop in one by one — "baking something sweet…" */
.cake-svg .part{ opacity:0; transform:translateY(-190px); }
.cake-stage.built .part{
  opacity:1; transform:none;
  transition:transform .7s cubic-bezier(.25,1.35,.45,1),opacity .35s ease;
}
.cake-stage.built #pPlate { transition-delay:0s; }
.cake-stage.built #pBottom{ transition-delay:.45s; }
.cake-stage.built #pTop   { transition-delay:.9s; }

.candles{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease .1s; }
.cake-stage.lit .candles{ opacity:1; }

.candle{ position:absolute; bottom:60.6%; width:2.6%; height:11.4%; transform:translateX(-50%); }
.candle-body{
  position:absolute; inset:0; border-radius:1.5px;
  background:repeating-linear-gradient(150deg,#fff6ec 0 3px,#eb8ea3 3px 6px);
  box-shadow:inset -1px 0 2px rgba(120,60,70,.4),0 1px 2px rgba(0,0,0,.35);
}
.wick{
  position:absolute; left:50%; bottom:100%; width:1.5px; height:15%;
  transform:translateX(-50%); background:#4a3128; border-radius:1px;
}
.flame{
  position:absolute; left:50%; bottom:112%; width:132%; height:62%;
  transform-origin:50% 100%;
  transform:translateX(-50%) rotate(calc(var(--wind,0)*34deg*var(--dir,1)))
            scaleY(calc(1 - var(--wind,0)*.5)) scaleX(calc(1 - var(--wind,0)*.22));
  border-radius:50% 50% 46% 46% / 68% 68% 32% 32%;
  background:radial-gradient(ellipse at 50% 74%,#fffaea 0%,#ffe093 28%,#f9a63f 62%,rgba(240,124,40,.15) 100%);
  box-shadow:0 0 14px 4px rgba(255,168,70,.42),0 0 34px 12px rgba(255,130,50,.16);
  animation:flicker calc(1.1s + var(--f,0)*.25s) ease-in-out infinite alternate;
  transition:transform .1s linear,opacity .3s ease;
}
@keyframes flicker{ 0%{filter:brightness(1)} 40%{filter:brightness(1.14)} 70%{filter:brightness(.93)} 100%{filter:brightness(1.06)} }
.candle.out .flame{ opacity:0; transform:translateX(-50%) scale(.15) rotate(24deg); }

.smoke{
  position:absolute; left:50%; bottom:118%; width:88%; height:30%; border-radius:50%;
  background:radial-gradient(circle,rgba(240,225,215,.55),rgba(240,225,215,0) 70%);
  opacity:0; pointer-events:none;
}
.candle.out .smoke{ animation:smokeup 1.9s ease-out forwards; }
@keyframes smokeup{
  0%{opacity:0;transform:translate(-50%,0) scale(.5)}
  18%{opacity:.85}
  100%{opacity:0;transform:translate(-50%,-260%) scale(4.2)}
}

.cake-sub,.hint{ font-size:clamp(.84rem,3.6vw,.94rem); color:var(--cream-dim); min-height:1.3em; }
.hint{ color:var(--cream-faint); font-size:clamp(.75rem,3.2vw,.84rem); }

/* live blow meter — so it is obvious the mic is hearing you */
.meter{
  width:min(56%,190px); height:5px; border-radius:99px; overflow:hidden;
  background:rgba(251,238,221,.13); opacity:0; transition:opacity .4s ease;
}
.meter.on{ opacity:1; }
.meter span{
  display:block; height:100%; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#f6c07a,#ec7a3c);
  box-shadow:0 0 12px rgba(240,150,60,.7);
  transition:width .12s linear;
}

.script-reveal{
  font-family:var(--script); font-weight:600; color:var(--gold);
  font-size:clamp(1.5rem,7vw,2rem); line-height:1.15; min-height:1.2em;
  text-shadow:0 0 26px rgba(242,174,86,.45);
}
.tap-on{
  font-size:.74rem; letter-spacing:.05em; color:var(--cream-faint);
  opacity:0; transition:opacity .8s ease;
}
.tap-on.in{ opacity:1; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.45} 50%{opacity:.9} }

/* ── balloons ───────────────────────────────────────── */
.balloon-field{
  position:relative; width:100%; height:min(34dvh,240px);
  transition:height .6s var(--ease),opacity .6s ease;
}
.balloon-field.done{ height:0; opacity:0; }

.balloon{
  position:absolute; bottom:0; width:52px; border:0; padding:0; background:none;
  cursor:pointer; transform:translateX(-50%);
  animation:bob 4.5s ease-in-out infinite;
  transition:opacity .3s ease;
}
.balloon .bulb{
  display:block; width:52px; height:64px;
  border-radius:50% 50% 50% 50% / 56% 56% 44% 44%;
  box-shadow:inset -7px -9px 16px rgba(0,0,0,.16),inset 7px 7px 14px rgba(255,255,255,.5),
             0 8px 22px -8px rgba(0,0,0,.5);
  position:relative;
}
.balloon .bulb::after{
  content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%);
  border-left:5px solid transparent; border-right:5px solid transparent;
  border-bottom:7px solid rgba(0,0,0,.15);
}
.balloon .str{
  display:block; width:1px; height:46px; margin:5px auto 0;
  background:linear-gradient(rgba(251,238,221,.5),rgba(251,238,221,.05));
}
.balloon.popped{ opacity:0; pointer-events:none; }
@keyframes bob{ 0%,100%{margin-bottom:0} 50%{margin-bottom:14px} }

.reasons{ display:flex; flex-direction:column; gap:8px; width:100%; }
.reason{
  display:flex; flex-direction:column; gap:2px; text-align:left;
  padding:9px 14px; border-radius:12px;
  background:rgba(30,10,26,.55); border:1px solid var(--rc,rgba(242,174,86,.4));
  box-shadow:0 0 18px -6px var(--rc,rgba(242,174,86,.5));
  opacity:0; transform:translateY(12px) scale(.97);
  animation:reasonIn .5s var(--ease) forwards;
}
@keyframes reasonIn{ to{opacity:1;transform:none} }
.reason b{
  font-size:.55rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--rc,var(--gold)); font-weight:600;
}
.reason span{ font-size:clamp(.82rem,3.5vw,.92rem); color:var(--cream-dim); line-height:1.45; }

.more{
  font-family:var(--serif); font-style:italic; font-size:clamp(.85rem,3.6vw,.95rem);
  color:var(--gold-soft); opacity:0; transition:opacity .9s ease;
}
.more.in{ opacity:1; }

/* ── memory lane ────────────────────────────────────── */
.lane-wrap{ position:relative; width:100vw; margin:6px 0 2px; padding-top:16px; overflow:hidden; }
.wire{
  position:absolute; left:0; right:0; top:8px; height:1.5px;
  background:linear-gradient(90deg,transparent,rgba(251,238,221,.42) 12%,rgba(251,238,221,.42) 88%,transparent);
}
.bulbs span{
  position:absolute; top:8px; width:5px; height:5px; border-radius:50%;
  transform:translate(-50%,-40%); background:#ffd7a0;
  box-shadow:0 0 9px 3px rgba(255,186,102,.55);
  animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.45} 50%{opacity:1} }

/* two identical copies slide left forever; margin-right (not gap) keeps the
   -50% wrap seamless, since every item then carries its own trailing space */
.lane{
  display:flex; width:max-content; padding-bottom:10px;
  animation:marquee 46s linear infinite;
}
@keyframes marquee{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }
.polaroid{
  flex:0 0 140px; margin-right:14px;
  background:linear-gradient(180deg,#f8ecda,#e7d4be);
  border-radius:3px; padding:8px 8px 22px;
  box-shadow:0 18px 30px -12px rgba(0,0,0,.75);
  transform:rotate(var(--r,0deg));
}
.polaroid img,.polaroid .ph{
  display:block; width:100%; aspect-ratio:1/1.04; object-fit:cover; border-radius:1px;
  background:linear-gradient(145deg,#cda283 0%,#a5607a 55%,#7d4360 100%);
}
.polaroid em{
  display:block; margin-top:7px; font-family:var(--script); font-style:normal;
  font-size:.95rem; color:#7b4a52; text-align:center;
}

/* ── envelope + letter ──────────────────────────────── */
.envelope{
  position:relative; width:min(70vw,250px); aspect-ratio:1.5/1;
  border:0; background:none; padding:0; cursor:pointer;
  transition:opacity .5s ease;
  animation:floaty 5s ease-in-out infinite;
}
@keyframes floaty{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.env-back,.env-front,.env-flap,.env-paper{ position:absolute; }
.env-back{ inset:0; border-radius:6px; background:linear-gradient(160deg,#f0c06a,#d99b3f); }
.env-paper{
  left:8%; right:8%; top:8%; height:84%; border-radius:3px;
  background:linear-gradient(180deg,#fffaf1,#f2e6d3);
  opacity:0; transition:transform .6s var(--ease),opacity .3s ease .25s;
}
.env-front{
  inset:0; border-radius:6px;
  background:linear-gradient(160deg,#eab95f 0%,#e0a94c 46%,#cf8f34 100%);
  clip-path:polygon(0 42%,50% 100%,100% 42%,100% 100%,0 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25);
}
.env-flap{
  left:0; right:0; top:0; height:62%;
  background:linear-gradient(180deg,#f2c569,#dca747);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0; transition:transform .7s var(--ease);
  border-radius:6px 6px 0 0;
}
.env-seal{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  font-size:.9rem; color:#fff3e6;
  background:radial-gradient(circle at 35% 30%,#e8748d,#b83b58);
  box-shadow:0 4px 10px rgba(0,0,0,.4); transition:opacity .3s ease;
}
.envelope.open .env-flap{ transform:rotateX(-172deg); }
.envelope.open .env-seal{ opacity:0; }
.envelope.open .env-paper{ transform:translateY(-26%); opacity:1; }
.envelope.gone{ opacity:0; pointer-events:none; }

.letter{
  position:fixed; inset:0; z-index:4; overflow-y:auto; text-align:left;
  padding:calc(var(--safeT) + 42px) 24px calc(var(--safeB) + 116px);
  background:linear-gradient(180deg,#fdf6e9 0%,#f6ebd8 55%,#f0e0c8 100%);
  color:#5d3c3f;
  opacity:0; transform:scale(.96); pointer-events:none;
  transition:opacity .7s ease,transform .7s var(--ease);
  display:none; -webkit-overflow-scrolling:touch;
}
.letter.show{ display:block; opacity:1; transform:none; pointer-events:auto; }
.letter-foot{
  position:fixed; left:0; right:0; bottom:0; z-index:5;
  display:none; justify-content:center;
  padding:26px 18px calc(var(--safeB) + 22px);
  background:linear-gradient(180deg,rgba(246,235,216,0),rgba(243,229,207,.96) 45%);
}
.letter-foot.show{ display:flex; }
.letter-to{ font-family:var(--script); font-size:1.75rem; color:#b8557a; margin-bottom:.5em; }
.letter-body{
  font-family:var(--script); font-size:clamp(1.12rem,4.9vw,1.3rem); line-height:1.7;
  color:#6b4547; white-space:pre-wrap; min-height:5em;
}
.letter-body::after{ content:"|"; opacity:0; margin-left:1px; color:#b8557a; }
.letter.typing .letter-body::after{ opacity:1; animation:caret .8s steps(1) infinite; }
@keyframes caret{ 50%{opacity:0} }
.letter-sign{
  margin-top:14px; display:flex; align-items:baseline; gap:.1em; flex-wrap:wrap;
  opacity:0; transition:opacity .8s ease;
}
.letter-sign.in{ opacity:1; }
.letter.show:not(.typing) .letter-seal{ opacity:1; }
.letter-sign .fine{ color:#8d6a62; }
.letter-sign .script-sign{ color:#b8557a; text-shadow:none; }
.letter-seal{
  width:32px; height:32px; margin:22px 0 0 auto; border-radius:50%;
  opacity:0; transition:opacity .6s ease;
  display:grid; place-items:center;
  font-size:.8rem; color:#fff3e6;
  background:radial-gradient(circle at 35% 30%,#e8a24f,#c9752a);
  box-shadow:0 3px 8px rgba(0,0,0,.3);
}

/* ── gift ───────────────────────────────────────────── */
.gift-area{ position:relative; width:100%; display:grid; place-items:center; min-height:210px; }
.gift{
  position:relative; width:min(44vw,160px); aspect-ratio:1/.94;
  background:none; border:0; padding:0; cursor:pointer;
  animation:floaty 4.6s ease-in-out infinite;
  transition:opacity .6s ease;
}
.gift-body{
  position:absolute; left:5%; right:5%; top:34%; bottom:0; border-radius:8px;
  background:linear-gradient(155deg,#7a2145 0%,#4d1129 62%,#3a0d20 100%);
  box-shadow:inset 0 -14px 26px rgba(0,0,0,.4),0 20px 34px -16px rgba(0,0,0,.85);
}
.gift-ribbon-v,.gift-ribbon-h{
  position:absolute; left:50%; top:0; bottom:0; width:19%; transform:translateX(-50%);
  background:linear-gradient(90deg,#e69a4c,#f8cd8f 45%,#df8a3c);
}
.gift-lid{
  position:absolute; left:0; right:0; top:18%; height:17%; border-radius:7px;
  background:linear-gradient(155deg,#8c2850,#5c1636);
  box-shadow:0 6px 14px -6px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,200,160,.14);
  transform-origin:6% 100%; transition:transform .85s cubic-bezier(.34,1.28,.5,1);
}
.gift-bow{ position:absolute; left:50%; top:-58%; width:56%; height:62%; transform:translateX(-50%); }
.gift-bow i{
  position:absolute; bottom:0; width:52%; height:100%;
  background:linear-gradient(160deg,#f8cd8f,#df8a3c);
  border-radius:60% 60% 40% 40% / 70% 70% 30% 30%;
}
.gift-bow i:first-child{ left:0; transform:rotate(-26deg); transform-origin:100% 100%; }
.gift-bow i:last-child{ right:0; transform:rotate(26deg); transform-origin:0 100%; }
.gift-beam{
  position:absolute; left:50%; top:34%; width:120%; height:120%;
  transform:translate(-50%,-42%) scale(.4);
  background:radial-gradient(ellipse at 50% 60%,rgba(255,206,140,.75) 0%,rgba(255,170,90,.28) 34%,transparent 66%);
  opacity:0; filter:blur(6px); pointer-events:none;
  transition:opacity .6s ease,transform .9s var(--ease);
}
.gift.shake{ animation:shake .55s ease-in-out 2; }
@keyframes shake{ 0%,100%{transform:translateX(0) rotate(0)} 20%{transform:translateX(-5px) rotate(-3deg)} 45%{transform:translateX(5px) rotate(3deg)} 70%{transform:translateX(-3px) rotate(-2deg)} }
.gift.open{ animation:none; }
.gift.open .gift-lid{ transform:translate(-16%,-70%) rotate(-28deg); }
.gift.open .gift-beam{ opacity:1; transform:translate(-50%,-52%) scale(1); }
.gift.gone{ opacity:0; pointer-events:none; }

.pop{
  position:absolute; left:50%; bottom:16%; width:min(66vw,250px);
  transform:translateX(-50%); opacity:0; pointer-events:none;
}
.pop img{
  display:block; width:100%; max-height:34dvh; object-fit:contain;
  filter:drop-shadow(0 20px 26px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,182,110,.28));
}
.pop .pop-fallback{ display:none; font-size:min(28vw,110px); line-height:1; }
.pop.fallback img{ display:none; }
.pop.fallback .pop-fallback{ display:block; }
.pop.shown{ animation:popout 1.15s cubic-bezier(.2,1.15,.35,1) forwards; }
@keyframes popout{
  0%{opacity:0;transform:translate(-50%,46%) scale(.32)}
  55%{opacity:1;transform:translate(-50%,-8%) scale(1.06)}
  100%{opacity:1;transform:translate(-50%,0) scale(1)}
}
.pop.shown.settled{ animation:popfloat 4.2s ease-in-out infinite; }
@keyframes popfloat{
  0%,100%{opacity:1;transform:translate(-50%,0) scale(1)}
  50%{opacity:1;transform:translate(-50%,-10px) scale(1.012)}
}

.tap-hint{ font-size:.85rem !important; color:var(--cream-faint) !important; letter-spacing:.06em; }
.tap-hint.fade{ opacity:0; transition:opacity .5s ease; }

.joke{
  font-family:var(--serif); font-weight:700; font-style:italic;
  font-size:clamp(1.3rem,6vw,1.75rem); color:var(--gold-soft);
  text-shadow:0 0 26px rgba(242,174,86,.35),0 2px 10px rgba(0,0,0,.5);
  opacity:0; transform:translateY(14px) scale(.94);
  transition:opacity .8s ease,transform .8s var(--ease);
}
.joke.in{ opacity:1; transform:none; }

/* ── finale ─────────────────────────────────────────── */
.hb{
  display:flex; flex-direction:column; align-items:center;
  font-family:var(--serif); font-weight:700; letter-spacing:.045em; line-height:1;
  color:#fff6e9;
  text-shadow:0 0 34px rgba(255,198,140,.34),0 3px 14px rgba(0,0,0,.55);
  opacity:0; transform:scale(.8);
}
.hb span{ font-size:clamp(2.05rem,11.4vw,3.3rem); }
.hb.pop-in{ animation:hbpop 1.05s cubic-bezier(.18,.9,.3,1.02) forwards; }
@keyframes hbpop{
  0%{opacity:0;transform:scale(.78);filter:blur(6px)}
  62%{opacity:1;transform:scale(1.045);filter:blur(0)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
.hb-name{ font-size:clamp(2.3rem,12.5vw,3.4rem); margin-top:.05em; opacity:0; transition:opacity .8s ease; }
.hb-name.in{ opacity:1; }

.sound-toggle{
  position:fixed; z-index:6; right:calc(14px + env(safe-area-inset-right,0px));
  bottom:calc(14px + var(--safeB));
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  font-size:1rem; cursor:pointer; color:var(--cream-dim); background:rgba(30,10,26,.5);
  border:1px solid rgba(251,238,221,.16); backdrop-filter:blur(6px);
}

/* ── small screens ──────────────────────────────────── */
@media (max-height:720px){
  .stack{ gap:12px; }
  .cake-stage{ width:min(62vw,230px); }
  .balloon-field{ height:min(28dvh,190px); }
  .letter{ max-height:52dvh; padding:18px 16px 24px; }
  .polaroid{ flex-basis:140px; }
  .lane{ padding-left:calc(50vw - 70px); padding-right:calc(50vw - 70px); }
}
@media (max-height:600px){
  .cake-stage{ width:min(52vw,190px); }
  .balloon,.balloon .bulb{ width:44px; }
  .balloon .bulb{ height:54px; }
}

@media (prefers-reduced-motion:reduce){
  .backdrop .glow,.gift,.envelope,.balloon,.bulbs span,.pop.shown.settled,.lane{ animation:none !important; }
  .flame{ animation:none !important; }
  .scene{ transition-duration:.35s; filter:none; transform:none; }
  .line,.reveal{ transition-duration:.35s; }
}

.env-head{ transition:opacity .5s ease; }
.env-head.fade{ opacity:0; }

/* balloons: keep the field anchored so popped-in reason cards grow downward
   instead of nudging the remaining balloons out from under your finger */
#s-balloons{ align-items:start; }
#s-balloons .stack{ padding-top:2vh; }