/* =========================================================
   💗  HER BIRTHDAY — v2 · gate → bloom → cute world
   ========================================================= */

:root{
  --blush:#ffe0ec; --rose:#ff6fa5; --rose-2:#ff7eb0; --straw:#ff9ec4; --straw-2:#ff7eb0;
  --plum:#b23a72; --cherry:#ff4f7e; --gold:#ffd66b; --lilac:#ece1ff; --mint:#d6f5e6;
  --ink:#6b2b4a; --ink-soft:#9a5a74; --cream:#fff6ef;
  /* gate (subtle) */
  --linen:#faf6f1; --linen-2:#f1ebe3; --gate-ink:#4a4440; --gate-soft:#9c948b;

  --r:24px;
  --shadow-out:8px 10px 24px rgba(180,70,120,.18);
  --shadow-in:inset -3px -3px 8px rgba(255,255,255,.65), inset 3px 4px 9px rgba(180,70,120,.16);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --smooth:cubic-bezier(.22,1,.36,1);
  --f-cute:'Fredoka',system-ui,sans-serif;
  --f-hand:'Caveat',cursive;
  --f-body:'Nunito',system-ui,sans-serif;
  --f-serif:'Fraunces',Georgia,serif;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; overflow-x:clip; }   /* clip (not hidden) — hidden breaks position:sticky (the galaxy pin) */
body{
  font-family:var(--f-body); color:var(--ink); min-height:100vh; overflow-x:clip;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background:linear-gradient(165deg,#fff4f8,#ffe9f2 45%,#f3ecff);
}
body.locked{ overflow:hidden; height:100vh; }
img{ max-width:100%; }

/* =========================================================
   DREAMY LIVING BACKGROUND
   ========================================================= */
.bg{ position:fixed; inset:0; z-index:0; overflow:hidden; }
.bg-blob{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; will-change:transform; }
.b1{ width:60vmax; height:60vmax; left:-20vmax; top:-15vmax; background:radial-gradient(circle,#ffd6e8,transparent 70%); animation:drift1 22s ease-in-out infinite; }
.b2{ width:55vmax; height:55vmax; right:-18vmax; top:-10vmax; background:radial-gradient(circle,#e3d4ff,transparent 70%); animation:drift2 26s ease-in-out infinite; }
.b3{ width:65vmax; height:65vmax; left:-15vmax; bottom:-25vmax; background:radial-gradient(circle,#ffe8d6,transparent 70%); animation:drift3 28s ease-in-out infinite; }
.b4{ width:50vmax; height:50vmax; right:-15vmax; bottom:-20vmax; background:radial-gradient(circle,#d6f5e6,transparent 70%); animation:drift1 30s ease-in-out infinite reverse; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vmax,4vmax) scale(1.12);} }
@keyframes drift2{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vmax,5vmax) scale(1.1);} }
@keyframes drift3{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(4vmax,-5vmax) scale(1.14);} }

.petals{ position:absolute; inset:0; pointer-events:none; }
.petal{ position:absolute; top:-8vh; width:14px; height:18px;
  background:linear-gradient(160deg,#fff,#ff9ec4); border-radius:100% 0 100% 0/100% 0 100% 0;
  opacity:0; animation:petalFall linear infinite; will-change:transform; }
@keyframes petalFall{
  0%{ transform:translateY(-8vh) translateX(0) rotate(0); opacity:0; }
  10%{ opacity:.9; }
  35%{ transform:translateY(28vh) translateX(26px) rotate(70deg); }
  65%{ transform:translateY(62vh) translateX(-22px) rotate(170deg); }
  90%{ opacity:.85; }
  100%{ transform:translateY(112vh) translateX(18px) rotate(320deg); opacity:0; }
}
#fx{ position:fixed; inset:0; z-index:99; pointer-events:none; }

/* =========================================================
   CLAY BUTTON
   ========================================================= */
.clay-btn{
  font-family:var(--f-cute); font-weight:600; font-size:18px; color:#fff; border:none; cursor:pointer;
  padding:15px 30px; border-radius:30px; background:linear-gradient(180deg,var(--straw),var(--straw-2));
  box-shadow:6px 8px 18px rgba(255,110,165,.4), inset -2px -3px 6px rgba(200,40,110,.32), inset 2px 3px 7px rgba(255,255,255,.55);
  transition:transform .18s var(--spring); touch-action:manipulation;
}
.clay-btn:active{ transform:scale(.93); }
.clay-btn.ghost{ color:var(--plum); background:linear-gradient(180deg,#fff,#ffeef5);
  box-shadow:6px 8px 18px rgba(255,110,165,.25), inset -2px -3px 6px rgba(255,170,200,.4), inset 2px 3px 7px rgba(255,255,255,.8); }

/* =========================================================
   1) THE GATE — subtle & elegant
   ========================================================= */
.gate{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:28px; text-align:center; overflow:hidden;
  background:linear-gradient(160deg,#ffe9f3 0%,#f1e6ff 50%,#ffeede 100%);
  transition:opacity 1s var(--smooth), visibility 1s;
}
.gate.gone{ opacity:0; visibility:hidden; }
/* drifting romantic aurora behind the frosted glass */
.gate-aura{ position:absolute; inset:-25%; z-index:0; filter:blur(64px); }
.gate-aura span{ position:absolute; border-radius:50%; opacity:.7; }
.gate-aura span:nth-child(1){ width:52vmax; height:52vmax; left:-12vmax; top:-10vmax; background:radial-gradient(circle,#ffaed4,transparent 70%); animation:auroraA 16s ease-in-out infinite; }
.gate-aura span:nth-child(2){ width:48vmax; height:48vmax; right:-14vmax; top:2vmax; background:radial-gradient(circle,#c4adff,transparent 70%); animation:auroraB 19s ease-in-out infinite; }
.gate-aura span:nth-child(3){ width:56vmax; height:56vmax; left:18vmax; bottom:-24vmax; background:radial-gradient(circle,#ffd0ac,transparent 70%); animation:auroraA 23s ease-in-out infinite reverse; }
@keyframes auroraA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(6vmax,4vmax) scale(1.16);} }
@keyframes auroraB{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-5vmax,6vmax) scale(1.12);} }
.gate-sparkles{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.gate-spark{ position:absolute; color:#fff; opacity:0; text-shadow:0 0 6px rgba(255,255,255,.9); animation:sparkle linear infinite; }
@keyframes sparkle{ 0%{ opacity:0; transform:translateY(14px) scale(.5);} 25%{ opacity:.95;} 75%{ opacity:.95;} 100%{ opacity:0; transform:translateY(-34px) scale(1.05);} }

.gate-card{
  position:relative; z-index:2; max-width:382px; width:100%; padding:42px 30px 36px; border-radius:34px;
  background:linear-gradient(160deg, rgba(255,255,255,.58), rgba(255,255,255,.26));
  backdrop-filter:blur(24px) saturate(1.35); -webkit-backdrop-filter:blur(24px) saturate(1.35);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 28px 70px rgba(150,80,140,.24), inset 0 1px 1px rgba(255,255,255,.8);
  animation:gateIn 1.1s var(--spring) both;
}
@keyframes gateIn{ 0%{ opacity:0; transform:translateY(28px) scale(.93);} 100%{ opacity:1; transform:none;} }
.gate-mark{ width:62px; height:62px; margin:0 auto 22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#ff5d8f; background:linear-gradient(180deg,#fff,#ffe6f0);
  box-shadow:0 12px 26px rgba(255,110,165,.32), inset 0 1px 2px rgba(255,255,255,.9);
  animation:markGlow 2.6s ease-in-out infinite; }
@keyframes markGlow{ 0%,100%{ box-shadow:0 12px 26px rgba(255,110,165,.32), 0 0 0 0 rgba(255,126,176,.45);} 50%{ box-shadow:0 12px 26px rgba(255,110,165,.32), 0 0 0 13px rgba(255,126,176,0);} }
.gate-title{ font-family:var(--f-serif); font-weight:400; font-size:clamp(24px,6.4vw,31px); line-height:1.26; color:#4a3a44; letter-spacing:.2px; }
.gate-note{ font-family:var(--f-serif); font-style:italic; font-weight:300; font-size:16px; color:#8a6b7a; margin-top:12px; }
.gate-form{ display:flex; gap:10px; margin:26px auto 0; max-width:330px; }
.gate-input{
  flex:1; min-width:0; font-family:var(--f-body); font-size:16px; color:#4a3a44;
  padding:15px 18px; border:1px solid rgba(255,255,255,.7); border-radius:16px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(6px); outline:none;
  transition:border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.gate-input::placeholder{ color:#b294a4; }
.gate-input:focus{ border-color:#ff8fb6; box-shadow:0 0 0 4px rgba(255,143,182,.18); background:rgba(255,255,255,.72); }
.gate-go{ flex:none; width:54px; border:none; border-radius:16px; cursor:pointer; color:#fff;
  background:linear-gradient(180deg,var(--straw),var(--rose)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(255,110,165,.42); transition:transform .2s var(--spring); }
.gate-go:active{ transform:scale(.92); }
.gate-hint{ font-family:var(--f-body); font-size:13px; color:#9a7d8b; margin-top:16px; }
.gate-err{ font-family:var(--f-body); font-size:14px; color:#c0526e; margin-top:10px; }
.gate-form.shake{ animation:shake .4s ease; }
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }

/* bloom transition */
.bloom{
  position:fixed; z-index:98; left:50%; top:50%; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #ffd9ea 0%, #ff9ec4 45%, #ff7eb0 100%);
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
}
.bloom.go{ animation:bloomOut 1.1s var(--smooth) forwards; }
.bloom.fade{ opacity:0 !important; transition:opacity .8s ease; }
@keyframes bloomOut{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:1; } 100%{ transform:translate(-50%,-50%) scale(280); opacity:1; } }

/* =========================================================
   2) STAGE & SCENES
   ========================================================= */
.stage{ position:fixed; inset:0; z-index:40; overflow:hidden; }
.scene{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; padding:30px 22px calc(30px + env(safe-area-inset-bottom)); text-align:center;
  opacity:0; visibility:hidden; transform:scale(1.05); transition:opacity .6s var(--smooth), transform .7s var(--smooth), visibility .6s; }
.scene--on{ opacity:1; visibility:visible; transform:none; }
.scene--out{ opacity:0; transform:scale(.9); }

.greet-text{ font-family:var(--f-cute); font-weight:600; font-size:clamp(26px,7vw,38px); line-height:1.3; color:var(--plum); max-width:520px; min-height:1.3em; }
.scene-hint{ font-family:var(--f-cute); font-weight:600; font-size:23px; color:var(--plum); }
.scene-sub{ font-family:var(--f-hand); font-size:22px; color:var(--ink-soft); }

/* =========================================================
   THE BLOOMING FLOWER (the opening surprise — petals bloom open)
   ========================================================= */
.flower{ position:relative; width:220px; height:220px; cursor:pointer; touch-action:manipulation; }
.flower.wiggle{ animation:flowerSway 3.4s ease-in-out infinite; }
.flower--sm{ width:158px; height:158px; margin:6px auto; }
.flower-glow{ position:absolute; left:50%; top:50%; width:150px; height:150px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,180,215,.6), rgba(255,150,200,.22) 55%, transparent 72%); filter:blur(9px); animation:pulse 2.6s ease-in-out infinite; }
.flower.open .flower-glow{ animation:none; opacity:.95; transform:translate(-50%,-50%) scale(1.5); transition:transform 1s var(--spring); }
/* leaves */
.fleaf{ position:absolute; left:50%; bottom:34px; width:38px; height:20px; border-radius:0 80% 0 80%;
  background:linear-gradient(120deg,#a6e0a0,#6fc06a); box-shadow:inset 2px 2px 4px rgba(255,255,255,.4);
  transform-origin:left center; opacity:0; transition:opacity .5s ease .25s, transform .9s var(--spring) .25s; z-index:0; }
.fleaf--l{ transform:translateX(-2px) rotate(20deg) scale(.3); }
.fleaf--r{ transform:translateX(-2px) rotate(-20deg) scaleX(-1) scale(.3); }
.flower.open .fleaf{ opacity:.95; }
.flower.open .fleaf--l{ transform:translateX(-34px) rotate(18deg) scale(1); }
.flower.open .fleaf--r{ transform:translateX(30px) rotate(-18deg) scaleX(-1) scale(1); }
/* petals — fold into a bud, then bloom open */
.fpetal{ position:absolute; left:50%; top:50%; width:66px; height:94px;
  border-radius:50% 50% 48% 48% / 66% 66% 34% 34%;
  background:linear-gradient(180deg,#fff2f8 0%,#ffb0d2 52%,#ff7eb0 100%);
  box-shadow:inset -5px -8px 15px rgba(220,90,140,.22), inset 5px 8px 15px rgba(255,255,255,.6);
  transform-origin:50% 100%;
  transform:translate(-50%,-100%) rotate(var(--a)) scale(.16);
  transition:transform 1s var(--spring); opacity:.97; z-index:1; }
.flower--sm .fpetal{ width:48px; height:68px; }
.flower.open .fpetal{ transform:translate(-50%,-100%) rotate(var(--a)) scale(1); }
.flower .fpetal:nth-child(4){ transition-delay:.02s; } .flower .fpetal:nth-child(5){ transition-delay:.07s; }
.flower .fpetal:nth-child(6){ transition-delay:.12s; } .flower .fpetal:nth-child(7){ transition-delay:.17s; }
.flower .fpetal:nth-child(8){ transition-delay:.22s; } .flower .fpetal:nth-child(9){ transition-delay:.27s; }
.flower-core{ position:absolute; left:50%; top:50%; width:54px; height:54px; transform:translate(-50%,-50%); border-radius:50%; z-index:3;
  background:radial-gradient(circle at 40% 34%, #fff7d6, #ffd66b 68%, #ffc24d); box-shadow:0 0 20px rgba(255,205,90,.75), inset -3px -3px 8px rgba(210,150,30,.4); }
.flower--sm .flower-core{ width:40px; height:40px; }
.flower-core span{ position:absolute; inset:0; border-radius:50%; animation:corePulse 2.2s ease-in-out infinite; }
.flower.open .flower-core{ width:44px; height:44px; transition:width .6s var(--spring), height .6s var(--spring); }
.flower-tap{ position:absolute; left:50%; top:50%; width:66px; height:66px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.9); animation:ripple 2s ease-out infinite; pointer-events:none; z-index:4; }
.flower.open .flower-tap{ display:none; }
.flower.open.wiggle{ animation:none; }
@keyframes flowerSway{ 0%,100%{ transform:rotate(0) translateY(0);} 25%{ transform:rotate(-4deg) translateY(-4px);} 75%{ transform:rotate(4deg) translateY(-4px);} }
@keyframes corePulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(255,214,107,.55);} 50%{ box-shadow:0 0 0 11px rgba(255,214,107,0);} }
@keyframes ripple{ 0%{ transform:translate(-50%,-50%) scale(.6); opacity:.8; } 100%{ transform:translate(-50%,-50%) scale(2); opacity:0; } }

/* =========================================================
   TEDDY BEAR (celebration + card decoration)
   ========================================================= */
.teddy{ position:relative; display:inline-block; width:74px; height:68px; }
.t-head{ position:absolute; left:50%; top:13px; transform:translateX(-50%); width:54px; height:50px; border-radius:50%;
  background:radial-gradient(circle at 42% 36%, #f1cb9c, #d49a66); box-shadow:inset -4px -5px 10px rgba(150,95,45,.32), inset 3px 3px 8px rgba(255,240,220,.5); z-index:2; }
.t-ear{ position:absolute; top:2px; width:27px; height:27px; border-radius:50%; background:radial-gradient(circle at 40% 35%,#ecc191,#cf9560); z-index:1; }
.t-ear--l{ left:5px; } .t-ear--r{ right:5px; }
.t-ear::after{ content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; background:#ffc2d8; }
.t-eye{ position:absolute; top:31px; width:7px; height:9px; border-radius:50%; background:#4a3326; z-index:3; }
.t-eye--l{ left:24px; } .t-eye--r{ right:24px; }
.t-muzzle{ position:absolute; left:50%; top:38px; transform:translateX(-50%); width:28px; height:21px; border-radius:50%; background:#fbe7d2; z-index:3; }
.t-nose{ position:absolute; left:50%; top:40px; transform:translateX(-50%); width:10px; height:7px; border-radius:50%; background:#7a4a32; z-index:4; }
.t-cheek{ position:absolute; top:41px; width:10px; height:7px; border-radius:50%; background:rgba(255,150,180,.6); z-index:3; }
.t-cheek--l{ left:13px; } .t-cheek--r{ right:13px; }
.t-heart{ position:absolute; left:50%; bottom:-4px; transform:translateX(-50%); font-size:18px; z-index:5; }
.teddy.floater{ position:fixed; bottom:-130px; z-index:97; animation:floatUp ease-in forwards; }

/* =========================================================
   THE CAKE (upgraded — gloss, frosting pearls, decorations)
   ========================================================= */
.cake-title{ font-family:var(--f-cute); font-weight:700; font-size:30px; color:var(--plum); }
.cake-stage{ position:relative; width:270px; height:290px; display:flex; align-items:flex-end; justify-content:center; transition:transform .9s var(--spring); }
.cake-stage.zoom{ transform:scale(1.18); }
.cake{ position:relative; width:248px; height:268px; animation:cakeBob 3.6s var(--smooth) infinite; transform-origin:bottom center; transition:transform .9s var(--spring), opacity .8s ease; }
.cake.down{ transform:translateY(120px) scale(.7); opacity:0; }
.cake-aura{ position:absolute; left:50%; top:-4px; transform:translateX(-50%); width:180px; height:130px; border-radius:50%;
  background:radial-gradient(ellipse at center top, rgba(255,205,95,.55), rgba(255,160,80,.16) 55%, transparent 72%); filter:blur(5px); animation:auraPulse 2.4s ease-in-out infinite; z-index:0; }
.cake.out .cake-aura{ opacity:0; transition:opacity .5s ease; }

.tier{ position:absolute; left:50%; transform:translateX(-50%); }
.tier-face{ position:absolute; inset:0; border-radius:0 0 28px 28px/0 0 18px 18px; overflow:hidden;
  box-shadow:inset -12px 0 18px rgba(180,60,110,.22), inset 12px 0 18px rgba(255,255,255,.35), 6px 8px 16px rgba(180,70,120,.18); }
.tier-gloss{ position:absolute; left:8%; top:24%; width:36%; height:50%; border-radius:50%; background:radial-gradient(ellipse,rgba(255,255,255,.5),transparent 70%); filter:blur(2px); pointer-events:none; }
.tier-top-cap{ position:absolute; left:0; right:0; top:-12px; height:28px; border-radius:50%; box-shadow:inset 0 3px 6px rgba(255,255,255,.7), inset 0 -3px 6px rgba(180,60,110,.18); }
/* frosting: scalloped drips + a row of pearls */
.frost{ position:absolute; left:-2px; right:-2px; top:4px; height:18px;
  background:radial-gradient(circle at 10px 18px, #fff7fb 10px, transparent 11px) repeat-x; background-size:20px 18px;
  filter:drop-shadow(0 3px 2px rgba(180,70,120,.12)); }
.frost::before{ content:''; position:absolute; left:6px; right:6px; top:-6px; height:8px;
  background:radial-gradient(circle at 6px 4px, #fff 3px, transparent 4px) repeat-x; background-size:12px 8px; opacity:.95; }
.tier-bot{ width:210px; height:80px; bottom:30px; }
.tier-bot .tier-face{ background:linear-gradient(180deg,#ff9ec4,#ff7aae); }
.tier-bot .tier-top-cap{ background:linear-gradient(180deg,#fff,#ffe3ef); }
.tier-mid{ width:166px; height:66px; bottom:96px; }
.tier-mid .tier-face{ background:linear-gradient(180deg,#ffc9a8,#ffb088); }
.tier-mid .tier-top-cap{ background:linear-gradient(180deg,#fff,#ffeede); }
.tier-top{ width:126px; height:58px; bottom:154px; }
.tier-top .tier-face{ background:linear-gradient(180deg,#fff0d6,#ffe1b0); }
.tier-top .tier-top-cap{ background:linear-gradient(180deg,#fff,#fff2df); }

.cherry{ position:absolute; left:50%; top:-32px; transform:translateX(-50%); width:24px; height:24px; z-index:4; }
.cherry span{ position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 32% 28%,#ff8aa6,#ff3d68 60%,#d61e4c); box-shadow:inset -2px -2px 4px rgba(150,10,50,.5); }
.cherry span::after{ content:''; position:absolute; left:5px; top:4px; width:7px; height:6px; border-radius:50%; background:rgba(255,255,255,.9); }
.cherry::before{ content:''; position:absolute; left:50%; top:-11px; width:3px; height:13px; background:#7aa54a; border-radius:2px; transform:translateX(-50%) rotate(12deg); }

.cake-plate{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); width:236px; height:24px; border-radius:50%;
  background:linear-gradient(180deg,#ffe9f1,#f6c9da); box-shadow:6px 9px 18px rgba(180,70,120,.25), inset 0 3px 6px rgba(255,255,255,.7); }

.deco{ position:absolute; font-size:11px; pointer-events:none; z-index:2; }
.sprinkle{ position:absolute; width:7px; height:3px; border-radius:3px; opacity:.92; z-index:2; }

.candles{ position:absolute; left:0; right:0; bottom:200px; height:66px; z-index:5; }
.candle{ position:absolute; bottom:0; width:9px; height:44px; border-radius:5px; background:repeating-linear-gradient(48deg,#ff8fb6 0 7px,#fff 7px 14px); box-shadow:inset -2px 0 3px rgba(190,60,110,.35), inset 2px 0 3px rgba(255,255,255,.6); transform-origin:bottom center; }
.candle .wick{ position:absolute; left:50%; top:-5px; transform:translateX(-50%); width:2px; height:6px; background:#5a3a2a; border-radius:2px; }
.flame-wrap{ position:absolute; left:50%; top:-27px; transform:translateX(-50%); width:18px; height:28px; }
.flame-glow{ position:absolute; left:50%; top:6px; transform:translateX(-50%); width:30px; height:34px; border-radius:50%; background:radial-gradient(circle,rgba(255,196,90,.85),rgba(255,150,60,.32) 55%,transparent 72%); filter:blur(2px); animation:glowPulse 1.1s ease-in-out infinite; }
.flame{ position:absolute; left:50%; top:0; transform:translateX(-50%); width:15px; height:24px; border-radius:50% 50% 50% 50%/62% 62% 40% 40%; background:linear-gradient(180deg,#fff3b0 4%,#ffd24d 38%,#ff8a2b 72%,#ff5a3c 100%); box-shadow:0 0 14px 3px rgba(255,170,70,.7); transform-origin:bottom center; animation:flicker .26s ease-in-out infinite alternate; }
.flame-core{ position:absolute; left:50%; bottom:2px; transform:translateX(-50%); width:7px; height:12px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:linear-gradient(180deg,#fffbe6,#ffe27a); opacity:.95; }
.cake.out .flame-wrap{ animation:flameOut .45s var(--smooth) forwards; }
.smoke{ position:absolute; left:50%; top:-14px; width:8px; height:8px; border-radius:50%; background:rgba(150,150,160,.5); transform:translateX(-50%); filter:blur(2px); animation:smoke 1.1s ease-out forwards; }

@keyframes cakeBob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-7px);} }
@keyframes auraPulse{ 0%,100%{opacity:.7; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.08);} }
@keyframes glowPulse{ 0%,100%{opacity:.75; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.12);} }
@keyframes flicker{ 0%{ transform:translateX(-50%) scaleY(1) skewX(-3deg);} 100%{ transform:translateX(-52%) scaleY(1.12) skewX(4deg);} }
@keyframes flameOut{ 0%{opacity:1; transform:translateX(-50%) scaleY(1);} 60%{opacity:.7; transform:translate(-50%,-4px) scaleY(.3) scaleX(1.3);} 100%{opacity:0; transform:translate(-50%,-10px) scaleY(.05);} }
@keyframes smoke{ 0%{opacity:.6; transform:translate(-50%,0) scale(.6);} 100%{opacity:0; transform:translate(-50%,-46px) scale(2.4);} }

/* balloons (injected on celebrate) */
.balloon{ position:fixed; bottom:-120px; width:46px; height:58px; border-radius:50% 50% 50% 50%/45% 45% 55% 55%; z-index:97; animation:floatUp ease-in forwards; }
.balloon::after{ content:''; position:absolute; left:50%; bottom:-40px; width:1px; height:40px; background:rgba(180,120,150,.5); transform:translateX(-50%); }
@keyframes floatUp{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 12%{ opacity:1; } 100%{ transform:translateY(-118vh) translateX(20px); opacity:0; } }

/* blow ui */
/* the blow prompt floats ABOVE the cake (absolute, so it never shifts the cake) */
.cake-prompt{ position:absolute; top:23vh; left:0; right:0; z-index:4; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 24px; text-align:center;
  opacity:0; transform:translateY(-12px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.9,.3,1); pointer-events:none; }
.cake-prompt.show{ opacity:1; transform:none; pointer-events:auto; }
.cake-prompt .cake-title{ color:#fff; text-shadow:0 2px 18px rgba(70,24,54,.55); display:flex; flex-direction:column; align-items:center; gap:2px; }
.cake-prompt .bt-line1{ font-size:min(7.7vw,31px); letter-spacing:.06em; text-transform:uppercase; color:#fff; }
.cake-prompt .bt-line2{ font-size:clamp(51px,14.3vw,70px); font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:#fff; }
.cake-prompt .blow-hint{ color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(70,24,54,.5); }
.cake-prompt .blow-tap{ color:#fff; opacity:.9; }
.cake-prompt .blow-meter{ display:block; margin:16px auto 0; width:min(58vw,210px); height:14px; }
.blow-mic{ width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; background:linear-gradient(180deg,var(--straw),var(--straw-2)); box-shadow:6px 7px 16px rgba(255,110,165,.4), inset -2px -3px 6px rgba(200,40,110,.3), inset 2px 3px 6px rgba(255,255,255,.5); transition:transform .15s var(--spring); }
.blow-mic.live{ animation:micPulse 1s ease-in-out infinite; }
@keyframes micPulse{ 0%,100%{ transform:scale(1); box-shadow:6px 7px 16px rgba(255,110,165,.4), 0 0 0 0 rgba(255,126,176,.5);} 50%{ transform:scale(1.06); box-shadow:6px 7px 16px rgba(255,110,165,.4), 0 0 0 14px rgba(255,126,176,0);} }
.blow-hint{ font-family:var(--f-cute); font-weight:500; font-size:18px; color:var(--ink-soft); }
.blow-meter{ width:170px; height:12px; border-radius:8px; background:#ffe1ec; overflow:hidden; box-shadow:var(--shadow-in); }
.blow-meter span{ display:block; height:100%; width:0%; border-radius:8px; background:linear-gradient(90deg,#ffd66b,#ff7aae); transition:width .08s linear; }
.blow-tap{ font-family:var(--f-cute); font-size:16px; color:var(--plum); background:none; border:none; text-decoration:underline; cursor:pointer; padding:8px; }

.blown-card{ position:absolute; left:50%; top:50%; transform:translate(-50%,-46%) scale(.6);
  background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,240,247,.62)); backdrop-filter:blur(18px) saturate(1.3); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(255,255,255,.7); border-radius:34px; padding:46px 26px 30px; max-width:340px; width:90%;
  box-shadow:0 26px 64px rgba(180,70,120,.28), inset 0 1px 1px rgba(255,255,255,.8);
  opacity:0; visibility:hidden; transition:opacity .6s var(--smooth), transform .7s var(--spring), visibility .6s; }
.blown-card.show{ opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1); }
.blown-deco{ position:absolute; left:50%; top:-40px; transform:translateX(-50%); }
.blown-deco .teddy{ transform:scale(1.15); animation:teddyBob 2.2s ease-in-out infinite; filter:drop-shadow(0 8px 14px rgba(180,90,130,.3)); }
@keyframes teddyBob{ 0%,100%{ transform:scale(1.15) translateY(0) rotate(-3deg);} 50%{ transform:scale(1.15) translateY(-6px) rotate(3deg);} }
.blown-title{ display:flex; flex-direction:column; align-items:center; gap:2px; margin-bottom:12px; }
.bt-hb{ font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:clamp(18px,5vw,23px); color:var(--ink-soft); letter-spacing:.3px; }
.bt-name{ font-family:var(--f-cute); font-weight:700; line-height:1; font-size:clamp(40px,12vw,58px); letter-spacing:-.5px;
  background:linear-gradient(100deg,#ff8fb6,var(--cherry) 50%,#c46bff); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 4px 14px rgba(255,79,126,.35)); }
.blown-card p{ font-family:var(--f-hand); font-size:21px; line-height:1.35; color:var(--ink-soft); margin-bottom:22px; }

/* =========================================================
   3) JOURNEY
   ========================================================= */
.journey{ position:relative; z-index:10; padding-bottom:120px; }
.journey section{ padding:26px 20px; }   /* ONE uniform gap between every container */
/* content sits FLUSH to that padding — kill leaking heading/child margins so every gap is identical */
.journey section > :first-child{ margin-top:0 !important; }
.journey section > :last-child{ margin-bottom:0 !important; }
/* trailing empty feedback paragraphs (results shown only after interaction) must add no space at rest */
.journey section > p:empty:last-child{ margin:0 !important; }
/* the interactive wrappers keep their top breathing room but never leak a bottom margin into the gap */
.trick-wrap, .abyss-wrap, .contract-doc, .kisses-wrap{ margin-bottom:0 !important; }
.sec-title{ font-family:var(--f-cute); font-weight:700; text-align:center; font-size:clamp(30px,8.5vw,40px); color:var(--plum); line-height:1.05; }
.sec-sub{ text-align:center; font-family:var(--f-hand); font-size:21px; color:var(--ink-soft); margin:4px 0 30px; }
.reveal{ opacity:0; transform:translateY(46px) scale(.96); transition:opacity .7s var(--smooth), transform .8s var(--spring); }
.reveal.in{ opacity:1; transform:none; }

.j-hero{ min-height:auto; padding:12vh 20px 3vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.scroll-cue{ margin-top:18px !important; }
.hero-flourish{ display:flex; align-items:center; justify-content:center; gap:12px; color:var(--rose); font-size:13px; margin-bottom:12px; opacity:.85; }
.hero-flourish span{ display:block; width:36px; height:1px; background:linear-gradient(90deg, transparent, var(--rose)); }
.hero-flourish span:last-child{ background:linear-gradient(90deg, var(--rose), transparent); }
/* hero: "Happy Birthday" + her name — SAME font, SAME size, pink (matches the post-blow reveal) */
.hero-greeting{ font-family:var(--f-cute); font-weight:700; font-size:clamp(34px,9vw,52px); line-height:1.1; letter-spacing:0; color:#ff7eb0; }
.hero-name{ font-family:var(--f-cute); font-weight:700; line-height:1.1; margin-top:2px; max-width:100%; overflow-wrap:break-word;
  font-size:clamp(34px,9vw,52px); color:#ff7eb0; filter:drop-shadow(0 6px 18px rgba(255,111,165,.32)); }
.hero-sub{ max-width:420px; margin:18px auto 0; font-size:16px; line-height:1.65; color:var(--ink-soft); }
.day-chip{ margin-top:28px; padding:16px 26px; border-radius:26px; text-align:center; background:linear-gradient(180deg,#fff,#fff2f8); box-shadow:var(--shadow-out), var(--shadow-in); }
.dc-num{ display:block; font-family:var(--f-cute); font-weight:700; font-size:54px; color:var(--rose); line-height:1; }
.dc-label{ font-family:var(--f-hand); font-size:19px; color:var(--ink-soft); }
.scroll-cue{ margin-top:30px; font-family:var(--f-cute); font-size:13px; letter-spacing:.08em; color:var(--ink-soft); display:flex; flex-direction:column; align-items:center; gap:2px; animation:bobble 1.8s ease-in-out infinite; }
.scroll-cue i{ font-size:20px; color:var(--rose); font-style:normal; }

.note-card{ max-width:520px; margin:0 auto; padding:40px 26px 34px; position:relative; background:repeating-linear-gradient(transparent,transparent 33px,rgba(255,140,180,.18) 34px),linear-gradient(180deg,#fffdf7,#fff6fb); border-radius:26px; box-shadow:var(--shadow-out); }
.note-pin{ position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:34px; }
.letter-text{ font-family:var(--f-hand); font-size:25px; line-height:1.55; color:var(--ink); white-space:pre-wrap; }
.caret{ font-family:var(--f-hand); font-size:24px; color:var(--rose); animation:blink 1s steps(1) infinite; }

.timeline{ max-width:560px; margin:0 auto; position:relative; padding-left:8px; }
.timeline::before{ content:''; position:absolute; left:25px; top:8px; bottom:8px; width:4px; border-radius:4px; background:linear-gradient(var(--straw),var(--lilac)); }
.tl-item{ position:relative; padding:0 0 22px 64px; }
.tl-dot{ position:absolute; left:3px; top:0; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; background:linear-gradient(180deg,#fff,#ffeef5); box-shadow:var(--shadow-out), inset -2px -2px 5px rgba(255,170,200,.4), inset 2px 2px 6px rgba(255,255,255,.8); z-index:2; }
.tl-card{ background:linear-gradient(180deg,#fff,#fff4f9); border-radius:20px; padding:14px 18px; box-shadow:var(--shadow-out); }
.tl-title{ font-family:var(--f-cute); font-weight:700; font-size:19px; color:var(--rose); line-height:1.2; margin-bottom:2px; }
.tl-date{ font-family:var(--f-body); font-weight:600; font-size:14.5px; color:var(--rose); opacity:0.85; margin-bottom:4px; }
.tl-text{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin-top:3px; white-space:pre-line; }

/* a SWIPEABLE rail — she flicks through; native momentum, snaps to each photo */
.rail{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain;
  padding:6px 0 18px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rail::-webkit-scrollbar{ display:none; } .rail{ scrollbar-width:none; }
.rail-track{ display:flex; gap:18px; width:max-content; padding:0 9px; }
.polaroid{ width:224px; background:linear-gradient(180deg,#fff,#fff6fb); padding:13px 13px 0; border-radius:18px; box-shadow:var(--shadow-out); scroll-snap-align:center; flex:0 0 auto; }
.polaroid:nth-child(odd){ transform:rotate(-2deg); }
.polaroid:nth-child(even){ transform:rotate(2deg); }
.polaroid-img{ width:100%; height:224px; object-fit:cover; border-radius:12px; display:block; background:var(--blush); }
.polaroid-ph{ width:100%; height:224px; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--rose); background:repeating-linear-gradient(45deg,rgba(255,140,180,.1) 0 12px,transparent 12px 24px),linear-gradient(180deg,#ffe9f2,#f3e8ff); border:2px dashed rgba(255,110,165,.45); }
.polaroid-ph svg{ width:40px; height:40px; opacity:.8; }
.polaroid-ph span{ font-family:var(--f-cute); font-size:12px; }
.polaroid-cap{ font-family:var(--f-hand); font-size:20px; text-align:center; color:var(--ink); padding:10px 6px 14px; }

.audio-list{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.audio-card{ display:flex; align-items:center; gap:16px; background:linear-gradient(180deg,#fff,#fff4f9); border-radius:22px; padding:16px; box-shadow:var(--shadow-out); width:260px; flex:none; scroll-snap-align:center; }
.audio-play{ flex:none; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; color:#fff; font-size:20px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--straw),var(--straw-2)); box-shadow:5px 6px 14px rgba(255,110,165,.4), inset -2px -3px 6px rgba(200,40,110,.3), inset 2px 3px 6px rgba(255,255,255,.5); transition:transform .15s var(--spring); }
.audio-play:active{ transform:scale(.9); }
.audio-meta{ flex:1; min-width:0; }
.audio-title{ font-family:var(--f-cute); font-weight:500; font-size:17px; color:var(--ink); }
.audio-wave{ display:flex; align-items:flex-end; gap:3px; height:24px; }
.audio-wave span{ flex:1; height:30%; border-radius:3px; background:linear-gradient(var(--straw),var(--rose)); }
.audio-card.playing .audio-wave span{ animation:wave 1s ease-in-out infinite; }
.audio-wave span:nth-child(3n){ animation-delay:.15s; } .audio-wave span:nth-child(3n+1){ animation-delay:.3s; }
.audio-soon{ font-family:var(--f-hand); font-size:16px; color:var(--ink-soft); margin-top:4px; }

/* songs gallery */
.song-card{ scroll-snap-align:center; flex:none; width:320px; padding:20px; background:linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,245,250,0.85)); border-radius:24px; box-shadow:0 8px 24px rgba(150,60,110,0.12), inset 0 2px 6px rgba(255,255,255,0.8); border:1px solid rgba(255,230,240,0.6); display:flex; flex-direction:column; align-items:center; gap:16px; transform:translateY(0); transition:transform .3s var(--spring); }
.song-card:active{ transform:scale(0.98); }
.song-art{ position:relative; width:280px; height:280px; border-radius:18px; background:linear-gradient(135deg,#ffe0eb,#ffd0e0); display:flex; align-items:center; justify-content:center; font-size:64px; box-shadow:inset 0 4px 10px rgba(255,255,255,0.8), 0 8px 16px rgba(200,80,120,0.15); overflow:hidden; }
.song-img{ width:100%; height:100%; object-fit:cover; border-radius:18px; }
.song-art .audio-play{ position:absolute; bottom:-16px; right:-16px; transform:scale(0.85); box-shadow:0 6px 14px rgba(255,100,150,.4); }
.song-info{ width:100%; text-align:center; display:flex; flex-direction:column; gap:6px; }
.song-title{ font-family:var(--f-cute); font-weight:700; font-size:18px; color:#5a1f35; line-height:1.2; }
.song-artist{ font-family:var(--f-cute); font-weight:500; font-size:14px; color:var(--rose); opacity:0.85; line-height:1; }
.song-wave{ height:20px; width:60px; margin:4px auto 0; }
.song-card.playing .song-wave span{ animation:wave 1s ease-in-out infinite; }
.song-dedication{ font-family:var(--f-hand); font-size:17px; color:#a25f7a; line-height:1.3; padding-top:12px; border-top:1px dashed rgba(255,150,180,0.3); width:100%; }

.video-list{ display:flex; flex-direction:column; gap:20px; align-items:center; }
.video-card{ width:100%; max-width:420px; background:#fff; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-out); }
.video-card video{ width:100%; display:block; object-fit:cover; border-radius: 20px 20px 0 0; }
.video-ph{ width:100%; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--rose); background:repeating-linear-gradient(45deg,rgba(255,140,180,.1) 0 14px,transparent 14px 28px),linear-gradient(180deg,#ffe9f2,#f3e8ff); }
.video-ph svg{ width:46px; height:46px; opacity:.8; }
.video-ph span{ font-family:var(--f-cute); font-size:13px; }
.video-cap{ font-family:var(--f-hand); font-size:20px; text-align:center; padding:12px; color:var(--ink); }

/* open-when envelopes */
.ow-grid{ max-width:540px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ow{ position:relative; aspect-ratio:4/3; border-radius:18px; cursor:pointer; overflow:hidden; box-shadow:var(--shadow-out); background:linear-gradient(180deg,#fff,#fff2f8); transition:transform .2s var(--spring); touch-action:manipulation; }
.ow:active{ transform:scale(.96); }
.ow-env{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:8px; padding:12px; text-align:center; background:linear-gradient(180deg,#ffd9e6,#ff9ec4); transition:opacity .4s ease, transform .5s var(--spring); }
.ow-env .ow-seal{ font-size:26px; } .ow-env .ow-when{ font-family:var(--f-cute); font-weight:600; font-size:15px; color:var(--plum); line-height:1.2; }
.ow-note{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:16px; text-align:center; font-family:var(--f-hand); font-size:18px; line-height:1.35; color:var(--ink); opacity:0; transform:translateY(10px); transition:opacity .4s ease .15s, transform .5s var(--smooth) .15s; }
.ow.open .ow-env{ opacity:0; transform:translateY(-100%); }
.ow.open .ow-note{ opacity:1; transform:none; }

/* scratch */
.scratch-wrap{ position:relative; width:300px; max-width:86%; aspect-ratio:3/2; margin:0 auto; border-radius:22px; overflow:hidden; box-shadow:var(--shadow-out); background:linear-gradient(180deg,#fff,#fff2f8); }
.scratch-msg{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22px; text-align:center; font-family:var(--f-hand); font-size:24px; line-height:1.35; color:var(--cherry); }
.scratch-cv{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }

/* love meter */
.j-meter{ text-align:center; }
.meter-track{ position:relative; max-width:420px; margin:14px auto 22px; height:30px; border-radius:16px; background:#ffe1ec; overflow:hidden; box-shadow:var(--shadow-in); }
.meter-fill{ height:100%; width:0%; border-radius:16px; background:linear-gradient(90deg,#ffd66b,#ff7aae,#ff4f7e); transition:width .1s linear; }
.meter-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-cute); font-weight:600; font-size:15px; color:var(--plum); }
.meter-btn{ user-select:none; }
.meter-done{ font-family:var(--f-hand); font-size:22px; color:var(--rose); margin-top:18px; min-height:1.4em; }

/* quiz */
.quiz{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.q-card{ background:linear-gradient(180deg,#fff,#fff4f9); border-radius:22px; padding:20px; box-shadow:var(--shadow-out); }
.q-q{ font-family:var(--f-cute); font-weight:600; font-size:18px; color:var(--ink); margin-bottom:14px; }
.q-opts{ display:flex; flex-direction:column; gap:10px; }
.q-opt{ font-family:var(--f-body); font-weight:600; font-size:15px; color:var(--plum); text-align:left; padding:13px 16px; border:none; border-radius:14px; cursor:pointer; background:#ffeaf2; box-shadow:inset -2px -2px 5px rgba(255,255,255,.7), inset 2px 2px 5px rgba(255,170,200,.35); transition:transform .15s var(--spring), background .2s ease; touch-action:manipulation; }
.q-opt:active{ transform:scale(.97); }
.q-opt.right{ background:linear-gradient(180deg,#bff0d2,#8fe3b3); color:#1f7a4d; }
.q-opt.wrong{ background:#ffd6df; color:#b23a55; }
.q-yay{ font-family:var(--f-hand); font-size:20px; color:var(--rose); margin-top:12px; min-height:1.3em; opacity:0; transition:opacity .4s ease; }
.q-yay.show{ opacity:1; }
.q-yay.nope{ color:#c46a86; }

.reasons{ max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:6px; }
.reason{ position:relative; background:linear-gradient(180deg,var(--straw),var(--straw-2)); color:#fff; border-radius:16px; padding:12px 16px; cursor:pointer; box-shadow:var(--shadow-out); display:flex; align-items:center; gap:14px; transition:transform .2s var(--spring), background .3s ease; touch-action:manipulation; }
.reason .r-heart{ font-size:24px; flex:none; transition:transform .4s var(--spring); }
.reason .r-text{ font-family:var(--f-hand); font-size:21px; line-height:1.3; max-height:0; opacity:0; overflow:hidden; transition:max-height .4s var(--smooth), opacity .3s ease; }
.reason .r-tap{ position:absolute; left:0; top:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-family:var(--f-hand); font-size:24px; color:#fff; opacity:.95; text-align:center; pointer-events:none; }
.reason.open{ background:linear-gradient(180deg,#fff,#fff2f8); color:var(--ink); }
.reason.open .r-heart{ transform:scale(1.2) rotate(8deg); }
.reason.open .r-text{ max-height:160px; opacity:1; }
.reason.open .r-tap{ display:none; }

.j-surprise{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
#surpriseHint { margin-bottom: 30px; }
.final-card{ max-width:420px; width:100%; margin-top:10px; padding:34px 26px; background:linear-gradient(180deg,#fff,#fff2f8); border-radius:30px; box-shadow:var(--shadow-out), var(--shadow-in); }
.final-heart{ font-size:48px; animation:beat 1.4s ease-in-out infinite; }
.final-text{ font-family:var(--f-hand); font-size:24px; line-height:1.5; color:var(--ink); margin:12px 0 14px; }
.final-sign{ font-family:var(--f-cute); font-weight:600; font-size:24px; color:var(--rose); }

/* starry ending */
.j-stars{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.stars-cv{ position:absolute; inset:0; width:100%; height:100%; }
.stars-text{ position:relative; z-index:2; padding:0 16px; }
/* both lines always fit on ONE line — vw-based so the size shrinks to the width */
.star-l1{ font-family:var(--f-serif); font-style:italic; font-size:min(6.4vw,27px); white-space:nowrap; color:#fff; opacity:.92; }
.star-l2{ font-family:var(--f-cute); font-weight:600; font-size:min(7.6vw,34px); white-space:normal; line-height:1.22; padding: 0 10px; color:#fff; margin-top:10px; text-shadow:0 2px 20px rgba(255,150,200,.6); }
.j-stars .clay-btn{ margin-top:28px; }
.j-stars .credit{ margin-top:18px; }
.credit{ font-family:var(--f-hand); font-size:17px; color:rgba(255,255,255,.85); }

.music-btn{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:80; width:52px; height:52px; border-radius:50%; border:none; cursor:pointer; color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,var(--straw),var(--straw-2)); box-shadow:6px 7px 16px rgba(255,110,165,.4), inset -2px -3px 6px rgba(200,40,110,.3), inset 2px 3px 6px rgba(255,255,255,.5); }
.music-btn[hidden]{ display:none; }
.music-btn.playing .m-ico{ animation:spin 3s linear infinite; display:inline-block; }

/* shared keyframes */
@keyframes pulse{ 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:.85; transform:scale(1.08);} }
@keyframes beat{ 0%,100%{transform:scale(1);} 15%{transform:scale(1.18);} 30%{transform:scale(1);} 45%{transform:scale(1.12);} }
@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes wave{ 0%,100%{height:25%;} 50%{height:100%;} }
@keyframes bobble{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(7px);} }
@keyframes spin{ to{ transform:rotate(360deg);} }
.pop{ animation:popSpring .7s var(--spring) both; }
@keyframes popSpring{ 0%{opacity:0; transform:scale(.6);} 100%{opacity:1; transform:scale(1);} }

@media (min-width:560px){ .cake-stage{ transform:scale(1.05);} .cake-stage.zoom{ transform:scale(1.24);} }
@media (max-width:400px){
  .sec-title{ font-size:clamp(26px,7.5vw,34px); }
  .sec-sub{ font-size:18px; margin-bottom:20px; }
  .journey section{ padding:20px 14px; }
  .clay-btn{ padding:12px 24px; font-size:16px; border-radius:24px; }
  .rail-track{ gap:14px; }
  .polaroid{ width:180px; }
  .polaroid-img{ height:180px; }
  .note-card{ padding:28px 18px 24px; }
  .timeline{ padding-left:4px; }
  .tl-item{ padding-left:56px; }
  .tl-card{ padding:10px 14px; }
  .reasons{ gap:4px; }
  .reason{ padding:10px 14px; }
  .contract-doc{ padding:20px 16px; margin:20px 12px; }
  .song-card{ width:260px; padding:16px; }
  .song-art{ width:220px; height:220px; }
  .wheel-wrap{ width:min(260px, 78vw); }
  .hand-pad{ width:140px; height:140px; }
  .kintsugi-wrap{ width:min(240px, 80vw); height:min(240px, 80vw); }
  .vending-machine{ width:min(260px, 88vw); }
  .abyss-wrap{ width:220px; height:220px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .bg-blob,.petal{ animation:none !important; }
  .cake-photo{ animation:none; }
  .cake-stage.entering .cake-photo{ animation:cakePushIn .6s ease both; }
}

/* =========================================================
   v4 — THE WISH-LANTERN / "ONE LIGHT" WORLD
   ========================================================= */
:root{ --wish-1:#ffe08a; --wish-2:#ff9b3d; --wish:#ffb24d; }

/* ---- atmosphere finishing layers ---- */
#atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(125% 125% at 50% 40%, transparent 52%, rgba(42,18,40,.22) 100%); mix-blend-mode:multiply; }
.grain{ position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; will-change:transform;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(5) infinite; }
@keyframes grain{ 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-2%)} 100%{transform:translate(0,0)} }

/* warm the ambient blobs a touch for the box-interior feel */
.b1{ background:radial-gradient(circle,#ffd9b0,transparent 70%) !important; opacity:.5; }
.b3{ background:radial-gradient(circle,#ffe6c2,transparent 70%) !important; opacity:.5; }

/* ---- wind-the-key gate ---- */
.gate-go .key{ display:block; transform-origin:50% 58%; }
.gate-go.winding .key{ animation:windKey .95s cubic-bezier(.45,.05,.55,.95) forwards; }
@keyframes windKey{ 0%{transform:rotate(0)} 30%{transform:rotate(115deg)} 33%{transform:rotate(120deg)} 63%{transform:rotate(235deg)} 66%{transform:rotate(240deg)} 97%{transform:rotate(355deg)} 100%{transform:rotate(360deg)} }
.gate-card.lifting{ animation:none !important; transform:perspective(900px) rotateX(38deg) translateY(-14px) scale(.95); opacity:.86;
  transition:transform .8s var(--smooth), opacity .8s ease; transform-origin:50% 0%; }

/* re-skin the bloom transition as warm lamplight pouring out */
.bloom{ background:radial-gradient(circle, #fff3d6 0%, #ffd27a 38%, #ff9b3d 100%) !important; }

/* =========================================================
   THE WISH-LANTERN
   ========================================================= */
.lantern{ position:relative; width:150px; height:208px; cursor:pointer; touch-action:manipulation; --voice:0; --lit:0; }
.lantern.wiggle{ animation:lanternBob 3.6s ease-in-out infinite; }
.lantern--sm{ width:108px; height:150px; margin:6px auto; }
.lantern-thread{ position:absolute; left:50%; top:-100vh; width:2px; height:100vh; transform:translateX(-50%);
  background:linear-gradient(rgba(180,140,90,0), rgba(180,140,90,.55)); }
.lantern-cap{ position:absolute; left:50%; top:4px; transform:translateX(-50%); width:58px; height:15px; border-radius:7px 7px 3px 3px;
  background:linear-gradient(#d3ab68,#9c7637); box-shadow:inset 0 2px 2px rgba(255,255,255,.45); z-index:4; }
.lantern-body{ position:absolute; left:50%; top:16px; transform:translateX(-50%); width:124px; height:166px; overflow:hidden;
  border-radius:26px 26px 30px 30px/34px 34px 44px 44px; border:1px solid rgba(255,210,150,.6);
  background:linear-gradient(180deg, rgba(255,238,205,.94), rgba(255,214,158,.88));
  box-shadow:inset -9px -11px 22px rgba(200,120,60,.28), inset 9px 9px 20px rgba(255,255,255,.5), 0 20px 44px rgba(255,170,80,.22); z-index:2; }
.lantern-body::before{ content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0 23px, rgba(180,120,60,.10) 23px 24px); }
.lantern-shine{ position:absolute; left:14%; top:12%; width:30%; height:46%; border-radius:50%; background:radial-gradient(ellipse, rgba(255,255,255,.55), transparent 70%); filter:blur(2px); }
.lantern-base{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:70px; height:18px; border-radius:4px 4px 9px 9px;
  background:linear-gradient(#caa15f,#8a6630); box-shadow:inset 0 2px 2px rgba(255,255,255,.3); z-index:4; }
.lantern-glow{ position:absolute; left:50%; top:48%; transform:translate(-50%,-50%); width:170px; height:190px; border-radius:50%; z-index:1;
  background:radial-gradient(circle, rgba(255,200,110,.7), rgba(255,170,80,.18) 55%, transparent 72%); filter:blur(7px);
  opacity:calc(.28 + var(--voice) * .5 + var(--lit) * .45); transition:opacity .25s ease; }
.lantern .ember{ position:absolute; left:50%; top:52%; transform:translate(-50%,-50%); width:12px; height:12px; border-radius:50%; z-index:3;
  background:radial-gradient(circle,#ffd9a0,#c8702a); box-shadow:0 0 10px 3px rgba(255,150,60,.55); opacity:.75; animation:emberPulse 2.1s ease-in-out infinite; }
.lantern.lit .ember{ opacity:0; transition:opacity .3s ease; }
.lantern .wisp{ position:absolute; left:50%; top:48%; width:7px; height:7px; border-radius:50%; transform:translateX(-50%); z-index:3;
  background:rgba(180,170,170,.4); filter:blur(2px); animation:wisp 2.6s ease-out infinite; }
.lantern.lit .wisp{ display:none; }
.lantern-flame{ position:absolute; left:50%; top:46%; transform:translate(-50%,-100%) scale(0); transform-origin:bottom center; width:24px; height:38px; opacity:0; z-index:3;
  transition:transform .6s var(--spring), opacity .4s ease; }
.lantern.lit .lantern-flame{ opacity:1; transform:translate(-50%,-100%) scale(1); }
.lantern-flame .lf-body{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:19px; height:32px; transform-origin:bottom center;
  border-radius:50% 50% 50% 50%/62% 62% 40% 40%; background:linear-gradient(180deg,#fff3b0 6%,#ffd24d 40%,#ff8a2b 74%,#ff5a3c 100%);
  box-shadow:0 0 18px 5px rgba(255,170,70,.8); animation:flicker .26s ease-in-out infinite alternate; }
.lantern-flame .lf-core{ position:absolute; left:50%; bottom:5px; transform:translateX(-50%); width:9px; height:15px; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; background:linear-gradient(#fffbe6,#ffe27a); }
.lantern .ltap{ position:absolute; left:50%; top:50%; width:96px; height:96px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(255,224,150,.9); animation:ripple 2s ease-out infinite; pointer-events:none; z-index:5; }
.lantern.lit .ltap{ display:none; }
@keyframes lanternBob{ 0%,100%{ transform:translateY(0) rotate(-1.5deg);} 50%{ transform:translateY(-7px) rotate(1.5deg);} }
@keyframes emberPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }
@keyframes wisp{ 0%{ opacity:.5; transform:translate(-50%,0) scale(.6);} 100%{ opacity:0; transform:translate(-50%,-42px) scale(2.2);} }

/* ---- the dimming ritual ---- */
#sceneCake .cake-title, #sceneCake .cake-stage, #sceneCake .blow-ui{ position:relative; z-index:2; }
#sceneCake .dim{ position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(125% 125% at 50% 42%, rgba(30,16,46,0) 0%, rgba(20,11,38,.94) 72%);
  transition:opacity 3.8s ease; }
#sceneCake .dim.on{ opacity:1; }
.cake.ritual .flame-glow{ animation:none; opacity:1; transform:translateX(-50%) scale(1.5); box-shadow:0 0 40px 14px rgba(255,180,80,.5); transition:transform 1.2s ease; }
.cake.ritual .cake-aura{ opacity:1; transform:translateX(-50%) scale(1.25); }

/* the golden "Happy Birthday Kavya" name-scatter canvas */
/* her name written in light — smooth GPU CSS reveal (no canvas, no lag) */
.wish-reveal{ position:fixed; inset:0; z-index:60; display:grid; place-items:center; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s;
  background:radial-gradient(circle at 50% 42%, #3a1d44, #120819 72%); }   /* opaque — the cake is fully hidden behind it */
.wish-reveal.show{ opacity:1; visibility:visible; }
.wish-reveal.out{ opacity:0; }
/* the name floats UP and shrinks — it "becomes" the hero title at the top */
.wish-reveal.rise{ opacity:0; transition:opacity 1.1s ease; }
.wish-reveal.rise .wr-inner{ transform:translateY(-34vh) scale(.5); transition:transform 1.15s cubic-bezier(.4,0,.2,1); }
#wrName, #heroName { view-transition-name: hero-title; }
#wrHb, #heroGreeting { view-transition-name: hero-greeting; }
::view-transition-old(hero-title), ::view-transition-new(hero-title),
::view-transition-old(hero-greeting), ::view-transition-new(hero-greeting) {
  animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.wr-inner{ transition:transform 1.15s cubic-bezier(.4,0,.2,1); }
.wr-inner{ position:relative; z-index:2; text-align:center; padding:0 20px; }
/* both lines: same font, same size, pink — so it matches the hero exactly */
.wr-hb, .wr-name{ font-family:var(--f-cute); font-weight:700; font-size:clamp(34px,9vw,52px); line-height:1.1;
  color:#ff8fbf; text-shadow:0 0 22px rgba(255,140,190,.55), 0 3px 14px rgba(140,40,90,.4); }
.wr-hb{ margin-bottom:2px; }
.wr-letter{ display:inline-block; white-space:pre; opacity:0; transform:translateY(30px) rotate(-7deg) scale(.7); will-change:transform, opacity; }
.wish-reveal.show .wr-letter{ animation:wrPop .6s cubic-bezier(.2,1.5,.45,1) both; animation-delay:calc(var(--d,0) * 52ms); }
@keyframes wrPop{ 0%{ opacity:0; transform:translateY(30px) rotate(-7deg) scale(.7);} 100%{ opacity:1; transform:none;} }
.wr-sparkles{ position:absolute; inset:0; pointer-events:none; z-index:1; }
.wr-sparkles i{ position:absolute; width:6px; height:6px; border-radius:50%; background:radial-gradient(circle,#fff,rgba(255,210,130,0) 70%); opacity:0; animation:wrSpark 2.4s ease-in-out infinite; }
@keyframes wrSpark{ 0%,100%{ opacity:0; transform:scale(.3);} 50%{ opacity:.9; transform:scale(1);} }

/* ---- living heartbeat counter ---- */
.beat-chip{ margin-top:26px; padding:16px 22px 14px; border-radius:24px; text-align:center; position:relative;
  background:linear-gradient(180deg,#fff,#fff2f8); box-shadow:var(--shadow-out), var(--shadow-in); }
.beat-row{ display:flex; align-items:flex-end; justify-content:center; gap:8px; }
.beat-unit{ display:flex; flex-direction:column; align-items:center; min-width:42px; }
.beat-n{ font-family:var(--f-cute); font-weight:700; font-size:30px; line-height:1; color:var(--rose); }
.beat-u{ font-family:var(--f-body); font-weight:600; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
.beat-sep{ font-family:var(--f-cute); font-weight:700; font-size:22px; color:#ffc2d8; align-self:center; padding-bottom:14px; }
.beat-heart{ position:absolute; left:50%; top:-16px; transform:translateX(-50%); font-size:22px; animation:beat 1s ease-in-out infinite; }
.beat-label{ font-family:var(--f-hand); font-size:19px; color:var(--ink-soft); margin-top:8px; }

/* thread the wish-light into the meter + section glow-ups */
.meter-fill{ background:linear-gradient(90deg, var(--wish-1), var(--wish-2), var(--cherry)) !important; }
.reveal.in{ animation:wishGlow 1.4s ease forwards; }
@keyframes wishGlow{ 0%{ box-shadow:0 0 0 0 rgba(255,178,77,0);} 30%{ box-shadow:0 0 36px 2px rgba(255,178,77,.22);} 100%{ box-shadow:0 0 0 0 rgba(255,178,77,0);} }

/* candles start unlit, then light off her wish-flame, one by one */
.candle .flame-wrap{ opacity:0; transition:opacity .4s ease; }
.candle.lit .flame-wrap{ opacity:1; }

/* keep the celebration card above the dim + cake content */
#sceneCake .blown-card{ z-index:6; }

/* =========================================================
   v5 — PRINCESS CAKE + grand entrance + heart surprise
   ========================================================= */
.cake.princess{ width:252px; }
/* princess palette */
.cake.princess .tier-bot .tier-face{ background:linear-gradient(180deg,#ffc6dd,#ff9ec4); }
.cake.princess .tier-mid .tier-face{ background:linear-gradient(180deg,#e6d3ff,#caa9f3); }
.cake.princess .tier-top .tier-face{ background:linear-gradient(180deg,#fff3df,#ffe2b8); }
.cake.princess .tier-bot .tier-top-cap{ background:linear-gradient(180deg,#fff,#ffe0ee); }
.cake.princess .tier-mid .tier-top-cap{ background:linear-gradient(180deg,#fff,#efe2ff); }
.cake.princess .tier-top .tier-top-cap{ background:linear-gradient(180deg,#fff,#fff1d8); }
/* gold trim band at each tier base */
.tier-gold{ position:absolute; left:0; right:0; bottom:0; height:9px; border-radius:0 0 26px 26px/0 0 16px 16px;
  background:linear-gradient(180deg,#ffe9a8,#ffcf5c 50%,#e0a32a); box-shadow:inset 0 1px 1px rgba(255,255,255,.6), 0 1px 2px rgba(180,140,20,.3); z-index:2; }
/* a little pearl swag */
.swag{ position:absolute; left:7px; right:7px; bottom:13px; height:7px; z-index:2;
  background:radial-gradient(circle at 6px 3px, #fff 2.6px, transparent 3px) repeat-x; background-size:13px 7px; opacity:.95;
  filter:drop-shadow(0 1px 1px rgba(180,90,140,.25)); }
/* gold crown on top */
.crown{ position:absolute; left:50%; top:6px; transform:translateX(-50%); width:70px; height:48px; z-index:2;
  filter:drop-shadow(0 4px 5px rgba(180,140,20,.4)); }
/* gold pedestal stand */
.cake-stand{ position:absolute; left:50%; bottom:-20px; transform:translateX(-50%); width:40px; height:26px; z-index:0;
  background:linear-gradient(90deg,#e0a32a,#ffe9a8 50%,#e0a32a); clip-path:polygon(28% 0,72% 0,100% 100%,0 100%); }
.cake-stand::after{ content:''; position:absolute; left:50%; bottom:-8px; transform:translateX(-50%); width:78px; height:16px; border-radius:50%;
  background:linear-gradient(180deg,#ffe9a8,#e0a32a); box-shadow:0 8px 16px rgba(150,110,20,.3); }

/* ---- the grand entrance: tiers + crown drop in, then candles fade + light ---- */
.cake-stage.assemble .tier-bot{ animation:tierDrop .6s var(--spring) 0s both; }
.cake-stage.assemble .tier-mid{ animation:tierDrop .6s var(--spring) .28s both; }
.cake-stage.assemble .tier-top{ animation:tierDrop .6s var(--spring) .56s both; }
.cake-stage.assemble .crown{ animation:crownDrop .7s var(--spring) .85s both; }
.cake-stage.assemble .candles{ opacity:0; animation:fadeUp .5s ease 1.05s forwards; }
.cake-stage.assemble .cake-plate, .cake-stage.assemble .cake-stand{ animation:plateIn .5s ease both; }
@keyframes tierDrop{ 0%{ opacity:0; transform:translate(-50%,-70px) scale(.62); } 70%{ opacity:1; } 100%{ opacity:1; transform:translateX(-50%) scale(1); } }
@keyframes crownDrop{ 0%{ opacity:0; transform:translate(-50%,-60px) scale(.4) rotate(-22deg); } 100%{ opacity:1; transform:translateX(-50%) scale(1) rotate(0); } }
@keyframes plateIn{ 0%{ opacity:0; transform:translateX(-50%) translateY(14px); } 100%{ opacity:1; transform:translateX(-50%) translateY(0); } }
@keyframes fadeUp{ 0%{ opacity:0; transform:translateY(12px); } 100%{ opacity:1; transform:none; } }

/* ---- the final heart surprise (replaces the lantern) ---- */
.heartgift{ position:relative; width:150px; height:150px; cursor:pointer; touch-action:manipulation; }
.heartgift.wiggle{ animation:lanternBob 3s ease-in-out infinite; }
.heartgift--sm{ width:120px; height:120px; }
.hg-glow{ position:absolute; inset:-12px; border-radius:50%; background:radial-gradient(circle,rgba(255,110,165,.55),transparent 66%); filter:blur(9px); animation:pulse 2.4s ease-in-out infinite; }
.hg-heart{ position:absolute; left:50%; top:42%; width:84px; height:84px; transform:translate(-50%,-50%) rotate(-45deg);
  background:linear-gradient(135deg,#ff8fb6,#ff4f7e);
  box-shadow:inset -6px -8px 14px rgba(190,40,90,.3), inset 6px 8px 16px rgba(255,255,255,.45), 0 14px 30px rgba(255,80,130,.35); }
.hg-heart::before, .hg-heart::after{ content:''; position:absolute; width:84px; height:84px; border-radius:50%; background:linear-gradient(135deg,#ff8fb6,#ff5d8f); }
.hg-heart::before{ top:-42px; left:0; } .hg-heart::after{ left:42px; top:0; }
.hg-ring{ position:absolute; left:50%; top:42%; width:96px; height:96px; border-radius:50%; transform:translate(-50%,-50%);
  border:2px solid rgba(255,255,255,.85); animation:ripple 2s ease-out infinite; pointer-events:none; z-index:3; }
.heartgift.open .hg-heart{ animation:heartPop .5s var(--spring) forwards; } .heartgift.open .hg-ring{ display:none; }
@keyframes heartPop{ 0%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1);} 45%{ transform:translate(-50%,-50%) rotate(-45deg) scale(1.25);} 100%{ transform:translate(-50%,-50%) rotate(-45deg) scale(0); opacity:0;} }

/* ---- richer, more animated background ---- */
.bg-blob{ opacity:.62 !important; }
.b1{ animation-duration:18s !important; } .b2{ animation-duration:21s !important; } .b3{ animation-duration:24s !important; } .b4{ animation-duration:27s !important; }
#bg::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 40% at 50% -5%, rgba(255,240,210,.35), transparent 60%); animation:skyPulse 8s ease-in-out infinite; }
@keyframes skyPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:.9; } }

/* ---- pop-in: every section title + cards spring in ---- */
.reveal.in .sec-title{ animation:popSpring .6s var(--spring) both; }
.reveal.in .sec-sub{ animation:popSpring .6s var(--spring) .08s both; }
.reveal.in .tl-item, .reveal.in .polaroid, .reveal.in .audio-card, .reveal.in .ow, .reveal.in .reason, .reveal.in .q-card{
  animation:popUp .55s var(--spring) both; }
.reveal.in .tl-item:nth-child(2){ animation-delay:.06s; } .reveal.in .tl-item:nth-child(3){ animation-delay:.12s; }
.reveal.in .tl-item:nth-child(4){ animation-delay:.18s; } .reveal.in .tl-item:nth-child(5){ animation-delay:.24s; } .reveal.in .tl-item:nth-child(6){ animation-delay:.3s; }
.reveal.in .reason:nth-child(2){ animation-delay:.05s; } .reveal.in .reason:nth-child(3){ animation-delay:.1s; }
.reveal.in .reason:nth-child(4){ animation-delay:.15s; } .reveal.in .reason:nth-child(5){ animation-delay:.2s; } .reveal.in .reason:nth-child(6){ animation-delay:.25s; }
@keyframes popUp{ 0%{ opacity:0; transform:translateY(20px) scale(.94);} 100%{ opacity:1; transform:none;} }

/* =========================================================
   v5 — engagement features (jar, slideshow, song, vault, shake)
   ========================================================= */
/* heart jar */
.heart-jar{ position:fixed; left:14px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:80; width:48px; text-align:center; }
.heart-jar[hidden]{ display:none; }
.jar-glass{ width:42px; height:50px; margin:0 auto; border-radius:8px 8px 16px 16px; position:relative; overflow:hidden;
  border:2px solid rgba(255,255,255,.85); background:rgba(255,255,255,.32); box-shadow:0 6px 16px rgba(180,70,120,.25), inset 0 2px 4px rgba(255,255,255,.6); }
.jar-glass::before{ content:''; position:absolute; left:9px; right:9px; top:-5px; height:5px; border-radius:4px; background:rgba(255,255,255,.9); }
.jar-fill{ position:absolute; left:0; right:0; bottom:0; height:0%; background:linear-gradient(180deg,#ff9ec4,#ff5d8f); transition:height .45s var(--spring); }
.jar-count{ font-family:var(--f-cute); font-weight:700; font-size:13px; color:var(--plum); margin-top:3px; }
.catch-heart{ position:fixed; z-index:60; pointer-events:auto; cursor:pointer; will-change:transform; user-select:none; -webkit-user-select:none; }
.toast{ position:fixed; left:50%; bottom:90px; transform:translateX(-50%) translateY(20px); z-index:96; max-width:88%;
  background:linear-gradient(180deg,#fff,#fff2f8); color:var(--ink); font-family:var(--f-hand); font-size:20px; text-align:center;
  padding:14px 22px; border-radius:22px; box-shadow:var(--shadow-out); opacity:0; transition:opacity .4s ease, transform .5s var(--spring); }
.toast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* shake-to-develop polaroids (only real photos get frosted) */
.polaroid.frosted .polaroid-img{ filter:none; }
.polaroid.frosted .polaroid-cap::after{ content:""; }
.polaroid.developed .polaroid-img{ filter:none; transition:filter 1.1s ease; }

/* narrated slideshow */
.slideshow{ max-width:460px; margin:0 auto; text-align:center; }
#slidePlay{ margin-top:0; transform:translateY(-34px); position:relative; z-index:10; }
.slide-stage{ width:100%; aspect-ratio:4/3; border-radius:20px; overflow:hidden; position:relative; box-shadow:var(--shadow-out);
  background:repeating-linear-gradient(45deg,rgba(255,140,180,.1) 0 14px,transparent 14px 28px),linear-gradient(135deg,#ffe9f2,#f1e6ff); }
.slide-stage img, .slide-stage .slide-ph{ position:absolute; inset:0; width:100%; height:100%; opacity:0; transition:opacity 1s ease; }
.slide-stage img{ object-fit:cover; }
.slide-stage .slide-ph{ display:flex; align-items:center; justify-content:center; color:var(--rose); font-family:var(--f-cute); font-size:14px; }
.slide-stage .on{ opacity:1; }
.slide-stage img.on{ animation:ken 6s ease both; }
@keyframes ken{ 0%{ transform:scale(1) translate(0,0);} 100%{ transform:scale(1.12) translate(-2%,-2%);} }
.slide-cap{ font-family:var(--f-hand); font-size:22px; color:var(--ink); min-height:1.5em; margin:6px 0; }

/* song / karaoke lyrics */
.lyrics{ max-width:420px; margin:0 auto 20px; min-height:110px; display:flex; flex-direction:column; gap:2px; }
.lyric{ font-family:var(--f-cute); font-size:16px; color:var(--ink-soft); opacity:.38; transition:all .3s ease; padding:3px 0; }
.lyric.active{ opacity:1; font-size:21px; color:var(--rose); text-shadow:0 2px 14px rgba(255,143,171,.4); }
.lyric.hl.active{ color:#c46bff; }
.j-song{ text-align:center; } .j-slides .clay-btn, .j-song .clay-btn{ margin-top:0; }
.slide-cap{ margin-bottom:4px; }

/* long-press-name secret vault */
.vault{ position:fixed; inset:0; z-index:95; display:flex; align-items:center; justify-content:center; padding:32px; text-align:center;
  background:radial-gradient(circle, rgba(22,12,32,.93), rgba(8,4,16,.97)); opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s; }
.vault.on{ opacity:1; visibility:visible; }
.vault p{ font-family:var(--f-hand); font-size:clamp(24px,6.4vw,32px); color:#ffd9ec; line-height:1.5; max-width:520px; }
.vault small{ display:block; margin-top:22px; font-family:var(--f-body); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,217,236,.5); }
.hero-name{ cursor:pointer; }

/* =========================================================
   v6 — sound, premium cake, no mic icon
   ========================================================= */
/* the mic icon is gone — the meter + text are enough */
.blow-mic{ display:none !important; }

/* sound on/off toggle */
.sound-btn{ position:fixed; right:16px; bottom:calc(78px + env(safe-area-inset-bottom)); z-index:80; width:46px; height:46px; border-radius:50%; border:none; cursor:pointer; font-size:19px;
  background:linear-gradient(180deg,#fff,#ffeef5); box-shadow:6px 7px 16px rgba(255,110,165,.3), inset -2px -3px 6px rgba(255,170,200,.4), inset 2px 3px 6px rgba(255,255,255,.8); }
.sound-btn[hidden]{ display:none; }

/* floating sparkles around the cake */
.cake-spark{ position:absolute; color:#fff8d0; pointer-events:none; z-index:7; text-shadow:0 0 7px rgba(255,220,140,.95); animation:cakeSpark ease-in-out infinite; }
@keyframes cakeSpark{ 0%,100%{ opacity:.15; transform:scale(.7) translateY(0);} 50%{ opacity:1; transform:scale(1.25) translateY(-6px);} }

/* ---- premium cake entrance: smooth rise + warm glow bloom ---- */
.cake-stage.entering .cake{ animation:cakeRise 1s var(--spring) both; }
.cake-stage.entering .candles{ opacity:0; animation:fadeUp .6s ease 1s forwards; }
.cake-stage.entering::before{ content:''; position:absolute; left:50%; top:46%; width:300px; height:300px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,222,150,.6), rgba(255,180,110,.18) 45%, transparent 70%); filter:blur(10px); z-index:-1; pointer-events:none; animation:cakeBloom 1.5s ease both; }
@keyframes cakeRise{ 0%{ opacity:0; transform:translateY(46px) scale(.8);} 60%{ opacity:1;} 100%{ opacity:1; transform:translateY(0) scale(1);} }
@keyframes cakeBloom{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.4);} 40%{ opacity:1;} 100%{ opacity:0; transform:translate(-50%,-50%) scale(1.35);} }

/* ---- richer cake shading + glossy sheen ---- */
.cake.princess .tier-face{ box-shadow:inset -16px -8px 28px rgba(150,50,100,.3), inset 14px 6px 22px rgba(255,255,255,.45), 4px 10px 22px rgba(170,70,120,.22); }
.cake.princess .tier-gloss{ left:0; top:0; width:100%; height:100%; border-radius:inherit; filter:none;
  background:linear-gradient(116deg, transparent 32%, rgba(255,255,255,.5) 48%, transparent 64%); opacity:.55; }
/* a slow glint sweeping the gold trim */
.tier-gold{ overflow:hidden; }
.tier-gold::after{ content:''; position:absolute; inset:0; background:linear-gradient(110deg, transparent 38%, rgba(255,255,255,.9) 50%, transparent 62%); transform:translateX(-130%); animation:glint 5s ease-in-out infinite; }
@keyframes glint{ 0%,72%{ transform:translateX(-130%);} 86%{ transform:translateX(130%);} 100%{ transform:translateX(130%);} }
.crown{ animation:crownGlint 5s ease-in-out infinite; }
@keyframes crownGlint{ 0%,80%{ filter:drop-shadow(0 4px 5px rgba(180,140,20,.4)) brightness(1);} 88%{ filter:drop-shadow(0 4px 8px rgba(255,200,60,.6)) brightness(1.45);} 100%{ filter:drop-shadow(0 4px 5px rgba(180,140,20,.4)) brightness(1);} }
/* soft glowing reflection under the stand */
.cake-stand::before{ content:''; position:absolute; left:50%; bottom:-26px; transform:translateX(-50%); width:130px; height:30px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,160,200,.32), transparent 70%); filter:blur(5px); }

/* =========================================================
   v7 — galaxy full-screen sticky-pin takeover
   ========================================================= */
.j-galaxy{ position:relative; height:120vh; padding:0 !important; }   /* scroll runway reduced to close gap */
.galaxy-pin{ position:sticky; top:0; height:100vh; width:100%; display:flex; align-items:center; justify-content:center; pointer-events:none; }
/* a single glowing star, sitting in the page, that blooms open into the whole galaxy */
/* a premium glowing crystal/star that expands into the galaxy */
.galaxy-seed{ position:absolute; z-index:5; width:80px; height:80px; pointer-events:none; display:flex; align-items:center; justify-content:center; }
.galaxy-seed::before, .galaxy-seed::after{ content:''; position:absolute; background:linear-gradient(45deg, #ff8fb6, #c46bff, #ff8fb6); border-radius:50%; filter:blur(12px); width:40px; height:40px; animation:seedPulse 2s ease-in-out infinite; }
.galaxy-seed::after{ filter:blur(4px); width:20px; height:20px; background:#fff; }
.galaxy-seed span{ position:absolute; width:4px; height:60px; background:linear-gradient(to bottom, transparent, #fff, transparent); border-radius:50%; box-shadow:0 0 10px #c46bff; animation:seedPulse 2s ease-in-out infinite; }
.galaxy-seed span:nth-child(2){ transform:rotate(90deg); }
.galaxy-seed span:nth-child(3){ width:3px; height:40px; transform:rotate(45deg); opacity:0.7; }
.galaxy-seed span:nth-child(4){ width:3px; height:40px; transform:rotate(-45deg); opacity:0.7; }
@keyframes seedPulse{ 0%,100%{ opacity:.6; transform:scale(.85);} 50%{ opacity:1; transform:scale(1.25);} }
/* the galaxy itself — opens from the star (JS-driven scale/opacity) */
.galaxy-card{ position:relative; width:100vw; height:101vh; overflow:hidden; border-radius:44px; transform:scale(.1); opacity:0; transform-origin:center;
  background:linear-gradient(to bottom, #2a1840, #6a2f66); box-shadow:0 26px 80px rgba(40,16,60,.5); will-change:transform, opacity, border-radius; pointer-events:auto; }
.galaxy-card .stars-cv{ position:absolute; inset:0; width:100%; height:100%; }
.galaxy-card .stars-text{ position:absolute; left:0; right:0; top:21%; z-index:2; padding:0 22px; text-align:center; pointer-events:none; }

/* =========================================================
   v7 — FULL-SCREEN CINEMATIC CAKE (real photo + hyper-real flames)
   ========================================================= */
.scene--cake{ justify-content:center; gap:8px; overflow:hidden; }
.cake-stage{ position:relative; width:100vw; max-width:520px; display:flex; align-items:center; justify-content:center; transform-origin:center 62%;
  will-change:transform, opacity; transition:transform .95s cubic-bezier(.2,.85,.25,1), opacity .8s ease; }
.cake-photo{ position:relative; width:100%; transform-origin:center 60%; will-change:transform;
  animation:cakeFloat 4.6s ease-in-out infinite; }
.cake-photo img{ position:relative; z-index:2; width:100%; height:auto; display:block; border-radius:18px;
  filter:drop-shadow(0 26px 46px rgba(120,40,80,.45)); }   /* the cake PNG sits IN FRONT of the candles */
.cake-photo:not(.has-img) #cakeImg{ display:none; }
.cake-photo.has-img .cake-ph{ display:none; }
.cake-ph{ width:100%; aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; border-radius:24px;
  background:repeating-linear-gradient(45deg, rgba(255,150,190,.12) 0 16px, transparent 16px 32px), linear-gradient(160deg,#ffe7f0,#f3e6ff);
  border:2px dashed rgba(255,110,165,.5); color:var(--rose); box-shadow:var(--shadow-out); }
.cake-ph-emoji{ font-size:62px; } .cake-ph-text{ font-family:var(--f-cute); font-size:14px; }
.cake-photo .cake-aura{ position:absolute; left:50%; top:42%; width:130%; height:130%; transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(255,205,120,.45), rgba(255,160,90,.14) 48%, transparent 72%); filter:blur(10px); animation:auraPulse 3s ease-in-out infinite; }

/* candles sit BEHIND the cake PNG (so they look planted in it); --down nudges each one into the cake */
.cake-photo .candles{ position:absolute; inset:0; height:auto; bottom:0; z-index:1; pointer-events:none; }
.cake-photo .candle{ position:absolute; width:8px; height:40px; transform-origin:bottom center; bottom:auto; background:none; box-shadow:none; border-radius:0;
  transform:translate(-50%,-100%) translateY(var(--down,0px)) rotate(var(--r,0deg)) scale(var(--s,1)); }
.cake-photo .candle .stick{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:7px; height:30px; border-radius:3px;
  background:linear-gradient(90deg,#e9b9cd,#fff 48%,#e9b9cd); box-shadow:0 1px 3px rgba(120,40,80,.3); }
.cake-photo .candle .flame-wrap{ position:absolute; left:50%; top:0; transform:translate(-50%,-100%); width:22px; height:40px; }
/* hyper-real flame */
.flame-wrap{ position:relative; }
.flame-glow{ position:absolute; left:50%; top:34%; transform:translate(-50%,-50%); width:46px; height:62px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,205,95,.9), rgba(255,150,50,.4) 45%, transparent 72%); filter:blur(4px); mix-blend-mode:screen; animation:flameGlow 1.5s ease-in-out infinite; }
.flame{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:16px; height:32px; transform-origin:50% 100%;
  border-radius:50% 50% 50% 50%/72% 72% 34% 34%; filter:blur(.3px);
  background:radial-gradient(ellipse at 50% 80%, #fffdf2 4%, #ffe781 22%, #ffb23c 48%, #ff7a26 72%, rgba(255,80,36,.45) 94%);
  box-shadow:0 0 24px 7px rgba(255,160,60,.5); animation:flameDance .42s ease-in-out infinite alternate; }
.flame-core{ position:absolute; left:50%; bottom:3px; transform:translateX(-50%); width:7px; height:16px; border-radius:50% 50% 50% 50%/66% 66% 34% 34%;
  background:radial-gradient(ellipse at 50% 82%, #bfe6ff 0%, #fffdf2 32%, #ffe98a 72%); opacity:.95; animation:flameDance .42s ease-in-out infinite alternate-reverse; }
@keyframes flameDance{ 0%{ transform:translateX(-50%) scaleY(1) scaleX(1) skewX(-3deg);} 100%{ transform:translate(-52%) scaleY(1.12) scaleX(.93) skewX(4deg);} }
@keyframes flameGlow{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.14);} }
.candle .flame-wrap{ opacity:0; transition:opacity .4s ease; } .candle.lit .flame-wrap{ opacity:1; }
.cake-photo.out .flame-wrap{ animation:flameOut .45s var(--smooth) forwards; }
.cake-photo .candle .smoke{ position:absolute; left:50%; top:-26px; }

/* gentle idle float — the cake breathes forward & back (GPU transform only) */
@keyframes cakeFloat{ 0%,100%{ transform:translateY(0) scale(1);} 50%{ transform:translateY(-7px) scale(1.014);} }
/* cinematic entrance: scale + fade only — no blur filter (smooth on phones) */
.cake-stage.entering .cake-photo{ animation:cakePushIn 1.05s cubic-bezier(.2,.85,.25,1) both, cakeFloat 4.6s ease-in-out 1.05s infinite; }
@keyframes cakePushIn{ 0%{ opacity:0; transform:scale(.8) translateY(18px);} 100%{ opacity:1; transform:scale(1) translateY(0);} }
.cake-stage.entering .candles{ opacity:0; animation:fadeUp .6s ease 1s forwards; }
.cake-stage.entering::before{ content:''; position:absolute; left:50%; top:46%; width:130%; height:130%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,225,160,.55), rgba(255,180,110,.16) 46%, transparent 70%); filter:blur(14px); z-index:-2; pointer-events:none; animation:cakeBloom 1.6s ease both; }

@media (prefers-reduced-motion: reduce){ .cake-photo{ animation:none; } .cake-stage.entering .cake-photo{ animation:cakePushIn .6s ease both; } }
/* the cake ZOOMS UP for the blow: it scales up and rises so the TOP half (with the
   candles) fills the lower screen while the BOTTOM half slides off the bottom edge
   (the scene clips it). transform-origin keeps the top anchored as it grows. */
.cake-stage.forward{ transform-origin:center top; transform:scale(1.1) translateY(117.5%); }
/* after she blows, it settles right back to its original place and fades away */
.cake-stage.recede{ transform:none; opacity:0; pointer-events:none; transition:transform .9s var(--spring), opacity .6s ease; }

/* the typed caption over the entrance */
.cake-caption{ font-family:var(--f-hand); font-size:clamp(22px,5.8vw,32px); line-height:1.4; color:#fff; text-align:center; max-width:560px; margin:18px auto 0; min-height:1.5em; padding:0 18px; text-shadow:0 2px 18px rgba(80,30,60,.55); }

/* =========================================================
   v7 — the 6 new elements
   ========================================================= */
/* swipeable memory cards */
.j-cards{ text-align:center; }
.cardstack{ position:relative; width:240px; height:330px; margin:6px auto 0; }
.mcard{ position:absolute; inset:0; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#fff,#fff6fb); box-shadow:var(--shadow-out); cursor:grab; touch-action:pan-y; will-change:transform; user-select:none; -webkit-user-select:none; }
.mcard img{ width:100%; height:244px; object-fit:cover; display:block; }
.mcard-ph{ width:100%; height:244px; display:flex; align-items:center; justify-content:center; font-size:46px; background:repeating-linear-gradient(45deg,rgba(255,140,180,.1) 0 12px,transparent 12px 24px),linear-gradient(160deg,#ffe7f0,#f3e6ff); color:var(--rose); }
.mcard-cap{ font-family:var(--f-cute); font-weight:600; font-size:18px; color:var(--plum); margin-top:10px; }
.mcard-line{ font-family:var(--f-hand); font-size:18px; color:var(--ink-soft); padding:2px 12px 12px; }

/* vinyl record player */
.j-vinyl{ text-align:center; }
.vinyl-wrap{ position:relative; width:230px; height:230px; margin:6px auto 18px; }
.vinyl{ position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 50%, #2a2a2a 0 17%, #111 17% 19%, #1c1c1c 19% 100%); box-shadow:0 16px 36px rgba(0,0,0,.35); }
.vinyl::before{ content:''; position:absolute; inset:12px; border-radius:50%; background:repeating-radial-gradient(circle, rgba(255,255,255,.045) 0 1px, transparent 1px 4px); }
.vinyl.spinning{ animation:spin 3s linear infinite; }
.vinyl-label{ position:relative; z-index:2; width:86px; height:86px; border-radius:50%; display:flex; align-items:center; justify-content:center; text-align:center;
  background:linear-gradient(180deg,var(--straw),var(--rose)); color:#fff; font-family:var(--f-cute); font-weight:600; font-size:13px; padding:8px; box-shadow:inset 0 0 0 6px rgba(255,255,255,.18); }
.vinyl-label::after{ content:''; position:absolute; left:50%; top:50%; width:9px; height:9px; border-radius:50%; background:#1c1c1c; transform:translate(-50%,-50%); }
.tonearm{ position:absolute; right:0; top:4px; width:84px; height:6px; border-radius:3px; transform-origin:right center; transform:rotate(-30deg); transition:transform .7s var(--spring); z-index:3;
  background:linear-gradient(90deg,#cfcfcf,#888); box-shadow:0 2px 4px rgba(0,0,0,.25); }
.tonearm::before{ content:''; position:absolute; right:-6px; top:-7px; width:20px; height:20px; border-radius:50%; background:linear-gradient(180deg,#e6e6e6,#999); box-shadow:0 2px 4px rgba(0,0,0,.3); }
.tonearm.on{ transform:rotate(-7deg); }
.j-vinyl .lyrics{ margin-top:6px; }

/* draw a heart */
.j-draw{ text-align:center; }
.draw-wrap{ width:300px; max-width:86%; aspect-ratio:1/1; margin:6px auto 0; position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#fff,#fff2f8); box-shadow:var(--shadow-out); }
.draw-cv{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.draw-done{ margin:34px auto 0; text-align:center; font-family:var(--f-hand); font-size:23px; color:var(--rose); opacity:0; transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; pointer-events:none; }
.draw-done.show{ opacity:1; transform:none; }

/* little letters */
.j-letters{ text-align:center; }
.letter-env{ width:128px; height:92px; margin:14px auto 0; position:relative; cursor:pointer; touch-action:manipulation; border-radius:12px;
  background:linear-gradient(180deg,#fff,#ffeef5); box-shadow:var(--shadow-out); display:flex; align-items:center; justify-content:center;
  transition:transform .25s var(--spring); animation:envBob 2.6s ease-in-out infinite; }
.letter-env:active{ transform:scale(.95); }
.letter-env .le-flap{ position:absolute; left:0; top:0; width:100%; height:54%; clip-path:polygon(0 0,100% 0,50% 100%);
  background:linear-gradient(180deg,#ffd0e2,#ff9ec4); border-radius:12px 12px 0 0; }
.letter-env .le-mark{ position:relative; z-index:2; font-size:34px; margin-top:24px; filter:drop-shadow(0 3px 6px rgba(200,60,110,.35)); }
@keyframes envBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
/* full-screen opened letter */
.letter-overlay{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden;
  background:rgba(20,10,28,.55); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  transition:opacity .55s ease, visibility .55s; }
.letter-overlay.show{ opacity:1; visibility:visible; }
/* the card flies OUT of its origin (the seal/seed) on open, and back INTO it on close */
.letter-paper{ position:relative; width:min(86vw,420px); padding:34px 26px 26px; border-radius:20px; text-align:center;
  background:#fff5f8; box-shadow:0 30px 70px rgba(60,20,50,.45), 0 0 0 1px rgba(255,200,220,.3);
  transform-origin:center;
  transform:translate(var(--ox,0px), var(--oy,0px)) scale(var(--os,.9)) rotate(var(--orot,-2deg)); opacity:0;
  transition:transform .6s cubic-bezier(.22,1.1,.36,1), opacity .4s ease; }
.letter-overlay.show .letter-paper{ transform:translate(0,0) scale(1) rotate(0deg); opacity:1; }
.lp-deco{ font-size:30px; margin-bottom:8px; }
.lp-text{ font-family:var(--f-hand); font-size:24px; line-height:1.5; color:var(--ink); }
.lp-close{ display:block; margin-top:20px; font-family:var(--f-cute); font-size:13px; color:var(--ink-soft); opacity:.7; }

/* pull-string banner */
/* =========================================================
   THE LIE DETECTOR
   ========================================================= */
.j-detector{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.detector-wrap{ width:100%; max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:24px; transition:transform 0.4s var(--spring); }
.polygraph-screen{
  position:relative; width:100%; height:140px; border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, #fffafb, #ffeef5);
  box-shadow:var(--shadow-in), 0 10px 30px rgba(180,70,120,.15);
  border:1px solid rgba(255,255,255,.6);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.polygraph-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(255,110,165,.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,110,165,.1) 1px, transparent 1px);
  background-size:20px 20px;
  background-position:center center;
  opacity:0.8;
}
.polygraph-svg{
  position:relative; z-index:2; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(0 2px 8px rgba(255,79,126,.4));
}
.polygraph-status{
  position:absolute; bottom:12px; left:0; right:0; text-align:center; z-index:3;
  font-family:var(--f-body); font-weight:700; font-size:12px; letter-spacing:0.1em;
  color:var(--rose); opacity:0.8; transition:color 0.2s;
}
.polygraph-status.alert{
  color:var(--cherry);
  animation:blink 0.5s infinite;
  font-size:13px;
}
.lie-buttons{ display:flex; flex-direction:column; gap:12px; width:100%; transition:opacity 0.5s ease; }
.lie-btn{ width:100%; text-transform:none; }

/* Wild Shake (Minor Lie) */
.detector-wrap.shake-wild { animation:shakeWild 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shakeWild {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 90% { transform: translate3d(-4px, 0, 0); }
  20%, 80% { transform: translate3d(6px, -2px, 0); }
  30%, 50%, 70% { transform: translate3d(-8px, 4px, 0); }
  40%, 60% { transform: translate3d(8px, -4px, 0); }
}

/* Explode (Major Lie) */
.detector-wrap.explode { animation:explodeAnim 0.6s var(--spring) forwards; }
@keyframes explodeAnim {
  0% { transform: scale(1); filter:brightness(1); }
  20% { transform: scale(1.05) rotate(-2deg); filter:brightness(1.2); }
  40% { transform: scale(0.95) rotate(3deg); }
  60% { transform: scale(1.08) rotate(-1deg); }
  100% { transform: scale(1) rotate(0); filter:drop-shadow(0 0 20px rgba(255,79,126,.6)); }
}
.polygraph-screen.broken {
  background:linear-gradient(180deg, #ffeef5, #ffd6df);
  border-color:var(--cherry);
}

/* countdown */
.j-count{ text-align:center; }
.count-row{ display:flex; justify-content:center; gap:10px; margin:18px 0 8px; }
.count-unit{ min-width:60px; padding:14px 8px; border-radius:18px; background:linear-gradient(180deg,#fff,#fff2f8); box-shadow:var(--shadow-out); }
.count-n{ display:block; font-family:var(--f-cute); font-weight:700; font-size:27px; color:var(--rose); line-height:1; }
.count-u{ display:block; font-family:var(--f-body); font-weight:600; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px; }
/* slideshow progress dots */
.slide-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; z-index:3; }
.slide-dots span{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); transition:background .3s, transform .3s; }
.slide-dots span.on{ background:#fff; transform:scale(1.3); }

/* =========================================================
   ✨ HOLD MY HAND — press & hold to feel his heartbeat
   ========================================================= */
.j-hand{ text-align:center; }
.hand-wrap{ display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:18px; }
.hand-pad{ position:relative; width:168px; height:168px; border-radius:50%; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent; touch-action:none; border:none; display:grid; place-items:center;
  background:radial-gradient(circle at 38% 32%, #ffe3ee, #ffb9d4 56%, #ff9ec4);
  box-shadow:0 18px 34px rgba(220,90,140,.32), inset 0 -8px 18px rgba(200,60,110,.28), inset 0 8px 16px rgba(255,255,255,.7);
  transition:transform .25s var(--spring); }
.hand-pad:active{ transform:scale(.97); }
.hand-pad.beating{ animation:handBeat 1.1s ease-in-out infinite; }
@keyframes handBeat{ 0%,100%{ transform:scale(1);} 14%{ transform:scale(1.11);} 28%{ transform:scale(1.02);} 42%{ transform:scale(1.08);} 60%{ transform:scale(1);} }
.hand-core{ position:absolute; inset:0; border-radius:50%; opacity:0;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), rgba(255,150,190,0) 62%); transition:opacity .3s ease; }
.hand-pad.beating .hand-core{ opacity:1; animation:handGlow 1.1s ease-in-out infinite; }
@keyframes handGlow{ 0%,100%{ opacity:.35;} 14%{ opacity:.95;} 42%{ opacity:.8;} }
.hand-print{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:60px; z-index:2; filter:drop-shadow(0 4px 10px rgba(200,60,110,.4)); transition:opacity .3s ease, transform .3s var(--spring); }
.hp-hold{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
.hand-pad.beating .hp-open{ opacity:0; transform:translate(-50%,-50%) scale(.6); }   /* her open hand → */
.hand-pad.beating .hp-hold{ opacity:1; transform:translate(-50%,-50%) scale(1); }    /* … two hands holding */
.hand-ring{ position:absolute; left:50%; top:50%; width:168px; height:168px; margin:-84px 0 0 -84px; border-radius:50%;
  border:2px solid rgba(255,140,185,.6); opacity:0; pointer-events:none; }
.hand-pad.beating .hand-ring{ animation:handRing 1.1s ease-out infinite; }
.hand-pad.beating .hand-ring--2{ animation-delay:.42s; }
@keyframes handRing{ 0%{ transform:scale(.7); opacity:.7;} 100%{ transform:scale(2.1); opacity:0;} }
.hand-msg{ font-family:var(--f-hand); font-size:22px; line-height:1.45; color:var(--rose); max-width:320px;
  min-height:1.4em; opacity:0; transform:translateY(8px); transition:opacity .8s ease, transform .8s ease; }
.hand-msg.show{ opacity:1; transform:none; }

/* =========================================================
   ✨ PROMISES (Mini Letters Redesign)
   ========================================================= */
.j-promises{ text-align:center; overflow:hidden; }
.promises-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; padding: 10px 5vw; margin-top: 14px; max-width: 520px; margin-inline: auto; }
.promise-card { position: relative; height: 90px; perspective: 1000px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pc-front, .pc-back { position: absolute; inset: 0; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; border-radius: 14px; transition: transform 0.6s var(--spring); box-shadow: var(--shadow-out); }
.pc-front { background: linear-gradient(135deg, rgba(255,255,255,0.95), rgba(255,230,240,0.7)); border: 1px solid rgba(255,255,255,0.9); font-size: 32px; z-index: 2; transform: rotateY(0deg); }
.pc-back { background: linear-gradient(135deg, #fff, #fdf8fb); font-size: 14px; font-family: var(--f-hand); color: var(--plum); padding: 10px; text-align: center; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; line-height: 1.3; }
.promise-card.open .pc-front { transform: rotateY(180deg); }
.promise-card.open .pc-back { transform: rotateY(360deg); }
.promise-card:hover .pc-front { transform: scale(1.05); }
.promise-card.open:hover .pc-back { transform: rotateY(360deg) scale(1.05); }
.promise-card.open:hover .pc-front { transform: rotateY(180deg) scale(1.05); }

/* =========================================================
   ✨ VIRTUAL HUG
   ========================================================= */
.j-hug{ text-align:center; overflow:hidden; position:relative; }
.hug-wrap{ padding:40px 0 20px; }
.hug-btn{ position:relative; z-index:5; width:110px; height:110px; margin:0 auto; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  background:linear-gradient(135deg,#ff8fb6,#ff3a7a);
  box-shadow:0 16px 32px rgba(255,92,147,.5), inset 0 6px 12px rgba(255,255,255,.6), inset 0 -6px 12px rgba(180,30,80,.5); transition:transform .3s var(--spring); }
.hug-btn:active{ transform:scale(.92); }
.hug-emoji{ font-size:52px; position:relative; z-index:2; filter:drop-shadow(0 4px 8px rgba(150,0,50,0.3)); }
.hug-glow{ position:absolute; inset:-16px; border-radius:50%; background:radial-gradient(circle, rgba(255,143,182,.6), transparent 70%); animation:hugPulse 2s ease-in-out infinite; }
@keyframes hugPulse{ 0%,100%{ transform:scale(1); opacity:.6;} 50%{ transform:scale(1.15); opacity:1;} }
.hug-btn.hugging{ animation:hugBeat .8s ease-in-out infinite; }
@keyframes hugBeat{ 0%,100%{ transform:scale(1);} 15%{ transform:scale(1.15);} 30%{ transform:scale(1.05);} 45%{ transform:scale(1.15);} }
.hug-arms{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.hug-arm{ position:absolute; top:50%; width:180px; height:180px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(255,143,182,0.8), transparent 70%); opacity:0; filter:blur(12px); }
.hug-arm--l{ left:-200px; transform:translateY(-50%); transition:left 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; }
.hug-arm--r{ right:-200px; transform:translateY(-50%); transition:right 1s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease; }
.hug-arms.wrap .hug-arm--l{ left:-60px; opacity:1; }
.hug-arms.wrap .hug-arm--r{ right:-60px; opacity:1; }
.hug-warm{ position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(ellipse at center, rgba(255,150,190,.4), transparent 80%); opacity:0; transition:opacity 1s ease; }
.hug-warm.on{ opacity:1; }
.hug-msg{ position:relative; z-index:5; font-family:var(--f-hand); font-size:24px; color:var(--rose); line-height:1.4; max-width:320px; margin:32px auto 0; min-height:3em; opacity:0; transform:translateY(12px); transition:opacity .8s ease, transform .8s ease; }
.hug-msg.show{ opacity:1; transform:none; }

/* =========================================================
   ✨ SPIN OUR SOMEDAY — wheel of little promises
   ========================================================= */
.j-wheel{ text-align:center; }
.wheel-wrap{ position:relative; width:min(78vw,300px); aspect-ratio:1; margin:12px auto 0; }
.wheel{ position:absolute; inset:0; border-radius:50%; cursor:pointer; will-change:transform;
  box-shadow:0 16px 40px rgba(150,70,120,.32), inset 0 0 0 8px rgba(255,255,255,.9), inset 0 0 0 11px rgba(255,178,210,.55), inset 0 0 50px rgba(150,60,110,.18);
  -webkit-tap-highlight-color:transparent; }
/* the option written on each wedge (radial) */
.wheel-label{ position:absolute; left:0; top:0; width:100%; height:50%; transform-origin:bottom center; display:flex; justify-content:center; pointer-events:none; }
.wl-txt{ margin-top:10px; max-height: 80px; font-family:var(--f-cute); font-weight:700; font-size:clamp(11px,3.8vw,14px); line-height:1.2; color:#7a2f55; text-align:center; text-shadow:0 1px 1px rgba(255,255,255,.5); writing-mode: vertical-rl; transform: rotate(180deg); }
.wheel-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:23px; z-index:3;
  background:linear-gradient(180deg,#fff,#ffe9f2); box-shadow:0 5px 14px rgba(150,60,110,.32), inset 0 1px 2px #fff; }

/* =========================================================
   ✨ FULL SCREEN INTERACTIONS
   ========================================================= */
.j-wheel.fs, .j-hand.fs, .j-hug.fs{ position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; }
.j-wheel.fs .sec-title, .j-hand.fs .sec-title, .j-hug.fs .sec-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-wheel.fs .sec-sub, .j-hand.fs .sec-sub, .j-hug.fs .sec-sub{ color:rgba(255,255,255,0.95); text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-wheel.fs .wheel-wrap, .j-hand.fs .hand-wrap, .j-hug.fs .hug-wrap{ transform:scale(1.2); transition:transform 0.5s var(--spring); }
.j-wheel.fs .wheel-label{ color:#5a1f35; }
.j-wheel.fs .wl-txt{ font-size:clamp(13px,4.5vw,16px); line-height:1.2; max-height: 90px; }
.j-wheel.fs .wheel-spin{ margin-top:80px; transform:scale(1.1); }
.wheel-pointer{ position:absolute; left:50%; top:-8px; transform:translateX(-50%); width:0; height:0; z-index:3;
  border-left:14px solid transparent; border-right:14px solid transparent; border-top:24px solid #ff6fa5; filter:drop-shadow(0 3px 4px rgba(150,60,110,.45)); }
.wheel-spin{ margin-top:18px; padding:12px 32px; font-size:16px; }
.wheel-out{ margin:16px auto 0; max-width:330px; min-height:1.5em; font-family:var(--f-hand); font-size:23px; line-height:1.4; color:var(--rose);
  opacity:0; transform:translateY(8px); transition:opacity .6s ease, transform .6s ease; }
.wheel-out.show{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .wheel{ transition:transform .8s ease !important; } }

/* =========================================================
   ✨ THE PRETTIEST (MAGIC MIRROR)
   ========================================================= */
.j-mirror{ text-align:center; }
.box-wrap { position:relative; width:160px; height:160px; margin:60px auto 40px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition: transform 0.4s var(--spring); }
.j-mirror.fs{ position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; }
.j-mirror.fs .sec-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5); position:relative; z-index:10; transform:translateY(-50px); }
.j-mirror.fs .sec-sub{ color:rgba(255,255,255,0.95); text-shadow:0 2px 10px rgba(0,0,0,0.5); position:relative; z-index:10; transform:translateY(-50px); }
.j-mirror.fs .box-wrap { transform:scale(1.3); margin-top:80px; position:relative; z-index:10; }
.gift-box { position:absolute; width:100%; height:100%; bottom:0; display:flex; justify-content:center; }
.gift-front { position:absolute; bottom:0; width:100%; height:90px; background:linear-gradient(#ff6b9e, #d84577); border-radius:12px; z-index:3; box-shadow:0 10px 20px rgba(0,0,0,0.3); border-top:2px solid #ffa0c5; }
.gift-front::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:24px; transform:translateX(-50%); background:rgba(255,255,255,0.25); }
.gift-lid { position:absolute; bottom:70px; width:110%; height:45px; background:linear-gradient(#ff85b3, #f05a8d); border-radius:10px; z-index:4; left:-5%; box-shadow:0 8px 15px rgba(0,0,0,0.3); transform-origin:bottom; transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s; display:flex; justify-content:center; }
.gift-lid::after { content:'🎀'; position:absolute; top:-20px; font-size:36px; text-shadow:0 5px 10px rgba(0,0,0,0.2); }
.card.throw { transform:translateX(-120vw) rotate(-20deg) !important; opacity:0; pointer-events:none; }
.card.returning { transition: none !important; opacity: 0 !important; transform: translateX(0) scale(0.95) !important; z-index: 1 !important; }
.gift-lid.hide { transform:translateY(-40px) rotateX(70deg) scale(1.1); opacity:0; pointer-events:none; }
.gift-photo { position:absolute; bottom:10px; width:130px; height:160px; object-fit:cover; border-radius:12px; z-index:2; border:6px solid #fff; box-shadow:0 15px 25px rgba(0,0,0,0.3); transform:translateY(60px) scale(0.6); opacity:0; transition:all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.gift-photo.show { transform:translateY(-85px) scale(1.1); opacity:1; }
.mirror-text { position:relative; margin-top:40px; text-align:center; padding:0 20px; font-family:var(--f-hand); font-size:24px; color:#5a1f35; text-shadow:none; opacity:0; transition:opacity 1s ease; pointer-events:none; z-index:10; }
.j-mirror.fs .mirror-text { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.mirror-text.show { opacity:1; }

/* =========================================================
   ✨ SOULMATE SCANNER
   ========================================================= */
.j-scanner{ text-align:center; }
.scanner-wrap{ position:relative; margin-top:30px; display:flex; flex-direction:column; align-items:center; }
.fingerprint{ position:relative; width:100px; height:100px; border-radius:50%; background:rgba(255,150,180,0.1); border:2px dashed #ff96b4; display:flex; align-items:center; justify-content:center; font-size:44px; cursor:pointer; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:transform .3s ease, background .3s; }
.fingerprint.scanning{ background:rgba(255,150,180,0.3); border-style:solid; transform:scale(1.05); }
.scan-line{ position:absolute; top:0; left:0; width:100%; height:6px; background:#ff6fa5; box-shadow:0 0 12px #ff6fa5; opacity:0; }
.fingerprint.scanning .scan-line{ opacity:1; animation:scanUpDown 1.5s ease-in-out infinite alternate; }
@keyframes scanUpDown { 0%{ top:0; } 100%{ top:100%; } }
.scan-status{ margin-top:16px; font-weight:600; color:#ff96b4; font-size:14px; transition:opacity .3s; }
.scan-result{ margin-top:20px; font-size:22px; line-height:1.4; font-weight:600; color:var(--rose); text-shadow:0 2px 10px rgba(0,0,0,0.6); max-width:400px; margin-inline:auto; opacity:0; transform:translateY(10px) scale(0.9); transition:all .6s var(--spring); display:none; }
.scan-result.show{ display:block; opacity:1; transform:none; }
.j-scanner.fs{ position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; }
.j-scanner.fs .sec-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-scanner.fs .sec-sub{ color:rgba(255,255,255,0.95); text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-scanner.fs .scanner-wrap{ transform:scale(1.2); margin-top:50px; }
.j-scanner.fs .scan-result{ color:#fff; }

/* =========================================================
   ✨ WHO IS RIGHT (COIN TOSS)
   ========================================================= */
.j-coin{ text-align:center; }
.coin-wrap{ position:relative; margin-top:30px; display:flex; flex-direction:column; align-items:center; }
.coin-anim{ position:absolute; left:50%; top:-20px; transform:translateX(-50%); font-size:60px; opacity:0; pointer-events:none; }
.coin-anim.toss{ animation:tossUp 2.5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes tossUp { 0%{ transform:translateX(-50%) translateY(0) rotateY(0); opacity:1; } 100%{ transform:translateX(-50%) translateY(-800px) rotateY(2160deg); opacity:0; } }
.coin-result{ margin-top:30px; font-size:22px; font-family:var(--f-hand); color:var(--rose); line-height:1.4; opacity:0; transform:translateY(10px); transition:all .8s ease; display:none; padding:0 20px; text-shadow:0 2px 10px rgba(0,0,0,0.6); }
.coin-result.show{ display:block; opacity:1; transform:none; }
.j-coin.fs{ position:fixed; inset:0; z-index:999; background:rgba(0,0,0,0.8); backdrop-filter:blur(8px); display:flex; flex-direction:column; justify-content:center; padding-bottom:120px; }
.j-coin.fs .sec-title{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-coin.fs .sec-sub{ color:rgba(255,255,255,0.95); text-shadow:0 2px 10px rgba(0,0,0,0.5); }
.j-coin.fs .coin-btn{ display:none; }
.j-coin.fs .coin-wrap{ margin-top:80px; }
.j-coin.fs .coin-result{ color:#fff; position:absolute; bottom:40%; left:0; width:100%; margin:0; }


/* EMOJI UPRIGHT IN WHEEL */
.wl-txt .em { display: inline-block; transform: rotate(180deg); }

/* GALAXY FADE TO FIX BOTTOM GAP - removed as it caused layout cutting */


/* =========================================================
   ✨ INFINITE ABYSS
   ========================================================= */
.j-abyss{ text-align:center; overflow:hidden; }
.abyss-wrap{ position:relative; width:260px; height:260px; margin:30px auto; border-radius:50%; background:#110518; box-shadow:0 10px 40px rgba(0,0,0,0.5), inset 0 0 30px rgba(200,80,150,0.5); overflow:hidden; cursor:pointer; }
.tunnel-layer{ position:absolute; left:50%; top:50%; width:100%; height:100%; transform:translate(-50%,-50%); border-radius:50%; border:2px solid rgba(255,100,180,0.2); box-shadow:0 0 15px rgba(255,100,180,0.1), inset 0 0 15px rgba(255,100,180,0.1); opacity:0; animation:tunnelFall 8s linear infinite; pointer-events:none; }
.tunnel-layer:nth-child(1){ animation-delay: -0s; }
.tunnel-layer:nth-child(2){ animation-delay: -1s; }
.tunnel-layer:nth-child(3){ animation-delay: -2s; }
.tunnel-layer:nth-child(4){ animation-delay: -3s; }
.tunnel-layer:nth-child(5){ animation-delay: -4s; }
.tunnel-layer:nth-child(6){ animation-delay: -5s; }
.tunnel-layer:nth-child(7){ animation-delay: -6s; }
.tunnel-layer:nth-child(8){ animation-delay: -7s; }
@keyframes tunnelFall { 0%{ transform:translate(-50%,-50%) scale(2); opacity:0; } 10%{ opacity:1; } 90%{ opacity:0.8; } 100%{ transform:translate(-50%,-50%) scale(0.01); opacity:0; } }
.abyss-text{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.5); width:80%; font-family:var(--f-hand); font-size:24px; color:#fff; text-shadow:0 0 10px #ff6fa5; opacity:0; pointer-events:none; transition:opacity 1s ease, transform 2s ease; }
.abyss-text.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }


/* =========================================================
   ✨ SECRET TRICK BUTTONS
   ========================================================= */
.j-trick{ text-align:center; }
.trick-wrap{ display:flex; justify-content:center; gap:20px; margin:30px 0; }
.trick-btn{ width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg, #ffcce0, #ff9ec4); border:none; box-shadow:0 6px 15px rgba(200,80,120,0.3), inset 0 2px 4px #fff; cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; transition:transform 0.3s var(--spring); }
.trick-btn:active{ transform:scale(0.9); }
.trick-btn::after{ content:"?"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-cute); font-size:28px; color:#fff; text-shadow:0 1px 3px rgba(150,50,90,0.5); }
.trick-btn.opened{ background:#eee; box-shadow:inset 0 4px 10px rgba(0,0,0,0.1); pointer-events:none; }
.trick-btn.opened::after{ content:"💖"; text-shadow:none; opacity:0.8; }
.trick-result{ font-size:22px; font-family:var(--f-hand); color:var(--rose); padding:0 20px; opacity:0; transform:translateY(10px); transition:all 0.6s ease; line-height:1.4; display:none; }
.trick-result.show{ display:block; opacity:1; transform:none; }

/* =========================================================
   ✨ ALWAYS YOURS CONTRACT
   ========================================================= */
.j-contract{ text-align:center; }
.contract-doc{ position:relative; max-width:340px; margin:30px auto; background:#fbf8f1; padding:30px 20px; border-radius:6px; box-shadow:0 10px 25px rgba(0,0,0,0.15), inset 0 0 40px rgba(200,180,150,0.1); border:1px solid #e0d5c1; font-family:"Times New Roman", Times, serif; color:#3a3028; text-align:left; line-height:1.5; background-image:radial-gradient(#e0d5c1 1px, transparent 1px); background-size:30px 30px; }
.contract-doc h3{ text-align:center; font-family:var(--f-cute); font-size:22px; border-bottom:1px solid #d0c5b1; padding-bottom:10px; margin-bottom:20px; color:#5a4a3e; letter-spacing:1px; }
.contract-doc p{ font-size:16px; margin-bottom:15px; }
.sig-area{ position:relative; margin-top:40px; border-bottom:2px dashed #a09581; height:60px; display:flex; align-items:flex-end; }
.sig-x{ font-size:18px; color:#a09581; margin-bottom:4px; font-family:sans-serif; }
#sigCanvas{ position:absolute; left:20px; bottom:0; width:220px; height:60px; touch-action:none; }
.sig-hint{ text-align:center; font-size:12px; color:#a09581; margin-top:8px; font-style:italic; font-family:sans-serif; }
.contract-seal{ position:absolute; right:10px; bottom:10px; width:80px; height:80px; background:radial-gradient(circle at 30% 30%, #e63946, #9b2226); border-radius:50%; box-shadow:0 5px 15px rgba(0,0,0,0.4), inset 0 0 10px rgba(0,0,0,0.5); opacity:0; transform:scale(3); transition:all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:10; }
.contract-seal::after{ content:"❤️"; font-size:30px; text-shadow:1px 1px 2px rgba(0,0,0,0.5); opacity:0.8; }
.contract-seal.stamp{ opacity:1; transform:scale(1) rotate(-15deg); }

/* =========================================================
   ✨ NEVER-ENDING KISSES
   ========================================================= */
.j-kisses{ text-align:center; }
.kisses-wrap{ position:relative; width:240px; margin:30px auto; border-radius:16px; background:#fff; padding:10px; box-shadow:0 15px 35px rgba(150,60,110,0.2); transform:rotate(-2deg); }
.kisses-vid{ width:100%; height:auto; border-radius:10px; display:block; object-fit:cover; background:#f0e4e8; aspect-ratio:16/9; }

/* Animation for the trick result text */
@keyframes floatDance {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  25% { transform: translateY(-5px) rotate(3deg) scale(1.05); }
  75% { transform: translateY(5px) rotate(-3deg) scale(0.95); }
}
.dance-anim { animation: floatDance 2s ease-in-out infinite; transform-origin: center; display: inline-block; }

/* Letter Slider Styling */
.songs-list { overflow-x:auto; padding-bottom:30px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin: 0 10px; }
.rail::-webkit-scrollbar { display:none; }
.mini-env {
  flex: 0 0 110px;
  height: 130px;
  scroll-snap-align: center;
  background: linear-gradient(135deg, #fff, #ffe6f0);
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(150,60,110,0.15);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  cursor: pointer;
  border: 2px solid #ffb3d1;
  transition: transform 0.3s var(--spring), box-shadow 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.mini-env:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(150,60,110,0.1); }
.me-tap { font-family: var(--f-hand); font-size: 16px; color: var(--rose); margin-top: 8px; }

/* =========================================================
   5 NEW INTERACTIVE FEATURES
   ========================================================= */

/* ✨ BROKEN HEART FIXER (KINTSUGI) — shattered pieces */
.j-kintsugi { display:flex; flex-direction:column; align-items:center; text-align:center; }
/* reserve fixed heights for the title + sub so the heart NEVER moves when their text changes on completion */
.kintsugi-title { font-family:var(--f-cute); font-weight:700; text-align:center; font-size:clamp(28px,8vw,38px); color:var(--plum); line-height:1.15; min-height:2.3em; display:flex; align-items:center; justify-content:center; }
.kintsugi-sub { text-align:center; font-family:var(--f-hand); font-size:21px; color:var(--ink-soft); margin:8px 0 30px; min-height:1.6em; }
.kintsugi-wrap {
  position:relative; width:min(300px, 88vw); height:min(340px, 95vw);
  margin:0 auto; perspective:800px;
  background:linear-gradient(145deg, #2d1f3d, #1a1028);
  border-radius:32px;
  box-shadow:0 12px 40px rgba(80,30,60,.35), inset 0 2px 4px rgba(255,255,255,.08);
  overflow:visible; touch-action:none;
}
/* the heart lives in a smaller centred box so the shards have room to scatter inside the wrap */
.kintsugi-target, .kintsugi-pieces {
  position:absolute; top:50%; left:50%;
  width:min(188px, 56vw); height:min(188px, 56vw);
  transform:translate(-50%, -50%);
}
.kintsugi-target { opacity:1; transition:opacity 0.5s; z-index:1; }
.k-socket-svg { width:100%; height:100%; filter:drop-shadow(0 0 8px rgba(255,215,0,.15)); }
.kintsugi-pieces { z-index:2; transform-origin:center; }
/* each shard fills the whole stage; only its painted slice is grabbable, so they don't block each other */
.k-piece {
  position:absolute; inset:0; pointer-events:none; touch-action:none;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease; will-change:transform;
}
.k-piece svg { width:100%; height:100%; pointer-events:none; overflow:visible; }
.kp-hit { pointer-events:auto; cursor:grab; }
/* a shard locks home the moment it's near the centre */
.k-piece.snapped { z-index:4; filter:drop-shadow(0 0 12px rgba(255,200,80,.5)); }
.k-piece.snapped .kp-hit { cursor:default; pointer-events:none; }
/* when every shard is home the heart is whole — give it a living heartbeat + warm gold glow */
.kintsugi-wrap.fixed .kintsugi-pieces {
  animation:kBeat 1.5s ease-in-out .5s infinite;
  filter:drop-shadow(0 8px 22px rgba(214,48,96,.4)) drop-shadow(0 0 26px rgba(255,205,80,.4));
}
.kintsugi-wrap.fixed .k-piece { filter:none; }
@keyframes kBeat {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  14% { transform:translate(-50%,-50%) scale(1.07); }
  28% { transform:translate(-50%,-50%) scale(1); }
  42% { transform:translate(-50%,-50%) scale(1.045); }
  56% { transform:translate(-50%,-50%) scale(1); }
}
.kintsugi-wrap.fixed .kintsugi-target { opacity:0; }
.kintsugi-wrap.fixed {
  background:linear-gradient(145deg, #3d2a1a, #2a1a0d);
  box-shadow:0 0 50px rgba(255,215,0,.25), 0 12px 40px rgba(80,30,60,.35);
}
.kintsugi-wrap.fixed::after {
  content:''; position:absolute; inset:-4px; border-radius:36px;
  background:linear-gradient(135deg, rgba(255,215,0,.4), rgba(255,180,50,.2), rgba(255,215,0,.4));
  z-index:-1; animation:goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse {
  0%,100% { opacity:.5; transform:scale(1); }
  50% { opacity:1; transform:scale(1.02); }
}
.kintsugi-msg {
  margin-top:20px; font-family:var(--f-hand); font-size:22px; color:var(--rose);
  min-height:1.4em; opacity:0; transform:translateY(8px);
  transition:opacity .6s ease, transform .6s ease;
}
.kintsugi-msg.show { opacity:1; transform:none; }

/* ✨ VENDING MACHINE — modern cute dispenser */
.j-vending { text-align:center; }
.vending-machine {
  width:min(280px, 82vw); margin:0 auto; display:flex; flex-direction:column; position:relative;
}
.vending-machine.rumble { animation:machineRumble 0.4s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes machineRumble { 0%,100%{transform:translate(0,0);} 20%{transform:translate(-2px,3px) rotate(-1deg);} 40%{transform:translate(2px,-2px) rotate(1deg);} 60%{transform:translate(-3px,-1px) rotate(-1deg);} 80%{transform:translate(1px,2px) rotate(0deg);} }
/* Glass dome */
.vm-dome {
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,245,250,.75));
  border-radius:100px 100px 14px 14px; height:min(140px, 42vw); position:relative;
  box-shadow:inset 0 6px 20px rgba(200,80,120,.1), inset 0 -3px 10px rgba(255,255,255,.5);
  border:2px solid rgba(255,255,255,.85); overflow:hidden; z-index:2; margin:0 6px;
}
.vm-dome::after {
  content:''; position:absolute; top:0; left:10%; width:25%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); pointer-events:none; z-index:10;
}
.vm-capsules { position:absolute; bottom:0; left:0; width:100%; height:100%; }
.vm-capsule {
  position:absolute; width:min(34px, 10vw); height:min(34px, 10vw); border-radius:50%;
  background:var(--c);
  box-shadow:inset -3px -3px 8px rgba(0,0,0,.1), inset 3px 3px 8px rgba(255,255,255,.8), 0 3px 6px rgba(180,70,120,.15);
}
/* Body */
.vm-body {
  background:linear-gradient(160deg, #fff5f8, #ffecf2);
  border-radius:14px; padding:14px 14px 10px; position:relative;
  box-shadow:0 6px 20px rgba(180,70,120,.1), inset 0 1px 0 rgba(255,255,255,.9);
  border-bottom:8px solid #ffc8da; z-index:1; margin-top:-6px;
}
.vm-panel { display:flex; flex-direction:column; gap:8px; }
.vm-btn {
  background:#fff; border:none; padding:10px 14px; border-radius:12px;
  font-family:var(--f-cute); font-size:14px; font-weight:600; color:var(--rose);
  box-shadow:0 3px 0 #ffe0ea; cursor:pointer; touch-action:manipulation;
  transition:all 0.12s ease; position:relative; overflow:hidden;
}
.vm-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  pointer-events:none; border-radius:12px;
}
.vm-btn:active { transform:translateY(3px); box-shadow:0 0 0 #ffe0ea; }
/* Dropzone — warm pink instead of dark */
.vm-dropzone {
  margin-top:10px; height:60px;
  background:linear-gradient(180deg, #ffe8f0, #ffd6e4);
  border-radius:10px; box-shadow:inset 0 3px 8px rgba(180,70,120,.1);
  position:relative; display:flex; justify-content:center; align-items:flex-end;
  padding-bottom:5px; overflow:visible; z-index:3;
  border:1px dashed rgba(255,150,180,.4);
}
.vm-tray-inner { width:100%; height:100%; position:relative; z-index:4; }
.vm-dispensed {
  position:absolute; bottom:4px; left:50%; width:40px; height:40px; border-radius:50%;
  background:var(--c, #ffb3c6);
  box-shadow:inset -3px -3px 10px rgba(0,0,0,.15), inset 3px 3px 10px rgba(255,255,255,.85), 0 8px 16px rgba(0,0,0,.25);
  transform:translateX(-50%) translateY(-60px); opacity:0; cursor:pointer;
  z-index:100; pointer-events:auto;
}
.vm-dispensed.drop { animation:capsuleDrop 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards; }
.vm-dispensed.drop.pulse {
  animation:capsulePulse 1.5s infinite alternate; opacity:1;
  transform:translateX(-50%) translateY(0);
}
@keyframes capsulePulse {
  0% { box-shadow:inset -3px -3px 10px rgba(0,0,0,.15), inset 3px 3px 10px rgba(255,255,255,.85), 0 8px 16px rgba(0,0,0,.25), 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow:inset -3px -3px 10px rgba(0,0,0,.15), inset 3px 3px 10px rgba(255,255,255,.85), 0 8px 16px rgba(0,0,0,.25), 0 0 20px rgba(255,200,220,.6); }
}
@keyframes capsuleDrop {
  0% { transform:translateX(-50%) translateY(-60px) scale(0.8); opacity:0; }
  60% { transform:translateX(-50%) translateY(6px) scale(1.08); opacity:1; }
  80% { transform:translateX(-50%) translateY(-3px) scale(0.96); }
  100% { transform:translateX(-50%) translateY(0) scale(1); opacity:1; }
}

/* ✨ ANXIETY SHREDDER */
.j-shredder { text-align:center; }
.shredder-wrap { width:100%; max-width:340px; margin:0 auto; display:flex; flex-direction:column; }
.shredder-top {
  background:linear-gradient(180deg, #fff, #fff8fa); padding:18px 18px 2px 18px; border-radius:20px 20px 0 0;
  box-shadow:0 -6px 24px rgba(180,70,120,.06); position:relative; z-index:3;
  transition:transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.5s ease;
  display:flex; flex-direction:column; gap:14px;
}
.shredder-top.shredding {
  transform:translateY(-100%) rotate(-2deg); opacity:0; pointer-events:none;
}
.shredder-input {
  width:100%; border:2px solid #ffd6df; border-radius:14px; padding:14px 16px;
  font-family:var(--f-body); font-size:15px; color:var(--ink); background:#fffafb;
  resize:none; outline:none; transition:border-color 0.3s, box-shadow 0.3s;
  min-height:60px;
}
.shredder-input:focus {
  border-color:var(--rose); box-shadow:0 0 0 4px rgba(255,158,196,.15);
}
.shredder-input::placeholder { color:#c9a0b0; }
.shred-btn {
  font-family:var(--f-cute); font-weight:600; font-size:15px; color:#fff; border:none;
  padding:12px 24px; border-radius:14px; cursor:pointer;
  background:linear-gradient(180deg, var(--straw), var(--straw-2));
  box-shadow:0 4px 12px rgba(255,110,165,.35), inset 0 1px 2px rgba(255,255,255,.5);
  transition:transform .15s var(--spring); touch-action:manipulation;
  align-self:center;
}
.shred-btn:active { transform:scale(.95); }

/* The paper that forms from the text — anchored ABOVE the slot as an absolute child of the
   machine, so it never pushes the machine. It slides DOWN through the mouth (behind the dark
   slot) when shredded. The machine itself stays in its exact position. */
.shredder-paper {
  position:absolute; left:50%; bottom:100%; margin-bottom:6px;
  width:min(300px, 86vw);
  background:#fff; border-radius:4px;
  font-family:var(--f-hand); font-size:16px; color:var(--ink);
  line-height:1.5; text-align:left;
  box-shadow:0 2px 8px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  z-index:1; transform-origin:bottom center;
  transform:translateX(-50%) translateY(-14px) rotate(-1deg); opacity:0;
  transition:transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.4s ease, max-height 0.4s ease, padding 0.4s ease;
  border:1px solid rgba(0,0,0,.04);
  /* collapsed until there's actually paper */
  max-height:0; min-height:0; padding:0 18px; overflow:hidden; border-color:transparent;
}
.shredder-paper.visible {
  transform:translateX(-50%) translateY(0) rotate(0); opacity:1;
  max-height:240px; padding:16px 18px; border-color:rgba(0,0,0,.04);
}
.shredder-paper.going-down {
  transform:translateX(-50%) translateY(38px) scale(0.96) rotate(0); opacity:0;
  transition:transform 0.8s cubic-bezier(.4,0,.2,1), opacity 0.6s ease;
}

/* The shredder machine — directly attached to white container, zero gap, NEVER moves */
.shredder-machine {
  height:36px; background:linear-gradient(180deg, #e8e4e0, #d4d0cc);
  border-radius:0 0 8px 8px; position:relative; z-index:4;
  box-shadow:0 3px 12px rgba(180,70,120,.1), inset 0 1px 0 rgba(255,255,255,.5);
  display:flex; justify-content:center; align-items:center;
  border:1px solid rgba(0,0,0,.06);
  border-top:none;
  margin-top:0;
}
.shredder-mouth {
  width:92%; height:9px; background:linear-gradient(180deg, #333, #111);
  border-radius:4px; box-shadow:inset 0 2px 5px rgba(0,0,0,.7);
  position:relative; overflow:hidden; z-index:2;   /* sits OVER the paper so it slides behind the slot */
}
.shredder-mouth::before {
  content:''; position:absolute; inset:1px 3px;
  background:repeating-linear-gradient(90deg, transparent 0 3px, rgba(255,255,255,.06) 3px 4px);
}

/* The falling strips */
.shredder-bottom {
  position:relative; height:100px; overflow:hidden;
  margin-top:-10px; z-index:2;
}
.shred-strip {
  position:absolute; top:8px; width:14px;
  background:linear-gradient(180deg, #fff, #f8f4f0);
  box-shadow:0 2px 5px rgba(180,70,120,.1);
  border-left:1px dashed rgba(0,0,0,.05);
  animation:stripFall linear forwards;
  border-radius:1px; font-family:var(--f-body); font-size:8px;
  color:var(--ink); overflow:hidden; white-space:pre-wrap;
  padding-top:8px; text-align:left; line-height:1.1;
  word-wrap:break-word; opacity:.8;
}
@keyframes stripFall {
  0% { transform:translateY(0) rotate(0); opacity:.85; }
  100% { transform:translateY(120px) rotate(var(--rot)); opacity:0; }
}
.shredder-msg {
  font-family:var(--f-hand); font-size:22px; color:var(--cherry);
  min-height:1.4em; opacity:0; transition:opacity 0.5s; margin-top:12px;
}
.shredder-msg.show { opacity:1; }

/* ✨ WAX SEALANT — reduced gap from shredder */
.j-wax { text-align:center; }
.wax-wrap { margin:0 auto; width:min(300px, 88vw); perspective:1000px; display:flex; justify-content:center; }
.wax-envelope {
  position:relative; width:100%; aspect-ratio:1.6/1;
  background:linear-gradient(180deg, #fdf9f1, #f5ede0);
  border-radius:10px;
  box-shadow:0 8px 24px rgba(180,70,120,.12), inset 0 1px 2px rgba(255,255,255,.8);
}
.we-letter {
  position:absolute; bottom:10%; left:8%; right:8%; height:70%;
  background:#fff; border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  padding:20px; text-align:center;
  font-family:var(--f-serif); font-size:clamp(15px, 4vw, 18px); color:var(--ink);
  opacity:0; transform:translateY(20px);
  transition:all 0.8s cubic-bezier(.36,.07,.19,.97);
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(0,0,0,.04);
}
.we-flap-bottom {
  position:absolute; bottom:0; left:0; width:100%; height:100%;
  clip-path:polygon(0 100%, 50% 35%, 100% 100%, 100% 100%, 0 100%);
  background:linear-gradient(180deg, #f0e8d8, #e8dfd0);
  border-radius:0 0 10px 10px; z-index:2;
}
.we-flap-top {
  position:absolute; top:0; left:0; width:100%; height:100%;
  clip-path:polygon(0 0, 100% 0, 50% 65%);
  background:linear-gradient(180deg, #faf5eb, #f0e8d8);
  border-radius:10px 10px 0 0; z-index:3;
  transform-origin:top center; transition:transform 0.8s cubic-bezier(.34,1.56,.64,1);
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.06));
}
.wax-seal {
  position:absolute; top:42%; left:50%; transform:translate(-50%, -50%);
  width:min(80px, 24vw); height:min(80px, 24vw);
  background:radial-gradient(circle at 35% 35%, #ef5350, #c62828 45%, #8e1a1a 85%);
  border-radius:50%; z-index:10;
  box-shadow:
    inset -4px -4px 10px rgba(0,0,0,.4),
    inset 4px 4px 10px rgba(255,120,120,.35),
    0 5px 15px rgba(0,0,0,.4),
    0 0 0 3px rgba(200,30,30,.25);
  display:flex; justify-content:center; align-items:center;
  cursor:pointer; touch-action:none;
  transition:transform 0.5s cubic-bezier(.34,1.56,.64,1), opacity 0.45s ease, box-shadow 0.15s ease;
  user-select:none; -webkit-user-select:none;
}
.wax-seal::before {
  content:''; position:absolute; inset:6px; border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  box-shadow:inset 0 0 6px rgba(0,0,0,.2);
}
.wax-seal::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 28% 22%, rgba(255,255,255,.3), transparent 45%);
  pointer-events:none;
}
.ws-logo {
  width:min(30px, 9vw); height:min(30px, 9vw);
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  pointer-events:none; z-index:2;
}
/* press feedback while holding the seal */
.wax-seal.pressing { transform:translate(-50%,-50%) scale(1.12); filter:brightness(1.14); }
/* flap and seal are now staged SEPARATELY so the close can play: card in → flap shuts → seal returns */
.wax-envelope.flap-up .we-flap-top { transform:rotateX(166deg); z-index:1; }
.wax-envelope.seal-gone .wax-seal {
  opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(18deg); pointer-events:none;
}

/* ✨ MAGNIFYING GLASS OVERLAY */
.j-magnifier { text-align:center; padding:26px 20px !important; }
.j-magnifier .clay-btn { margin-top:8px; }
.mag-overlay {
  position:fixed; inset:0; z-index:2000;
  background:rgba(20,10,28,.88);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  display:flex; justify-content:center; align-items:center;
  opacity:0; pointer-events:none; transition:opacity 0.4s; overflow:hidden;
}
.mag-overlay.active { opacity:1; pointer-events:auto; }
.mag-bg {
  position:absolute; inset:0; display:flex; justify-content:center; align-items:center;
  text-align:center; padding:30px; pointer-events:none;
}
.mag-microtext {
  font-family:var(--f-body); font-size:8px; color:rgba(255,255,255,.4);
  word-wrap:break-word; line-height:1.4; letter-spacing:0;
  max-width:800px; text-align:justify; opacity:.9;
}
.mag-lens-wrap {
  position:absolute; width:min(200px, 55vw); height:min(200px, 55vw);
  left:50%; top:50%; transform:translate(-50%, -50%);
  border-radius:50%; cursor:grab; touch-action:none; z-index:2001;
}
.mag-lens-wrap:active { cursor:grabbing; }
.mag-lens {
  width:100%; height:100%; border-radius:50%;
  box-shadow:
    0 0 0 6px #333,
    0 0 0 8px #555,
    inset 0 0 30px rgba(255,255,255,.08),
    0 20px 50px rgba(0,0,0,.5);
  background:transparent;
  position:relative; overflow:hidden;
}
.mag-lens::after {
  content:''; position:absolute; width:min(30px, 8vw); height:min(90px, 25vw);
  background:linear-gradient(180deg, #444, #222);
  bottom:-60px; right:-18px; transform:rotate(-45deg);
  border-radius:14px; z-index:-1;
  box-shadow:inset -3px -3px 8px rgba(255,255,255,.15);
}
.mag-lens::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 35%, rgba(255,255,255,.05) 100%);
  z-index:10; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);
}
.mag-lens-inner {
  position:absolute; width:100vw; height:100vh;
  display:flex; justify-content:center; align-items:center;
  text-align:center; pointer-events:none;
  transform-origin:center center;
}
.mag-macrotext {
  font-family:var(--f-hand); font-size:clamp(32px, 10vw, 48px);
  color:var(--cherry); font-weight:bold; letter-spacing:0.05em;
  text-shadow:0 3px 12px rgba(255,79,126,.3);
  width:100vw; text-align:center; transform:scale(3.5);
}
.mag-close-btn {
  position:absolute; top:20px; right:20px;
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.2);
  width:48px; height:48px; border-radius:50%;
  font-size:20px; color:#fff; cursor:pointer; z-index:3000;
  display:flex; justify-content:center; align-items:center;
  transition:transform 0.2s, background 0.2s; font-family:sans-serif;
  backdrop-filter:blur(8px);
}
.mag-close-btn:active { transform:scale(0.9); background:rgba(255,255,255,.25); }

/* Prevent text selection and long-press callouts on interactive hold targets */
.meter-btn, .hand-pad, .fingerprint, .wax-seal, .scratch-wrap, .k-piece, .coin-btn, .hug-btn, .vm-btn, .wheel {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}