/* ==========================================================================
   Happy Birthday, Fareeha 💖 — styles & animations
   ========================================================================== */

:root {
  --rose: #e8476a;
  --berry: #c2357e;
  --violet: #b45cff;
  --cream: #fff8f3;
  --ink: #3a1e2a;
  --ink-soft: #7a5866;
  --teal: #1fa597;
  --radius: 22px;
  --shadow: 0 18px 50px -22px rgba(122, 30, 70, .38);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Great Vibes", "Segoe Script", cursive;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --font-mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light only;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
html.locked, body.locked, body.modal-open { overflow: hidden; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.container { width: min(1100px, 100% - 32px); margin-inline: auto; }
.center { text-align: center; }
.script { font-family: var(--font-script); font-weight: 400; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: #ffd0dc; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.5em; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, #ff6b8b, var(--rose) 55%, var(--berry));
  color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  box-shadow: 0 12px 26px -10px rgba(232, 71, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s ease, box-shadow .2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(232, 71, 106, .75), inset 0 1px 0 rgba(255, 255, 255, .35); }
.btn:active { transform: translateY(1px) scale(.98); }
button:focus-visible, a:focus-visible { outline: 3px solid #ffc94d; outline-offset: 3px; }
.btn-ghost { background: rgba(255, 255, 255, .82); color: var(--rose); box-shadow: inset 0 0 0 2px rgba(232, 71, 106, .35); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px rgba(232, 71, 106, .6), 0 10px 22px -12px rgba(232, 71, 106, .6); }
.btn.teal { background: linear-gradient(135deg, #34cdbd, var(--teal) 60%, #157f75); box-shadow: 0 12px 26px -10px rgba(31, 165, 151, .7), inset 0 1px 0 rgba(255, 255, 255, .35); }

/* ---------- scroll progress ---------- */
.progress { position: fixed; left: 0; right: 0; top: 0; z-index: 45; height: 4px; pointer-events: none; }
.progress span { display: block; height: 100%; border-radius: 0 4px 4px 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #ff8fab, var(--rose), var(--violet)); }

/* ==========================================================================
   Gate (countdown + gift)
   ========================================================================== */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: grid; place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  overflow: hidden; text-align: center; color: #fff;
  touch-action: none; overscroll-behavior: contain;
  background: radial-gradient(ellipse at 50% 115%, #6b2160 0%, #2c0f36 45%, #12061a 100%);
  transition: opacity 1s ease, transform 1.2s ease, filter 1s ease;
}
.gate.gone { opacity: 0; transform: scale(1.12); filter: blur(8px); pointer-events: none; }
.sky-stars, .sky-stars::before, .sky-stars::after { position: absolute; inset: 0; pointer-events: none; }
.sky-stars {
  opacity: .7;
  background-image:
    radial-gradient(circle at 20px 30px, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 140px 80px, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 90px 170px, #ffe3ef 0 1px, transparent 1.6px),
    radial-gradient(circle at 200px 140px, #fff 0 .8px, transparent 1.4px);
  background-size: 230px 230px;
}
.sky-stars::before {
  content: "";
  background-image:
    radial-gradient(circle at 50px 60px, #fff 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 250px 210px, #ffd8e6 0 1.2px, transparent 2px),
    radial-gradient(circle at 160px 300px, #fff 0 1px, transparent 1.8px);
  background-size: 330px 330px;
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
.sky-stars::after {
  content: "";
  background-image:
    radial-gradient(circle at 120px 40px, #fff 0 1.6px, transparent 2.6px),
    radial-gradient(circle at 330px 260px, #fff6c9 0 1.3px, transparent 2.2px),
    radial-gradient(circle at 40px 380px, #fff 0 1px, transparent 1.8px);
  background-size: 430px 430px;
  animation: twinkle 4.6s ease-in-out infinite alternate-reverse;
}
.moon { position: absolute; top: 8%; right: 10%; width: 64px; height: 64px; border-radius: 50%; box-shadow: inset -15px 9px 0 0 #ffe9b8; transform: rotate(-18deg); filter: drop-shadow(0 0 16px rgba(255, 233, 184, .55)); }

.countdown, .gift-stage { position: relative; z-index: 1; width: min(640px, 100%); }
.gift-stage { animation: fadeUp .9s ease both; }
.gate-kicker { margin: 0 0 .6em; font-size: .78rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #ffb3c6; }
.gate-title { margin: 0 0 .9em; font-size: clamp(1.6rem, 6vw, 2.6rem); font-weight: 900; line-height: 1.15; }
.cd { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 16px); }
.cd-cell { min-width: clamp(68px, 19vw, 112px); padding: 14px 6px 10px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.cd-cell b { display: block; font-size: clamp(2rem, 9vw, 3.6rem); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; background: linear-gradient(#fff, #ffc2d4); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cd-cell small { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.gate-note { margin: 1.8em 0 0; line-height: 1.7; opacity: .85; }
.countdown.done { animation: zoomAway .8s ease forwards; }

.gate-name { margin: 0; font-family: var(--font-script); font-size: clamp(2.7rem, 12vw, 5rem); font-weight: 400; line-height: 1.15; text-shadow: 0 0 28px rgba(255, 120, 170, .6); }
.gate-gift { position: relative; display: block; width: min(60vw, 250px); aspect-ratio: 1; margin: 4px auto 0; padding: 0; border: 0; background: none; cursor: pointer; }
.gate-gift .gift-svg { position: relative; z-index: 2; width: 100%; height: 100%; transform-origin: 50% 95%; animation: giftIdle 3.2s ease-in-out infinite; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); }
.gate-glow { position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 120, 170, .6), transparent 66%); animation: glowPulse 2.4s ease-in-out infinite; }
.gate-rays {
  position: absolute; inset: -55%; z-index: 1; border-radius: 50%;
  opacity: 0; scale: .3;
  background: repeating-conic-gradient(rgba(255, 226, 140, 0) 0deg 9deg, rgba(255, 226, 140, .4) 9deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 16%, transparent 62%);
  mask: radial-gradient(circle, #000 16%, transparent 62%);
  transition: opacity .6s ease, scale 1s cubic-bezier(.2, .9, .3, 1);
}
.gate-gift.shaking .gift-svg { animation: shake .6s linear; }
.gate-gift.open .gift-svg { animation: none; }
.gate-gift.open .gate-rays { opacity: 1; scale: 1; animation: spin 14s linear infinite; }
.gate-hint { margin: 16px 0 0; font-size: 1.1rem; font-weight: 800; animation: hintPulse 1.8s ease-in-out infinite; }
.gate-sound { margin: 6px 0 0; font-size: .82rem; opacity: .6; }

/* the gift drawing (used by the gate and the gift grid) */
.gift-svg { overflow: visible; --g-base: #ff5c8a; --g-top: #ff7ba0; --g-rib: #ffd166; --g-knot: #f2b437; }
.g-base { fill: var(--g-base); }
.g-top { fill: var(--g-top); }
.g-rib { fill: var(--g-rib); }
.g-loop { fill: var(--g-rib); stroke: var(--g-knot); stroke-width: 3; stroke-linejoin: round; }
.g-knot { fill: var(--g-knot); }
.g-shadow { fill: rgba(0, 0, 0, .13); }
.gift-svg .g-lid { transform-origin: 100px 82px; transition: transform .8s cubic-bezier(.2, .8, .3, 1), opacity .7s ease .15s; }
.gate-gift.open .g-lid, .gift-tile.open .g-lid { transform: translate(-34px, -120px) rotate(-38deg); opacity: 0; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { position: relative; display: grid; place-items: center; min-height: 100vh; min-height: 100svh; padding: 84px 0 72px; overflow: hidden; text-align: center; background: var(--cream); }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; opacity: .8; filter: blur(60px); animation: blob 18s ease-in-out infinite alternate; }
.b1 { left: -22vmax; top: -24vmax; width: 60vmax; height: 60vmax; background: #ffc9d8; }
.b2 { right: -18vmax; top: 4vmax; width: 48vmax; height: 48vmax; background: #e6d8ff; animation-delay: -6s; }
.b3 { left: 18vmax; bottom: -34vmax; width: 52vmax; height: 52vmax; background: #ffe2c6; animation-delay: -12s; }
.hero-content { position: relative; z-index: 2; width: min(920px, 100% - 32px); pointer-events: none; }
.hero-content a, .hero-content .ch { pointer-events: auto; }
.hero-kicker {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .4em;
  margin: 0; padding: .5em 1.1em; border-radius: 999px;
  background: rgba(255, 255, 255, .75); box-shadow: 0 8px 22px -12px rgba(232, 71, 106, .55);
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--rose);
  opacity: 0;
}
.hero-title { margin: .45em 0 0; font-weight: 900; line-height: 1; }
.hb { display: block; font-size: clamp(2.5rem, 10.5vw, 5.8rem); letter-spacing: -.02em; }
.hb .ch { display: inline-block; opacity: 0; transform: translateY(-70px) rotate(-12deg) scale(.6); cursor: default; }
.hb .sp { display: inline-block; width: .28em; }
.hero.play .hero-kicker { animation: fadeDown .8s ease .15s forwards; }
.hero.play .hb .ch { animation: dropIn .85s cubic-bezier(.2, 1.5, .35, 1) forwards; animation-delay: calc(.35s + var(--i) * 60ms); }
.hb.landed .ch { opacity: 1; transform: none; animation: none; }
.hb.landed .ch.jump { animation: jump .6s ease; }
.hero-name {
  display: block; margin-top: -.02em; padding: .02em .25em .12em;
  font-family: var(--font-script); font-size: clamp(5.4rem, 25vw, 12.5rem); font-weight: 400; line-height: 1;
  background: linear-gradient(90deg, #e8476a 0%, #ff8a5c 25%, #c04df0 50%, #ff8a5c 75%, #e8476a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(-30% 100% -30% -10%);
}
.hero.play .hero-name { animation: write 2s cubic-bezier(.6, .1, .3, 1) 1.3s forwards, shimmer 6s linear 3.4s infinite; }
.ecg { display: block; width: min(560px, 94%); height: auto; margin: .1em auto 0; overflow: visible; }
.ecg-line, .ecg-v { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ecg-line { stroke: url(#ecgGrad); }
.ecg-v { stroke: #d9305a; }
.ecg-fill { fill: url(#heartGrad); transform-box: fill-box; transform-origin: 50% 55%; transform: scale(0); }
.hero.play .ecg-line { animation: draw 3s cubic-bezier(.45, 0, .55, 1) 2.1s forwards; }
.hero.play .ecg-v { animation: draw .7s ease-out 3.2s forwards; }
.hero.play .ecg-fill { animation: heartPop .7s cubic-bezier(.3, 1.8, .5, 1) 3.7s forwards, beat 1.3s ease-in-out 4.4s infinite; }
.hero-sub { max-width: 34em; margin: 1.1em auto 0; font-size: clamp(1.05rem, 2.7vw, 1.3rem); font-weight: 600; color: var(--ink-soft); opacity: 0; }
.hero.play .hero-sub { animation: fadeUp 1s ease 3.9s forwards; }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 1.8em; font-weight: 800; color: var(--rose); text-decoration: none; opacity: 0; }
.scroll-cue span { font-size: 1.4rem; animation: bounce 1.6s ease-in-out infinite; }
.hero.play .scroll-cue { animation: fadeUp 1s ease 4.5s forwards; }

/* balloons (tap to pop) */
.balloons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.balloon {
  position: absolute; left: var(--x); bottom: -190px;
  width: calc(62px * var(--s, 1)); height: calc(150px * var(--s, 1));
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  animation: rise var(--d, 14s) linear var(--delay, 0s) infinite both;
}
.balloon-inner { position: absolute; inset: 0; transform-origin: 50% 0; animation: sway var(--sway, 3s) ease-in-out infinite alternate; }
.balloon-body {
  position: absolute; left: 0; top: 0; width: 100%; height: 56%;
  border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 32% 27%, rgba(255, 255, 255, .85) 0 5%, rgba(255, 255, 255, 0) 20%),
    radial-gradient(circle at 45% 38%, var(--c) 0 40%, var(--c2) 100%);
  box-shadow: inset -6px -8px 14px rgba(0, 0, 0, .08);
}
.balloon-body::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 9px; margin-left: -6px; background: var(--c2); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-string { position: absolute; left: 50%; top: 57%; width: 2px; height: 43%; margin-left: -1px; transform-origin: 50% 0; background: linear-gradient(rgba(122, 88, 102, .55), rgba(122, 88, 102, 0)); animation: sway 1.8s ease-in-out infinite alternate-reverse; }
.balloon.popped { pointer-events: none; }
.balloon.popped .balloon-body { animation: popB .22s ease-out forwards; }
.balloon.popped .balloon-string { animation: fall .8s ease-in forwards; }
.float-text { position: fixed; z-index: 85; font-size: 1.05rem; font-weight: 900; color: var(--rose); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; animation: floatText 1.4s ease-out forwards; }

/* ==========================================================================
   Shared section bits
   ========================================================================== */
.section { position: relative; padding: clamp(72px, 11vw, 128px) 0; overflow: hidden; }
.sec-head { max-width: 680px; margin: 0 auto clamp(30px, 5vw, 54px); text-align: center; }
.kicker { margin: 0 0 .5em; font-size: .8rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }
.sec-head h2 { margin: 0; font-size: clamp(2.1rem, 6.6vw, 3.6rem); font-weight: 900; line-height: 1.08; letter-spacing: -.02em; }
.sec-head h2 .script {
  display: inline-block; padding: .02em .14em .14em;
  font-size: 1.4em; line-height: .85; letter-spacing: 0;
  background: linear-gradient(90deg, var(--rose), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec-sub { margin: .8em auto 0; font-size: 1.05rem; color: var(--ink-soft); }

.reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--delay, 0s); }
.reveal.from-left { transform: translateX(-48px); }
.reveal.from-right { transform: translateX(48px); }
.reveal.zoom { transform: scale(.86); }
.reveal.in { opacity: 1; transform: none; }

/* photo slots (timeline + polaroids) */
.photo-slot {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  padding: 0; border: 0; border-radius: 16px; overflow: hidden; cursor: zoom-in;
  background: linear-gradient(135deg, hsl(var(--h, 340) 92% 88%), hsl(calc(var(--h, 340) + 40) 90% 92%));
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 35%); opacity: 0; transition: opacity .8s ease, transform 5s ease; }
.photo-slot.has-photo img { opacity: 1; }
.photo-slot:hover img { transform: scale(1.06); }
.ph-fallback { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .6s; }
.ph-fallback::before { content: ""; position: absolute; inset: 0; opacity: .5; background: radial-gradient(circle, rgba(255, 255, 255, .75) 0 2.5px, transparent 3px) 0 0 / 22px 22px; }
.photo-slot.has-photo .ph-fallback { opacity: 0; }
.ph-emoji { position: relative; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; filter: drop-shadow(0 8px 10px rgba(120, 40, 70, .18)); animation: floaty 4s ease-in-out infinite; }

/* ==========================================================================
   Numbers
   ========================================================================== */
.numbers { background: linear-gradient(180deg, var(--cream), #fff0f4); }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 14px; }
.stat { container-type: inline-size; padding: 26px 14px 22px; border: 1px solid rgba(232, 71, 106, .1); border-radius: var(--radius); background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); text-align: center; }
.stat-num { display: inline-block; padding-bottom: .05em; font-size: clamp(2.2rem, 6vw, 3.4rem); font-size: min(3.4rem, 28cqi); font-weight: 900; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--rose), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat p { margin: .55em 0 0; font-size: .95rem; font-weight: 700; line-height: 1.35; color: var(--ink-soft); }
.live { margin-top: 36px; padding: clamp(26px, 5vw, 44px) 18px; border-radius: 28px; text-align: center; color: #fff; background: linear-gradient(135deg, #2c0f36, #6b2160); box-shadow: 0 30px 60px -30px rgba(60, 10, 50, .7); }
.live-title { margin: 0; font-weight: 700; opacity: .9; }
.live-clock { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 16px 0; }
.live-clock span { min-width: 78px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .1); font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.live-clock b { display: block; font-size: clamp(1.5rem, 5.5vw, 2.3rem); font-weight: 900; line-height: 1.15; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.live-beats { margin: 0; line-height: 1.6; }
.live-beats strong { color: #ff9fbb; font-variant-numeric: tabular-nums; }
.live-beats span { opacity: .8; }

/* ==========================================================================
   The animated love story
   ========================================================================== */
.story { background: linear-gradient(180deg, #fff0f4, #f3edff); }
.theater { max-width: 980px; margin: 0 auto; }
.stage {
  --bw: clamp(78px, 18%, 176px); --cw: calc(var(--bw) * .6);
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
  border-radius: 30px;
  background: linear-gradient(180deg, #ffc8db 0%, #ffdccf 50%, #fff0e4 100%);
  box-shadow: 0 30px 60px -30px rgba(120, 40, 90, .5), inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.sun { position: absolute; right: 9%; top: 10%; width: 15%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff7d9 0 38%, #ffd98a 58%, rgba(255, 200, 120, 0) 72%); animation: glowPulse 5s ease-in-out infinite; }
.cloud { position: absolute; left: -16%; width: 14%; aspect-ratio: 2.6; border-radius: 999px; background: #fff; opacity: .9; animation: drift var(--dur, 46s) linear var(--dl, 0s) infinite; }
.cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: #fff; }
.cloud::before { left: 16%; top: -40%; width: 44%; aspect-ratio: 1; }
.cloud::after { left: 48%; top: -26%; width: 34%; aspect-ratio: 1; }
.c1 { top: 14%; --dur: 52s; --travel: 940%; }
.c2 { top: 30%; width: 10%; opacity: .75; --dur: 64s; --dl: -30s; --travel: 1300%; }
.c3 { top: 7%; width: 8%; opacity: .65; --dur: 40s; --dl: -14s; --travel: 1620%; }
.hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 36%; }
.hill-back { fill: #ffc2d5; }
.hill-front { fill: #ffdbe6; }
.big-heart { position: absolute; left: 50%; bottom: 13%; z-index: 1; width: 42%; max-width: 360px; fill: rgba(255, 92, 138, .32); transform: translateX(-50%) scale(0); transform-origin: 50% 85%; filter: drop-shadow(0 0 24px rgba(255, 92, 138, .5)); transition: transform 1.4s cubic-bezier(.3, 1.5, .5, 1); }
.stage.ending .big-heart { transform: translateX(-50%) scale(1); animation: bigBeat 1.4s ease-in-out 1.4s infinite; }

.actor { position: absolute; left: var(--x, -30%); bottom: 7%; z-index: 2; width: var(--bw); transform: translateX(-50%); transition: left var(--t, 2.6s) cubic-bezier(.45, .05, .55, .95); }
.actor.her { z-index: 3; }
.actor.kitty { bottom: 2%; z-index: 4; width: var(--cw); }
.stage.instant .actor, .hug-overlay.instant .actor { transition: none; }
.actor > svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.actor.walking > svg { animation: waddle .42s ease-in-out infinite alternate; }
.actor.walking .leg-l { animation: step .42s ease-in-out infinite alternate; }
.actor.walking .leg-r { animation: step .42s ease-in-out infinite alternate-reverse; }
.actor.kitty.walking > svg { animation: catHop .32s ease-in-out infinite alternate; }
.actor.hugging > svg { animation: squeeze 1.6s ease-in-out infinite; }
.pop { position: absolute; left: 50%; top: -24%; font-size: clamp(18px, 3.4vw, 34px); line-height: 1; transform: translateX(-50%) scale(0); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1); pointer-events: none; }
.actor.notice .pop { transform: translateX(-50%) scale(1); animation: bob 1.2s ease-in-out .45s infinite; }
.stage-fx { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.s-heart { position: absolute; font-size: var(--fs, 22px); line-height: 1; animation: sHeart var(--dur, 2.6s) ease-out both; }
.stage-play { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 0; border: 0; background: rgba(255, 240, 246, .25); cursor: pointer; transition: opacity .4s; }
.stage-play span { display: grid; place-items: center; width: clamp(64px, 12vw, 92px); aspect-ratio: 1; padding-left: .18em; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--rose); font-size: clamp(1.6rem, 4vw, 2.4rem); animation: pulseRing 2s ease-out infinite; }
.stage.playing .stage-play { opacity: 0; pointer-events: none; }
.caption { min-height: 2.6em; max-width: 34em; margin: 18px auto 14px; font-family: var(--font-hand); font-size: clamp(1.5rem, 4.6vw, 2.1rem); font-weight: 700; line-height: 1.25; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.caption.show { opacity: 1; transform: none; }

/* bears */
.bear { --fur: #c98b5b; --belly: #f3d9bf; --ear: #e7b48f; --muzzle: #f6e3cf; --line: #6b4434; }
.actor.her .bear { --fur: #fde4d8; --belly: #fff7f2; --ear: #f9b6c6; --muzzle: #fff8f3; --line: #a06e60; }
.bear .fur { fill: var(--fur); stroke: var(--line); stroke-width: 2.2; }
.bear .belly { fill: var(--belly); }
.bear .ear-in { fill: var(--ear); }
.bear .muzzle { fill: var(--muzzle); stroke: var(--line); stroke-width: 1.4; }
.bear .nose { fill: #3b2219; }
.bear .mouth { fill: none; stroke: #3b2219; stroke-width: 2; stroke-linecap: round; }
.bear .eyes { fill: #2b1a14; transform-origin: 60px 45px; animation: blink 5s infinite; }
.actor.her .bear .eyes { animation-delay: -2.2s; }
.bear .eyes-happy { fill: none; stroke: #2b1a14; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.bear .blush { fill: #ff8fab; opacity: 0; transition: opacity .5s; }
.bear .badge { fill: #ff5c8a; }
.bear .steth path { fill: none; stroke: var(--teal); stroke-width: 3.2; stroke-linecap: round; }
.bear .steth circle { fill: #dff6f2; stroke: var(--teal); stroke-width: 2.6; }
.bear .bow path, .bear .bow circle { fill: #ff5c8a; stroke: #df3068; stroke-width: 1.4; stroke-linejoin: round; }
.actor.me .steth, .actor.me .bow { display: none; }
.actor.her .badge { display: none; }
.bear .arm, .bear .bear-head { transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.bear .arm-l { transform-origin: 30px 90px; }
.bear .arm-r { transform-origin: 90px 90px; }
.bear .bear-head { transform-origin: 60px 84px; }
.actor.shy .blush, .actor.hugging .blush { opacity: .85; }
.actor.me.waving .arm-r { animation: waveR .45s ease-in-out infinite alternate; }
.actor.her.waving .arm-l { animation: waveL .45s ease-in-out infinite alternate; }
.actor.me.hugging .arm-r { transform: rotate(-82deg); }
.actor.me.hugging .arm-l { transform: rotate(14deg); }
.actor.her.hugging .arm-l { transform: rotate(98deg); }
.actor.her.hugging .arm-r { transform: rotate(-16deg); }
.actor.me.hugging .bear-head { transform: rotate(9deg) translate(3px, 2px); }
.actor.her.hugging .bear-head { transform: rotate(-9deg) translate(-3px, 2px); }
.actor.hugging .eyes { opacity: 0; }
.actor.hugging .eyes-happy { opacity: 1; }

/* cats */
.cat { --fur: var(--cat-fur, #fff); --shade: var(--cat-shade, #f3ece9); --line: var(--cat-line, #c9bab6); --ear: var(--cat-ear, #ffc7d4); --eye: var(--cat-eye, #2f5aa0); overflow: visible; }
.cat .cat-body, .cat .cat-face, .cat .cat-ear, .cat .cat-paw { fill: var(--fur); stroke: var(--line); stroke-width: 2.2; stroke-linejoin: round; }
.cat .cat-chest { fill: var(--shade); }
.cat .cat-ear-in { fill: var(--ear); }
.cat .cat-tail-line { fill: none; stroke: var(--line); stroke-width: 15; stroke-linecap: round; }
.cat .cat-tail { fill: none; stroke: var(--fur); stroke-width: 10.6; stroke-linecap: round; }
.cat .tail-g { transform-origin: 86px 116px; animation: tail 1.8s ease-in-out infinite alternate; }
.cat .cat-eyes ellipse { fill: var(--eye); }
.cat .cat-eyes .shine { fill: #fff; }
.cat .cat-eyes { transform-origin: 60px 46px; animation: blink 4.2s infinite; }
.cat .cat-eyes-happy { fill: none; stroke: #4a3a3a; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.cat .cat-nose { fill: #ff8fab; }
.cat .cat-mouth { fill: none; stroke: #8a6a6a; stroke-width: 2; stroke-linecap: round; }
.cat .cat-whiskers { fill: none; stroke: #b9a8a4; stroke-width: 1.4; stroke-linecap: round; }
.cat .cat-blush { fill: #ffaec4; opacity: .7; }
.cat .cat-head { transform-origin: 60px 78px; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.cat .ear-r { transform-origin: 79px 30px; animation: twitch 5s ease-in-out infinite; }
.happy .cat .cat-eyes { opacity: 0; }
.happy .cat .cat-eyes-happy { opacity: 1; }
.happy .cat .cat-head { transform: rotate(-8deg); }

/* ==========================================================================
   Journey timeline
   ========================================================================== */
.journey { background: linear-gradient(180deg, #f3edff, var(--cream)); }
.timeline { position: relative; --p: 0; }
.tl-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; border-radius: 4px; background: rgba(232, 71, 106, .14); }
.tl-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: 50% 0; transform: scaleY(var(--p)); background: linear-gradient(var(--rose), var(--violet)); }
.tl-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; margin-bottom: clamp(36px, 6vw, 64px); }
.tl-item:last-child { margin-bottom: 0; }
.tl-dot { grid-column: 2; grid-row: 1; justify-self: center; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--rose); font-size: 1.15rem; box-shadow: 0 8px 20px -8px rgba(232, 71, 106, .6), 0 0 0 5px rgba(255, 255, 255, .7); transform: scale(0); transition: transform .6s cubic-bezier(.3, 1.8, .5, 1) .25s; }
.tl-item.in .tl-dot { transform: scale(1); }
.tl-card { grid-column: 1; grid-row: 1; overflow: hidden; border-radius: 24px; background: #fff; box-shadow: var(--shadow); }
.tl-item.right .tl-card { grid-column: 3; }
.tl-card .photo-slot { border-radius: 0; }
.tl-body { padding: 18px 20px 22px; }
.tl-date { display: inline-block; margin-bottom: 6px; padding: .2em .8em; border-radius: 999px; background: #ffe4ec; color: var(--rose); font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.tl-body h3 { margin: 0 0 .25em; font-size: 1.35rem; line-height: 1.2; }
.tl-body p { margin: 0; color: var(--ink-soft); }

/* ==========================================================================
   Memory wall
   ========================================================================== */
.gallery { background: linear-gradient(180deg, var(--cream), #ffeef3); }
.polaroids { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(44%, 250px), 1fr)); gap: clamp(16px, 3.4vw, 30px); max-width: 900px; margin: 0 auto; }
.polaroid {
  position: relative; margin: 0; padding: 10px 10px 8px;
  border-radius: 4px; background: #fff; box-shadow: 0 12px 30px -14px rgba(80, 20, 50, .45);
  rotate: var(--r, 0deg);
  transition: opacity .9s var(--ease-out) var(--delay, 0s), transform .9s var(--ease-out) var(--delay, 0s), rotate .35s ease, scale .35s ease;
}
.polaroid:hover { z-index: 2; rotate: 0deg; scale: 1.04; }
.polaroid .photo-slot { aspect-ratio: 1; border-radius: 2px; }
.polaroid figcaption { margin-top: 8px; font-family: var(--font-hand); font-size: clamp(1.15rem, 3.6vw, 1.45rem); font-weight: 700; line-height: 1.15; text-align: center; color: #4a2f3d; }
.tape { position: absolute; left: 50%; top: -11px; z-index: 1; width: 84px; height: 24px; margin-left: -42px; rotate: -4deg; background: rgba(255, 214, 226, .82); box-shadow: 0 2px 4px rgba(0, 0, 0, .06); }
.polaroid:nth-child(3n) .tape { rotate: 5deg; background: rgba(214, 226, 255, .85); }
.polaroid:nth-child(3n+1) .tape { background: rgba(255, 238, 190, .88); }

/* ==========================================================================
   Doctor's corner
   ========================================================================== */
.doctor { background: linear-gradient(180deg, #ffeef3 0%, #e8f7f4 16%, #e3f0f7 100%); }
.doctor .kicker { color: var(--teal); }
.doctor .sec-head h2 .script { background: linear-gradient(90deg, var(--teal), #4d8bf5); -webkit-background-clip: text; background-clip: text; }
.monitor { max-width: 920px; margin: 0 auto 28px; padding: 14px; border-radius: 26px; background: #0a1317; color: #cfe8ee; font-family: var(--font-mono); box-shadow: 0 34px 70px -34px rgba(10, 40, 50, .75), inset 0 0 0 2px #1c2d34; }
.mon-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 18px; padding: 6px 10px 12px; border-bottom: 1px solid #1c2d34; font-size: .8rem; color: #8fb3bf; }
.mon-top b { font-weight: 400; color: #ecfbff; }
.mon-live { display: inline-flex; align-items: center; gap: 6px; color: #ff6b85; }
.mon-live i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px #ff3b5c; animation: blinkDot 1.1s steps(2, start) infinite; }
.mon-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; }
.mon-ecg { position: relative; min-height: 220px; overflow: hidden; border: 1px solid #14242b; border-radius: 14px; background-color: #04090b; background-image: linear-gradient(rgba(61, 255, 154, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(61, 255, 154, .07) 1px, transparent 1px); background-size: 22px 22px; }
.mon-ecg canvas { position: absolute; left: 0; top: 30px; width: 100%; height: calc(100% - 30px); }
.mon-label { position: absolute; left: 12px; top: 8px; font-size: .78rem; letter-spacing: .12em; color: #3dff9a; }
.mon-hr { position: absolute; right: 12px; top: 7px; font-size: .78rem; color: #3dff9a; }
.hr-heart { display: inline-block; color: #ff5c7a; transition: transform .12s ease; }
.hr-heart.on { transform: scale(1.5); }
.mon-vitals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vital { display: flex; flex-direction: column; min-height: 100px; padding: 10px 12px; border: 1px solid #14242b; border-radius: 14px; background: #04090b; }
.v-label { font-size: .72rem; letter-spacing: .12em; }
.v-val { margin: 2px 0; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.1; font-variant-numeric: tabular-nums; text-shadow: 0 0 12px currentColor; }
.v-val small { font-size: .55em; }
.v-unit { font-family: var(--font-body); font-size: .7rem; line-height: 1.3; opacity: .78; }
.v-green { color: #3dff9a; }
.v-cyan { color: #3ee6ff; }
.v-yellow { color: #ffe35c; }
.v-pink { color: #ff7ab8; }
.mon-dx { min-height: 3.3em; margin: 0; padding: 12px 14px; border: 1px dashed #24414a; border-radius: 12px; background: #04090b; font-size: .92rem; line-height: 1.55; color: #ecfbff; }
.mon-dx b { font-weight: 400; color: #3ee6ff; }
.caret { display: inline-block; width: .55em; height: 1.05em; margin-left: 2px; vertical-align: -3px; background: #3dff9a; animation: blinkDot 1s steps(2, start) infinite; }

/* ==========================================================================
   A note from the cat
   ========================================================================== */
.catcorner { background: linear-gradient(180deg, #e3f0f7 0%, #fff4ec 16%, #ffeaf1 100%); }
.cat-scene { display: flex; flex-direction: column; align-items: center; }
.cat-bubble { position: relative; max-width: min(540px, 100%); min-height: 2.7em; margin: 0 0 24px; padding: 16px 24px; border-radius: 28px; background: #fff; box-shadow: var(--shadow); text-align: center; font-family: var(--font-hand); font-size: clamp(1.45rem, 4.6vw, 1.95rem); font-weight: 700; line-height: 1.25; color: #4a2f3d; }
.cat-bubble::after { content: ""; position: absolute; left: 50%; bottom: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 4px; background: #fff; transform: rotate(45deg); }
.big-cat { width: min(250px, 62vw); padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 20px 18px rgba(120, 60, 80, .18)); transition: transform .2s; }
.big-cat:active { transform: scale(.96); }
.big-cat .cat { display: block; width: 100%; height: auto; }
.big-cat.purring .cat { animation: purr .09s linear infinite; }
.cat-hint { margin: 10px 0 18px; font-weight: 800; color: var(--rose); }
.paws { position: absolute; inset: 0; pointer-events: none; }
.paw { position: absolute; font-size: 22px; opacity: 0; rotate: var(--r, 30deg); animation: pawStep 9s linear var(--dl, 0s) infinite; }

/* ==========================================================================
   Gifts
   ========================================================================== */
.gifts { background: linear-gradient(180deg, #ffeaf1, #f2ebff); }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 26px); max-width: 820px; margin: 0 auto; }
.gift-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 10px 16px; border: 0; border-radius: 24px; cursor: pointer;
  background: rgba(255, 255, 255, .72); box-shadow: var(--shadow);
  transition: opacity .9s var(--ease-out) var(--delay, 0s), transform .9s var(--ease-out) var(--delay, 0s), translate .25s ease, background .3s;
}
.gift-tile:hover { translate: 0 -4px; }
.gift-tile.open { background: #fff; }
.gift-wrap { position: relative; width: min(132px, 82%); aspect-ratio: 1; }
.gift-wrap .gift-svg { position: relative; z-index: 1; width: 100%; height: 100%; transform-origin: 50% 95%; animation: giftIdle 3.4s ease-in-out var(--wd, 0s) infinite; }
.gift-tile.shaking .gift-svg { animation: shake .5s linear; }
.gift-tile.open .gift-svg { animation: none; }
.gift-emoji { position: absolute; left: 50%; top: 40%; z-index: 0; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; transform: translate(-50%, 30%) scale(0); transition: transform .6s cubic-bezier(.3, 1.8, .5, 1) .25s; }
.gift-tile.open .gift-emoji { z-index: 2; transform: translate(-50%, -70%) scale(1); }
.gift-label { font-size: .95rem; font-weight: 800; line-height: 1.25; text-align: center; }
.gift-tile.open .gift-label { color: var(--rose); }

/* ==========================================================================
   Reasons jar
   ========================================================================== */
.reasons { background: linear-gradient(180deg, #f2ebff, #ffeef3); }
.jar-wrap { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.jar { width: min(250px, 64vw); padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 22px 24px rgba(120, 40, 90, .2)); }
.jar.wobble { animation: wobble .6s ease; }
.jar-svg { display: block; width: 100%; height: auto; overflow: visible; }
.jar-back { fill: rgba(255, 255, 255, .45); }
.jar-glass { fill: rgba(255, 255, 255, .1); stroke: rgba(170, 110, 145, .55); stroke-width: 3; }
.jar-shine { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 7; stroke-linecap: round; }
.jar-shine.small { stroke-width: 4; }
.jar-neck { fill: rgba(255, 255, 255, .5); stroke: rgba(170, 110, 145, .5); stroke-width: 3; }
.jar-lid { stroke: #c9822f; stroke-width: 2; }
.jar-lid-lines { stroke: rgba(150, 90, 30, .35); stroke-width: 2; }
.jar-tag rect { fill: #fffaf0; stroke: #ecc9a8; stroke-width: 2; }
.jar-tag text { font-family: var(--font-hand); font-size: 23px; font-weight: 700; fill: var(--rose); }
.jar-heart { stroke: rgba(0, 0, 0, .12); stroke-width: 1; }
.flying-letter { position: fixed; z-index: 85; font-size: 40px; line-height: 1; pointer-events: none; animation: flyOut .9s cubic-bezier(.3, .7, .4, 1) forwards; }

/* ==========================================================================
   Make a wish (cake)
   ========================================================================== */
.wish { background: linear-gradient(180deg, #ffeef3, #fff3ea); }
.wish-room {
  position: relative; overflow: hidden;
  padding: clamp(40px, 7vw, 70px) 16px clamp(36px, 6vw, 56px);
  border-radius: 36px; text-align: center; color: #fff;
  background: radial-gradient(ellipse at 50% 62%, #4a2145 0%, #1d0b21 72%);
  box-shadow: 0 40px 80px -40px rgba(40, 10, 40, .75);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), color 1.2s ease;
}
.wish-room::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, #fffaf2, #ffe3ec 75%); opacity: 0; transition: opacity 1.4s ease; }
.wish-room > * { position: relative; }
.wish .sec-head { margin-bottom: 18px; }
.wish .kicker { color: #ff9fbb; transition: color 1.2s; }
.wish .sec-sub { color: inherit; opacity: .85; }
.wish.lights-on .wish-room { color: var(--ink); }
.wish.lights-on .wish-room::before { opacity: 1; }
.wish.lights-on .kicker { color: var(--rose); }
.wish .btn-ghost { background: rgba(255, 255, 255, .12); color: inherit; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.wish.lights-on .btn-ghost { background: rgba(255, 255, 255, .82); color: var(--rose); box-shadow: inset 0 0 0 2px rgba(232, 71, 106, .35); }
.wish-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cake-wrap { display: flex; flex-direction: column; align-items: center; margin: 70px 0 26px; }
.cake { position: relative; width: min(300px, 80vw); aspect-ratio: 300 / 330; }
.cake::before { content: ""; position: absolute; left: 50%; top: -14%; width: 150%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 50% 30%, rgba(255, 190, 90, .4), rgba(255, 190, 90, 0) 48%); pointer-events: none; transition: opacity 1s; }
.cake.all-out::before { opacity: 0; }
.tier { position: absolute; left: 50%; border-radius: 16px 16px 12px 12px; transform: translateX(-50%); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .07); }
.t1 { bottom: 7%; width: 92%; height: 25%; background: linear-gradient(90deg, #f17aa0, #ffa3c0 45%, #f17aa0); }
.t2 { bottom: 31%; width: 72%; height: 22%; background: linear-gradient(90deg, #ad86f0, #cdb1ff 45%, #ad86f0); }
.t3 { bottom: 52%; width: 52%; height: 19.5%; background: linear-gradient(90deg, #ffb066, #ffd2a1 45%, #ffb066); }
.tier::before {
  content: ""; position: absolute; left: -3px; right: -3px; top: -5px; height: 26px; border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 50% 0, #fff6fa 0 7px, transparent 7.5px) 0 9px / 20px 14px repeat-x,
    linear-gradient(#fff6fa, #fff6fa) 0 0 / 100% 11px no-repeat;
}
.tier::after {
  content: ""; position: absolute; inset: 30px 12px 10px; opacity: .85;
  background:
    radial-gradient(circle, #fff 0 1.6px, transparent 2px) 0 0 / 22px 18px,
    radial-gradient(circle, #ffd166 0 1.6px, transparent 2px) 11px 9px / 22px 18px,
    radial-gradient(circle, #7bdff2 0 1.4px, transparent 1.8px) 5px 13px / 26px 20px;
}
.plate { position: absolute; left: 50%; bottom: 1%; width: 106%; height: 8%; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 35%, #fff, #e6dce4); box-shadow: 0 12px 22px -8px rgba(0, 0, 0, .4); }
.candles { position: absolute; left: 50%; bottom: 70.5%; z-index: 2; display: flex; gap: 6px; transform: translateX(-50%); }
.candle { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; }
.candle .num { display: block; font-size: clamp(58px, 15vw, 84px); font-weight: 900; line-height: .82; color: transparent; background: repeating-linear-gradient(135deg, #ff7aa2 0 7px, #fff 7px 14px); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 2.5px #e8476a; }
.wick { position: absolute; left: 50%; bottom: calc(100% - 4px); width: 3px; height: 12px; margin-left: -1.5px; border-radius: 2px; background: #3f2d26; }
.flame { position: absolute; left: 50%; bottom: calc(100% + 5px); width: 20px; height: 38px; margin-left: -10px; transform-origin: 50% 95%; transform: skewX(calc(var(--wind, 0) * -22deg)) scaleY(calc(1 - var(--wind, 0) * .35)); transition: transform .1s linear, opacity .3s ease; }
.flame i { position: absolute; inset: 0; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 90%; background: radial-gradient(circle at 50% 76%, #fff 0 15%, #fff1a8 30%, #ffb347 58%, rgba(255, 120, 50, 0) 74%); animation: flicker .13s ease-in-out infinite alternate; }
.flame::before { content: ""; position: absolute; left: 50%; top: 58%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 196, 92, .5), rgba(255, 196, 92, 0) 65%); pointer-events: none; animation: glowPulse 1.6s ease-in-out infinite; }
.candle.out .flame { opacity: 0; transform: scale(.2); }
.smoke { position: absolute; left: 50%; bottom: calc(100% + 8px); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: rgba(210, 205, 215, .7); filter: blur(3px); opacity: 0; pointer-events: none; }
.candle.out .smoke { animation: smoke 1.8s ease-out forwards; }
.mic-meter { width: min(240px, 70vw); height: 8px; margin-top: 18px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .2); }
.mic-meter span { display: block; width: calc(var(--lvl, 0) * 100%); height: 100%; background: linear-gradient(90deg, #7bdff2, #ffd166, #ff6b8b); transition: width .08s linear; }

/* ==========================================================================
   Scratch card
   ========================================================================== */
.scratch { background: linear-gradient(180deg, #fff3ea, var(--cream)); }
.scratch-card { position: relative; max-width: 540px; aspect-ratio: 16 / 9; min-height: 230px; margin: 0 auto; overflow: hidden; border-radius: 24px; box-shadow: 0 26px 50px -26px rgba(120, 60, 20, .5); }
.scratch-under { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px 24px; text-align: center; background: radial-gradient(circle at 20% 20%, #fff 0, transparent 40%), linear-gradient(135deg, #ffe9f1, #efe6ff); }
.scratch-under p { margin: 0; white-space: pre-line; font-family: var(--font-hand); font-size: clamp(1.3rem, 4.4vw, 1.85rem); font-weight: 700; line-height: 1.25; color: #4a2f3d; }
#scratchCanvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity .9s ease; }
#scratchCanvas.cleared { opacity: 0; pointer-events: none; }

/* ==========================================================================
   The letter
   ========================================================================== */
.letter { background: linear-gradient(180deg, var(--cream), #ffe8ef); }
.envelope-wrap { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: clamp(60px, 14vw, 110px); }
.envelope { position: relative; width: min(360px, 84vw); aspect-ratio: 3 / 2; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; filter: drop-shadow(0 20px 26px rgba(150, 50, 90, .25)); animation: floaty 4s ease-in-out infinite; }
.envelope.open { animation: none; cursor: default; }
.env-back, .env-front { position: absolute; inset: 0; border-radius: 12px; }
.env-back { background: #ee8fa8; }
.env-letter { position: absolute; left: 7%; right: 7%; top: 6%; z-index: 1; display: grid; place-items: center; height: 82%; border-radius: 8px; font-size: 2.2rem; background: repeating-linear-gradient(#fffdf7 0 18px, #f5e6df 18px 19px); transition: transform .9s cubic-bezier(.3, 1.2, .5, 1) .45s; }
.env-front { z-index: 2; background: linear-gradient(160deg, #ffb3c6, #f58aa7); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 58%; transform-origin: 50% 0; background: linear-gradient(180deg, #ffa2bb, #ef7a9b); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .6s ease, z-index 0s linear .3s; }
.env-seal { position: absolute; left: 50%; top: 54%; z-index: 4; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; font-size: 1.3rem; color: #fff; background: radial-gradient(circle at 35% 30%, #ff7a9a, #c2184b); box-shadow: 0 4px 10px rgba(120, 0, 40, .4), inset 0 -3px 6px rgba(0, 0, 0, .2); animation: beat 1.4s ease-in-out infinite; transition: transform .4s ease, opacity .4s ease; }
.envelope.open .env-seal { animation: none; transform: scale(0); opacity: 0; }
.envelope.open .env-flap { z-index: 0; transform: rotateX(180deg); }
.envelope.open .env-letter { transform: translateY(-62%); }
.env-hint { margin: 0; font-weight: 800; color: var(--rose); }
.paper {
  position: relative; max-width: 720px; margin: 36px auto 0;
  padding: clamp(28px, 6vw, 54px) clamp(22px, 6vw, 56px) clamp(28px, 6vw, 48px) clamp(34px, 8vw, 72px);
  border-radius: 6px; background-color: #fffdf8;
  background-image: repeating-linear-gradient(transparent 0 37px, rgba(232, 71, 106, .13) 37px 38px);
  background-position: 0 12px;
  box-shadow: 0 30px 60px -30px rgba(120, 40, 70, .45);
  opacity: 0; transform: translateY(30px) rotate(-1deg);
  transition: opacity .8s ease, transform .8s ease;
}
.paper.show { opacity: 1; transform: rotate(-.5deg); }
.paper::before { content: ""; position: absolute; top: 0; bottom: 0; left: clamp(18px, 5vw, 46px); width: 2px; background: rgba(232, 71, 106, .28); }
.paper-greeting { margin: 0 0 .2em; font-family: var(--font-script); font-size: clamp(2.2rem, 7vw, 3rem); line-height: 1.25; color: var(--rose); }
.paper-body p { margin: 0 0 38px; font-family: var(--font-hand); font-size: clamp(1.32rem, 4.2vw, 1.62rem); font-weight: 500; line-height: 38px; color: #3b2a4a; }
.words .w { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity .55s ease var(--d, 0s), transform .55s ease var(--d, 0s); }
.words.in .w, .paper.instant .w { opacity: 1; transform: none; }
.paper.instant .w { transition-delay: 0s; }
.paper-closing { margin: 0; font-family: var(--font-hand); font-size: clamp(1.4rem, 4.4vw, 1.7rem); color: #3b2a4a; }
.paper-sign { margin: 0; font-family: var(--font-script); font-size: clamp(2.3rem, 7vw, 3rem); line-height: 1.3; color: var(--rose); }

/* ==========================================================================
   Finale
   ========================================================================== */
.finale { display: grid; place-items: center; min-height: 100vh; min-height: 100svh; text-align: center; color: #fff; background: linear-gradient(180deg, #ffe8ef 0, #7a2a66 120px, #2c0f36 40%, #12061a 100%); }
.finale .sky-stars { top: 120px; }
.finale-inner { position: relative; z-index: 1; padding-top: 60px; }
.finale .kicker { color: #ffb3c6; }
.finale-title { margin: 0; font-size: clamp(2.3rem, 8.5vw, 4.6rem); font-weight: 900; line-height: 1.05; }
.finale-title .script {
  display: block; padding: 0 .2em .1em;
  font-size: 1.7em; font-weight: 400; line-height: 1.15;
  background: linear-gradient(90deg, #ffd166, #ff8fab 25%, #c9a7ff 50%, #ff8fab 75%, #ffd166);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 6s linear infinite;
}
.finale-sub { max-width: 32em; margin: .8em auto 1.6em; font-size: clamp(1.05rem, 3vw, 1.25rem); opacity: .9; }
.finale-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.finale .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32); }
.finale-tip { margin: 1.6em 0 0; font-size: .9rem; opacity: .6; }
.made-with { margin: 2.4em 0 0; font-size: .95rem; opacity: .75; }

/* ==========================================================================
   Floating buttons, toasts, modal, lightbox, hug
   ========================================================================== */
.fabs { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; gap: 10px; opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .5s ease, transform .5s ease; }
body.opened .fabs { opacity: 1; transform: none; pointer-events: auto; }
.fab { position: relative; display: grid; place-items: center; width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%; font-size: 1.55rem; line-height: 1; cursor: pointer; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 28px -12px rgba(120, 30, 80, .6), inset 0 0 0 1.5px rgba(232, 71, 106, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform .2s ease; }
.fab:hover { transform: scale(1.08); }
.fab:active { transform: scale(.94); }
.fab-label { position: absolute; right: calc(100% + 10px); top: 50%; padding: 5px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 800; white-space: nowrap; opacity: 0; transform: translate(6px, -50%); transition: opacity .25s, transform .25s; pointer-events: none; }
.fab:hover .fab-label, .fab:focus-visible .fab-label { opacity: 1; transform: translate(0, -50%); }
#hugBtn { animation: nudge 6s ease-in-out 4s infinite; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.eq i { width: 4px; height: 5px; border-radius: 2px; background: var(--rose); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
.fab.off .eq i { height: 4px; background: #c9a9b5; animation: none; }
.fab.off::after { content: ""; position: absolute; width: 30px; height: 3px; border-radius: 2px; background: #c9a9b5; transform: rotate(-45deg); }

.toasts { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 60; display: flex; flex-direction: column; gap: 8px; width: min(94vw, 390px); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .93); box-shadow: 0 16px 36px -14px rgba(60, 10, 40, .55), inset 0 0 0 1px rgba(232, 71, 106, .08); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(-120%) scale(.96); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1), opacity .35s ease; }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(-60%) scale(.96); }
.toast-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; font-size: 1.3rem; background: linear-gradient(135deg, #ffe0e8, #efe4ff); }
.toast-body { flex: 1; min-width: 0; }
.toast-top { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; color: var(--ink-soft); }
.toast-top b { font-size: .86rem; color: var(--ink); }
.toast p { margin: 2px 0 0; font-size: .92rem; line-height: 1.35; }

.modal { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(40, 12, 34, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.modal-card { position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); max-height: calc(100svh - 32px); overflow: auto; padding: 26px 22px 22px; border-radius: 28px; background: #fff; box-shadow: 0 40px 80px -30px rgba(40, 10, 40, .6); opacity: 0; transform: translateY(24px) scale(.92); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1), opacity .3s; }
.modal.show .modal-backdrop { opacity: 1; }
.modal.show .modal-card { opacity: 1; transform: none; }
.modal-close { position: absolute; right: 12px; top: 12px; z-index: 2; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #fff0f4; color: var(--rose); font-size: 1rem; font-weight: 900; cursor: pointer; }
.modal-close:hover { background: #ffe0e9; }
.modal-rx .modal-card { width: min(480px, 100%); padding: 0; background: #fffefa; }
.modal-coupon .modal-card { padding: 8px 0 0; overflow: visible; background: transparent; box-shadow: none; }
.modal-coupon .modal-close { right: -4px; top: -10px; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .4); }

.coupon { display: flex; min-height: 190px; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -24px rgba(40, 10, 40, .55); }
.coupon-left { position: relative; flex: 0 0 32%; display: grid; place-items: center; background: linear-gradient(160deg, var(--cg1, #ff6b8b), var(--cg2, #c2357e)); }
.coupon-left::after { content: ""; position: absolute; top: 0; bottom: 0; right: -7px; width: 14px; background: radial-gradient(circle at 7px 9px, #fff 0 5.5px, transparent 6px) 0 0 / 14px 18px repeat-y; }
.coupon-emoji { font-size: clamp(2.6rem, 10vw, 3.4rem); line-height: 1; animation: floaty 3s ease-in-out infinite; }
.coupon-right { padding: 20px 22px 16px 24px; }
.coupon-kicker { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.coupon h3 { margin: .25em 0 .35em; font-size: 1.45rem; line-height: 1.15; }
.coupon p { margin: 0 0 .7em; color: var(--ink-soft); }
.coupon .coupon-valid { margin: 0; padding-top: 8px; border-top: 1px dashed #f0c4d1; font-size: .76rem; font-weight: 700; color: #a77c8c; }

.reason { padding: 8px 4px 4px; text-align: center; }
.reason.flip { animation: flipIn .5s ease; }
.reason-heart { display: inline-block; font-size: 3rem; line-height: 1; animation: beat 1.3s ease-in-out infinite; }
.reason-num { margin: .5em 0 .1em; font-size: .78rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.reason-text { margin: .2em 0 .9em; font-family: var(--font-hand); font-size: clamp(1.6rem, 6vw, 2.1rem); font-weight: 700; line-height: 1.25; }

.rx { position: relative; padding: 24px 22px 20px; color: #2b2f3a; }
.rx-head { display: flex; align-items: center; gap: 12px; padding: 0 44px 10px 0; border-bottom: 2px solid var(--teal); }
.rx-symbol { font-family: Georgia, "Times New Roman", serif; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--teal); }
.rx-clinic { font-size: 1.05rem; font-weight: 900; line-height: 1.2; color: var(--teal); }
.rx-clinic small { display: block; margin-top: 2px; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7c8a8a; }
.rx-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; margin: 12px 0 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #7c8a8a; }
.rx-meta b { display: block; font-family: var(--font-hand); font-size: 1.3rem; font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: none; color: #2a3b8f; }
.rx-list { margin: 6px 0 12px; padding: 0; list-style: none; counter-reset: rx; }
.rx-list li { position: relative; padding: 9px 0 9px 30px; border-bottom: 1px dashed #d7e4e2; font-family: var(--font-hand); font-size: 1.32rem; font-weight: 700; line-height: 1.2; color: #2a3b8f; counter-increment: rx; }
.rx-list li::before { content: counter(rx) "."; position: absolute; left: 4px; top: 12px; font-family: var(--font-body); font-size: .85rem; font-weight: 800; color: var(--teal); }
.rx-dose { color: var(--berry); }
.rx-list small { display: block; font-family: var(--font-body); font-size: .76rem; font-weight: 600; color: #6b7a7a; }
.rx-note { margin: 0; padding: 10px 12px; border-radius: 12px; background: #eefaf7; font-size: .82rem; line-height: 1.45; color: #4d5a5a; }
.rx-sign { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: 14px; }
.rx-refill { font-size: .8rem; font-weight: 800; color: var(--teal); }
.rx-sig { text-align: right; }
.rx-sig span { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8a9696; }
.rx-sig b { display: inline-block; padding: 0 6px; border-bottom: 1px solid #b8c4c4; font-family: var(--font-script); font-size: 1.9rem; font-weight: 400; line-height: 1.2; color: #2a3b8f; }
.rx-stamp { position: absolute; right: 24px; bottom: 74px; padding: 4px 10px; border: 3px solid var(--rose); border-radius: 10px; font-size: .9rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--rose); opacity: 0; transform: rotate(-14deg) scale(2.4); pointer-events: none; animation: stamp .45s cubic-bezier(.3, 1.4, .5, 1) .9s forwards; }

.wish-done { padding: 6px 4px; text-align: center; }
.wish-done .big-emoji { font-size: 3.6rem; line-height: 1; animation: floaty 3s ease-in-out infinite; }
.wish-done h3 { margin: .3em 0 .2em; font-size: 1.7rem; }
.wish-done p { margin: 0 0 .4em; font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.3; color: var(--ink-soft); }

.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 56px 12px 24px; background: rgba(20, 6, 24, .94); opacity: 0; transition: opacity .3s ease; touch-action: pan-y; }
.lightbox.show { opacity: 1; }
.lb-figure { max-width: min(94vw, 1000px); margin: 0; text-align: center; }
.lb-media img { max-width: 100%; max-height: 74vh; max-height: 74svh; margin: 0 auto; border-radius: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }
.lb-fallback { display: grid; place-items: center; width: min(78vw, 420px); aspect-ratio: 1; margin: 0 auto; border-radius: 24px; font-size: clamp(4rem, 20vw, 7rem); background: linear-gradient(135deg, #ffd6e2, #e9ddff); }
.lb-caption { margin-top: 14px; font-family: var(--font-hand); font-size: clamp(1.5rem, 5vw, 2rem); font-weight: 700; color: #fff; }
.lb-btn { position: fixed; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .25); }
.lb-prev, .lb-next { top: 50%; margin-top: -24px; }
.lb-prev { left: 10px; }
.lb-next { right: 10px; }
.lb-close { right: 12px; top: calc(12px + env(safe-area-inset-top)); font-size: 1.2rem; }

.hug-overlay { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 20px; text-align: center; cursor: pointer; background: radial-gradient(circle at 50% 55%, rgba(255, 222, 233, .97), rgba(255, 240, 245, .97)); opacity: 0; transition: opacity .35s ease; }
.hug-overlay.show { opacity: 1; }
.hug-stage { --bw: 44%; position: relative; width: min(78vw, 340px); aspect-ratio: 1.25; margin: 0 auto; }
.hug-stage .actor { bottom: 0; --t: .9s; }
.hug-text { margin: 18px 0 4px; font-size: clamp(1.4rem, 5.4vw, 2rem); font-weight: 900; line-height: 1.2; }
.hug-count { margin: 0; font-weight: 700; color: var(--ink-soft); }
.hug-hint { margin: 18px 0 0; font-size: .85rem; opacity: .6; }

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width: 720px) {
  .tl-line { left: 22px; }
  .tl-item { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .tl-dot { grid-column: 1; align-self: start; width: 40px; height: 40px; margin-top: 18px; }
  .tl-card, .tl-item.right .tl-card { grid-column: 2; }
  .reveal.from-left:not(.in) { transform: translateX(40px); }
  .mon-body { grid-template-columns: 1fr; }
  .mon-ecg { min-height: 170px; }
}
@media (max-width: 640px) {
  .stage { --bw: 26%; aspect-ratio: 1 / .9; border-radius: 22px; }
  .sun { width: 22%; }
}
@media (max-width: 600px) {
  .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .stat:last-child { grid-column: 1 / -1; }
  .live-clock { flex-wrap: nowrap; gap: 6px; }
  .live-clock span { flex: 1; min-width: 0; padding: 8px 4px; font-size: .62rem; letter-spacing: .1em; }
  .live-clock span:first-child { flex: 1.45; }
  .live-clock b { font-size: 1.3rem; }
  .fab { width: 48px; height: 48px; font-size: 1.35rem; }
}

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes dropIn { 0% { opacity: 0; transform: translateY(-70px) rotate(-12deg) scale(.6); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes jump { 0%, 100% { transform: none; } 40% { transform: translateY(-18px) rotate(-6deg); } 70% { transform: translateY(4px); } }
@keyframes write { to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes heartPop { to { transform: scale(1); } }
@keyframes beat { 0%, 70%, 100% { transform: scale(1); } 14% { transform: scale(1.16); } 28% { transform: scale(1); } 42% { transform: scale(1.09); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes blob { to { transform: translate(6vmax, 4vmax) scale(1.12); } }
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(var(--rise, -130vh)); } }
@keyframes sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes popB { to { transform: scale(1.6); opacity: 0; } }
@keyframes fall { to { transform: translateY(80px) rotate(30deg); opacity: 0; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes glowPulse { 0%, 100% { opacity: .7; scale: 1; } 50% { opacity: 1; scale: 1.08; } }
@keyframes giftIdle { 0%, 72%, 92%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg) scale(1.03); } 80% { transform: rotate(5deg) scale(1.03); } 84% { transform: rotate(-4deg); } 88% { transform: rotate(3deg); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg) scale(1.05); } 30% { transform: rotate(9deg) scale(1.08); } 45% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(7deg) scale(1.1); } 75% { transform: rotate(-4deg) scale(1.08); } }
@keyframes hintPulse { 0%, 100% { opacity: .65; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes zoomAway { to { opacity: 0; transform: scale(1.4); filter: blur(6px); } }
@keyframes drift { to { transform: translateX(var(--travel, 940%)); } }
@keyframes waddle { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-5%); } }
@keyframes step { to { transform: translateY(-5px); } }
@keyframes catHop { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-9%) rotate(3deg); } }
@keyframes squeeze { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes waveR { from { transform: rotate(-125deg); } to { transform: rotate(-165deg); } }
@keyframes waveL { from { transform: rotate(125deg); } to { transform: rotate(165deg); } }
@keyframes bob { 50% { translate: 0 -6px; } }
@keyframes bigBeat { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes sHeart {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.3); }
  15% { opacity: 1; transform: translate(-50%, -20%) scale(1); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), -340%) scale(.9) rotate(var(--rot, 0deg)); }
}
@keyframes pulseRing { 0% { box-shadow: 0 0 0 0 rgba(232, 71, 106, .45), 0 16px 34px -12px rgba(232, 71, 106, .6); } 100% { box-shadow: 0 0 0 24px rgba(232, 71, 106, 0), 0 16px 34px -12px rgba(232, 71, 106, .6); } }
@keyframes tail { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
@keyframes twitch { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-10deg); } 94% { transform: rotate(4deg); } }
@keyframes purr { 0% { transform: translate(0, 0); } 33% { transform: translate(.7px, -.5px); } 66% { transform: translate(-.7px, .4px); } }
@keyframes pawStep { 0% { opacity: 0; } 4%, 45% { opacity: .22; } 60%, 100% { opacity: 0; } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } }
@keyframes flyOut { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1.4) rotate(-12deg); } }
@keyframes flicker { from { transform: scale(1, 1) rotate(-2deg); } to { transform: scale(.92, 1.07) rotate(2deg); } }
@keyframes smoke { 0% { opacity: .8; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-70px) scale(3.2); } }
@keyframes stamp { to { opacity: .9; transform: rotate(-14deg) scale(1); } }
@keyframes flipIn { from { opacity: 0; transform: rotateY(80deg) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes blinkDot { to { visibility: hidden; } }
@keyframes nudge { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -14deg; } 94% { rotate: 12deg; } }
@keyframes eq { 0%, 100% { height: 5px; } 50% { height: 20px; } }
@keyframes floatText {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); }
  15% { opacity: 1; transform: translate(-50%, -70%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -240%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .balloons, .blob { display: none; }
}