:root {
  --cream: #fff9f1;
  --ink: #503d59;
  --soft-ink: #795e77;
  --pink: #f58eae;
  --hot-pink: #e86996;
  --rose: #f6bac9;
  --lavender: #b9a3d6;
  --gold: #f8d78a;
  --shadow: rgba(43, 26, 63, 0.3);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; margin: 0; }

body {
  color: var(--ink);
  background: #5a456f;
  font-family: ui-rounded, "Avenir Next", Avenir, "Trebuchet MS", system-ui, sans-serif;
  overflow: hidden;
}

button { font: inherit; }

.experience {
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  background: #5a456f url("assets/manisha-birthday-sky.png") center / cover no-repeat;
}

.sky-wash {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(38, 26, 71, 0.24), rgba(255, 188, 202, 0.09) 55%, rgba(75, 48, 91, 0.14));
  pointer-events: none;
}

.sparkles, .sparkles::before, .sparkles::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.8px), radial-gradient(circle, rgba(255,228,163,.9) 0 1.5px, transparent 2.3px);
  background-size: 103px 139px, 179px 211px;
  background-position: 0 0, 40px 76px;
  opacity: .48;
  animation: glimmer 5s ease-in-out infinite alternate;
}

.sparkles::before { opacity: .34; transform: translate(31px, -43px) scale(1.1); animation-delay: -2s; }
.sparkles::after { opacity: .26; transform: translate(-49px, 51px); animation-delay: -4s; }

.scene {
  position: absolute;
  inset: 0;
  padding: max(26px, env(safe-area-inset-top)) 22px max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(.98);
  transition: opacity .65s ease, visibility .65s ease, transform .65s cubic-bezier(.2,.9,.3,1.05);
}

.scene.is-visible { opacity: 1; visibility: visible; transform: scale(1); }

/* Cinematic depth: the story moves forward while the sky reacts at different speeds. */
.experience { --far-x: 0px; --far-y: 0px; --near-x: 0px; --near-y: 0px; --scroll-sway: 0px; --story-progress: .08; }.sky-wash { z-index: 0; transform: translate3d(var(--far-x), var(--far-y), 0) scale(1.06); transition: transform .9s cubic-bezier(.18,.78,.24,1); will-change: transform; }.sparkles, .sparkles::before, .sparkles::after { z-index: 0; }.sparkles { transform: translate3d(var(--near-x), var(--near-y), 0); transition: transform .65s cubic-bezier(.18,.78,.24,1); will-change: transform; }.parallax-field { position: absolute; z-index: 0; inset: -10%; overflow: hidden; pointer-events: none; transform: translate3d(var(--near-x), calc(var(--near-y) + var(--scroll-sway)), 0); transition: transform .7s cubic-bezier(.18,.78,.24,1); will-change: transform; }.parallax-field i { position: absolute; display: block; width: 30vmax; height: 30vmax; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,248,215,.42), rgba(255,192,215,.13) 44%, transparent 70%); filter: blur(2px); mix-blend-mode: screen; }.parallax-field i:nth-child(1) { top: -12%; left: -15%; }.parallax-field i:nth-child(2) { right: -15%; top: 7%; width: 20vmax; height: 20vmax; background: radial-gradient(circle, rgba(215,194,255,.35), transparent 69%); }.parallax-field i:nth-child(3) { bottom: -16%; left: 14%; width: 37vmax; height: 37vmax; background: radial-gradient(circle, rgba(255,164,197,.2), transparent 67%); }.parallax-field i:nth-child(4) { right: 14%; bottom: 11%; width: 11vmax; height: 11vmax; background: radial-gradient(circle, rgba(255,234,154,.46), transparent 68%); animation: depth-drift 5s ease-in-out infinite alternate; }.scene { z-index: 1; transform: translate3d(0, 8vh, 0) scale(.96); filter: blur(3px); transition: opacity .68s ease, visibility .68s ease, transform .78s cubic-bezier(.18,.83,.25,1), filter .55s ease; }.scene.is-visible { filter: blur(0); transform: translate3d(0, 0, 0) scale(1); animation: scene-scroll-arrive .88s cubic-bezier(.16,.82,.25,1) both; }.scene.is-exiting-forward { transform: translate3d(0, -10vh, 0) scale(.94); }.scene.is-exiting-backward { transform: translate3d(0, 10vh, 0) scale(.94); }.story-progress { position: fixed; z-index: 40; top: 50%; right: 13px; width: 3px; height: 84px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.27); box-shadow: 0 0 0 4px rgba(255,255,255,.07); transform: translateY(-50%); pointer-events: none; }.story-progress span { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(#ffe7a1, #f17aa4); box-shadow: 0 0 11px rgba(255,210,131,.9); transform: scaleY(var(--story-progress)); transform-origin: center bottom; transition: transform .9s cubic-bezier(.2,.83,.25,1); }.scroll-invite { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 13px 0 -3px; color: #b77a90; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }.scroll-invite span { display: inline-block; color: #e3749b; font-size: 16px; animation: scroll-nudge 1.35s ease-in-out infinite; }

.cinematic-intro { position: absolute; z-index: 2; width: min(100%, 370px); padding: 28px 24px; color: #fff8ed; text-align: center; text-shadow: 0 3px 15px rgba(55, 28, 71, .42); opacity: 1; transform: translateY(0) scale(1); transition: opacity .65s ease, transform .65s cubic-bezier(.2,.8,.25,1), visibility .65s ease; pointer-events: none; }.cinematic-intro.is-finished { visibility: hidden; opacity: 0; transform: translateY(-18px) scale(.96); }.cinematic-kicker { margin: 0 0 13px; color: #ffe8a8; font-size: 9px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }.cinematic-stars { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 14px; color: #ffe6a0; }.cinematic-stars i { font-style: normal; font-size: 18px; animation: cinematic-twinkle 1.7s ease-in-out infinite alternate; }.cinematic-stars i:nth-child(2) { color: #ffbfd3; font-size: 24px; animation-delay: .32s; }.cinematic-stars i:nth-child(3) { animation-delay: .65s; }.cinematic-intro h2 { font-size: clamp(42px, 12vw, 59px); letter-spacing: -.065em; }.cinematic-intro > p:last-child { margin: 13px 0 0; font-family: Georgia, serif; font-size: clamp(18px, 5.1vw, 23px); line-height: 1.4; }.cinematic-intro em { color: #ffd3df; font-style: italic; }.intro-card { opacity: 0; pointer-events: none; transition: opacity .8s .15s ease; }.intro-card.is-ready { opacity: 1; pointer-events: auto; }
.intro-card.glass-card { position: relative; overflow: hidden; background: linear-gradient(145deg, rgba(255,252,251,.88), rgba(255,231,239,.72)); }.intro-card.glass-card::before { position: absolute; inset: 0; content: ""; border: 1px solid rgba(255,255,255,.74); border-radius: inherit; background: linear-gradient(125deg, rgba(255,255,255,.35), transparent 29%, rgba(246,175,203,.1) 72%, transparent); pointer-events: none; }.intro-card > * { position: relative; z-index: 1; }.manisha-hero-avatar { position: relative; width: min(40vw, 151px); aspect-ratio: .96; margin: 1px auto 3px; isolation: isolate; }.manisha-hero-avatar::before { position: absolute; z-index: -1; inset: -15px; content: ""; border-radius: 50%; border: 1px solid rgba(239,155,187,.42); box-shadow: 0 0 0 8px rgba(255,255,255,.24); transform: rotate(-12deg); }.manisha-avatar-aura { position: absolute; z-index: 0; inset: 3px; overflow: hidden; border: 2px solid rgba(255,255,255,.94); border-radius: 47% 47% 39% 39% / 42% 42% 31% 31%; background: radial-gradient(circle at 39% 21%, #fffce7, #f9cbd9 48%, #d975a2 102%); box-shadow: 0 14px 26px rgba(159,72,112,.27), inset 0 3px 8px rgba(255,255,255,.82); }.manisha-avatar-aura::after { position: absolute; inset: 6px; content: ""; border: 1px solid rgba(255,255,255,.49); border-radius: inherit; }.manisha-hero-avatar img { position: absolute; z-index: 1; inset: -13px -7px -1px; width: calc(100% + 14px); height: calc(100% + 14px); object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; filter: drop-shadow(0 10px 6px rgba(84,42,72,.2)); }.manisha-avatar-crown { position: absolute; z-index: 4; top: -14px; left: 50%; color: #f6cd62; font-size: 25px; line-height: 1; text-shadow: 0 2px 0 #a96a35, 0 4px 8px rgba(132,76,47,.22); transform: translateX(-50%) rotate(-8deg) scale(.2); opacity: 0; }.manisha-avatar-ribbon { position: absolute; z-index: 4; bottom: 3px; left: 50%; min-width: 91px; padding: 4px 9px 5px; color: #fff9e8; border: 1px solid rgba(255,244,208,.83); border-radius: 99px; background: linear-gradient(135deg, #e87b9f, #c95b89); box-shadow: 0 4px 8px rgba(143,58,98,.25); font-size: 8px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; transform: translateX(-50%) scale(.75); opacity: 0; }.manisha-avatar-spark { position: absolute; z-index: 5; color: #ffe48e; font-size: 16px; font-style: normal; opacity: 0; text-shadow: 0 2px 5px rgba(136,70,105,.22); }.manisha-avatar-spark.one { top: 4px; right: -6px; }.manisha-avatar-spark.two { bottom: 15px; left: -10px; color: #e876a0; }.manisha-avatar-spark.three { top: 42px; left: -15px; }.hero-birthday-mark { margin: 1px 0 4px; color: #bd6d8a; font-size: 8px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; opacity: 0; }.hero-birthday-mark span { margin: 0 5px; color: #e6aa52; font-size: 12px; }.intro-card.is-ready .manisha-hero-avatar { animation: manisha-avatar-arrive .88s .24s cubic-bezier(.15,.88,.23,1.25) both; }.intro-card.is-ready .manisha-avatar-aura { animation: avatar-aura-pulse 1.8s .95s ease-in-out infinite alternate; }.intro-card.is-ready .manisha-hero-avatar::before { animation: avatar-orbit 6s 1s linear infinite; }.intro-card.is-ready .manisha-avatar-crown { animation: crown-arrive .5s .93s cubic-bezier(.18,1.3,.24,1) both; }.intro-card.is-ready .manisha-avatar-ribbon { animation: ribbon-arrive .5s 1.05s cubic-bezier(.18,1.2,.26,1) both; }.intro-card.is-ready .manisha-avatar-spark { animation: avatar-spark 1.55s .72s ease-in-out infinite; }.intro-card.is-ready .manisha-avatar-spark.two { animation-delay: 1.02s; }.intro-card.is-ready .manisha-avatar-spark.three { animation-delay: 1.26s; }.intro-card.is-ready .hero-birthday-mark { animation: hero-copy-arrive .5s 1.07s ease both; }.intro-card.is-ready h1 { animation: hero-copy-arrive .62s .7s ease both; }

.glass-card {
  width: min(100%, 418px);
  padding: 35px 27px 29px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 32px;
  background: rgba(255, 248, 248, .72);
  box-shadow: 0 22px 56px var(--shadow), inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(12px);
}

.eyebrow {
  margin: 0 0 10px;
  color: #a76482;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.055em; }

h1 { color: #6b405c; font-size: clamp(45px, 13vw, 62px); line-height: .83; }
h1 span { color: #e77e9f; font-size: .66em; letter-spacing: -.06em; }

.tiny-hearts { display: flex; justify-content: center; gap: 9px; margin: 24px 0 17px; }
.tiny-hearts i { color: var(--hot-pink); font-style: normal; font-size: 14px; animation: heart-beat 1.5s ease-in-out infinite; }
.tiny-hearts i:nth-child(2) { color: var(--gold); animation-delay: .2s; }.tiny-hearts i:nth-child(3) { animation-delay: .4s; }

.intro-copy, .proposal-copy {
  margin: 0 auto;
  max-width: 310px;
  color: var(--soft-ink);
  font-size: 15px;
  line-height: 1.65;
}

.primary-button, .yes-button {
  width: 100%;
  border: 0;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, #ec84a8, #d96b99);
  box-shadow: 0 10px 20px rgba(203,79,124,.29), inset 0 1px rgba(255,255,255,.32);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.primary-button {
  display: flex;
  justify-content: center;
  gap: 13px;
  margin-top: 28px;
  padding: 15px 18px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 14px;
}

.primary-button b { font-size: 19px; line-height: 13px; transition: transform .2s ease; }
.primary-button:hover b { transform: translateX(4px); }
.primary-button:hover, .yes-button:hover { transform: translateY(-2px); box-shadow: 0 14px 25px rgba(203,79,124,.35); filter: saturate(1.08); }
.primary-button:active, .yes-button:active { transform: translateY(1px) scale(.99); }

.sound-note { margin: 19px 0 0; color: #a37d91; font-size: 11px; }

.cake-scene { justify-content: space-between; max-width: 520px; margin: auto; }
.cake-header { padding-top: clamp(8px, 3vh, 28px); text-align: center; }
.cake-header .eyebrow { color: #f6d4da; text-shadow: 0 1px 8px rgba(60,30,78,.4); }
h2 { color: var(--cream); font-size: clamp(34px, 9.4vw, 49px); line-height: .92; text-shadow: 0 3px 16px rgba(49,27,68,.28); }
h2 em { color: #ffd1df; font-style: italic; }

.wish-ribbon {
  position: absolute;
  top: clamp(143px, 22vh, 190px);
  max-width: calc(100vw - 44px);
  padding: 10px 15px;
  color: #704c67;
  background: rgba(255,248,237,.88);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 99px;
  box-shadow: 0 8px 20px rgba(54,35,77,.17);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  transition: opacity .25s ease, transform .25s ease;
}

.cake-stage { width: min(100%, 410px); height: min(49vh, 405px); min-height: 318px; position: relative; margin: 18px auto 0; touch-action: none; }
.cake-halo { position: absolute; left: 50%; bottom: 35px; width: 310px; height: 116px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255,228,180,.55), rgba(255,222,188,.05) 66%, transparent 72%); filter: blur(7px); }

.cake { position: absolute; left: 50%; bottom: 27px; width: 300px; height: 232px; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: crosshair; filter: drop-shadow(0 18px 12px rgba(49,31,72,.29)); }
.cake:focus-visible { outline: 3px solid rgba(255,255,255,.9); outline-offset: 10px; border-radius: 20px; }
.cake-plate { position: absolute; z-index: 1; left: 12px; bottom: 0; width: 276px; height: 22px; border-radius: 50%; background: linear-gradient(180deg, #fff4ea 0 35%, #d6b4cf 36% 52%, #9b729d 53%); box-shadow: 0 7px 0 #765470, 0 14px 13px rgba(50,29,62,.28); }
.cake-tier { position: absolute; overflow: hidden; left: 50%; transform: translateX(-50%); border: 3px solid rgba(134,72,107,.2); background: linear-gradient(112deg, #ffbdd0 0 27%, #ef8fb1 46%, #e879a3 72%, #ffbad0 100%); }
.tier-back { z-index: 2; bottom: 45px; width: 248px; height: 119px; border-radius: 30px 30px 16px 16px; box-shadow: inset 9px 0 rgba(255,255,255,.23), inset -10px -6px rgba(154,63,99,.15); }
.tier-front { z-index: 3; bottom: 31px; width: 280px; height: 102px; border-radius: 23px 23px 15px 15px; box-shadow: inset 11px 0 rgba(255,255,255,.21), inset -12px -7px rgba(158,58,96,.16), 0 -8px 0 #ffe4e7; }
.cake-top { position: absolute; z-index: 4; left: 50%; bottom: 122px; width: 254px; height: 44px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse at 48% 33%, #fffaf4 0 9%, #ffe9ee 10% 42%, #f6aac0 43% 61%, #cf6d98 62% 100%); box-shadow: inset 0 7px 0 rgba(255,255,255,.76), 0 3px 0 #f5c2cf; }
.icing { position: absolute; z-index: 5; top: -13px; height: 29px; border-radius: 49% 51% 42% 46%; background: #fff1ef; box-shadow: inset 0 -4px #f5c5ce; }
.icing-one { left: -4px; width: 62px; }.icing-two { right: -3px; width: 68px; }
.cake-letter { position: absolute; z-index: 6; left: 50%; top: 24px; transform: translateX(-50%); color: #fff9f2; font-family: Georgia, serif; font-size: 47px; font-weight: bold; font-style: italic; line-height: 1; text-shadow: 0 3px #cf5d90, 1px 3px #cf5d90, -1px 3px #cf5d90; }
.sugar-dot { position: absolute; z-index: 7; width: 8px; height: 8px; border-radius: 50%; background: #ffe17b; box-shadow: inset 0 -2px #e4af52; }
.dot-a { left: 50px; top: 39px; }.dot-b { right: 48px; top: 39px; }.dot-c { left: 72px; bottom: 18px; }.dot-d { right: 70px; bottom: 18px; }
.candle { position: absolute; z-index: 8; bottom: 159px; width: 11px; height: 50px; border-radius: 5px; background: repeating-linear-gradient(45deg, #f6c669 0 6px, #fff5db 6px 11px); box-shadow: inset -2px 0 #d79070; }
.c1 { left: 123px; transform: rotate(-9deg); }.c2 { left: 194px; bottom: 168px; height: 57px; }.c3 { right: 119px; transform: rotate(9deg); }
.flame { position: absolute; left: 50%; bottom: 45px; width: 16px; height: 27px; transform: translateX(-50%); border-radius: 60% 40% 57% 43% / 65% 45% 55% 35%; background: linear-gradient(140deg, #fff7ae 12%, #ffbe54 44%, #fa8e61 80%); box-shadow: 0 0 16px 6px rgba(255,191,86,.58); animation: flicker .95s ease-in-out infinite alternate; }
.flame::after { content: ""; position: absolute; width: 5px; height: 9px; left: 5px; bottom: 5px; border-radius: 50%; background: #fffce0; }
.candle::before, .candle::after { position: absolute; z-index: 10; left: 50%; bottom: 43px; content: ""; width: 8px; height: 14px; opacity: 0; border-radius: 50%; border: 2px solid rgba(218,225,236,.75); border-left-color: transparent; border-bottom-color: transparent; transform: translateX(-50%) rotate(-18deg); pointer-events: none; }
.candle::after { width: 13px; height: 21px; margin-left: 7px; margin-bottom: 5px; border-color: rgba(209,213,229,.54); border-left-color: transparent; border-bottom-color: transparent; }
.cake-stage.is-blowing .flame { animation: flame-bend .23s ease-in-out infinite alternate; }
.candle.is-out .flame { animation: flame-out .36s cubic-bezier(.2,.75,.35,1) forwards; }
.candle.is-out::before { animation: smoke-rise 1.35s .14s ease-out forwards; }.candle.is-out::after { animation: smoke-rise 1.65s .31s ease-out forwards; }

.fan-wrap { position: absolute; z-index: 50; left: 1px; bottom: 137px; display: block; width: 96px; height: 122px; padding: 0; border: 0; background: none; cursor: pointer; opacity: 1; visibility: visible; touch-action: manipulation; filter: drop-shadow(0 8px 8px rgba(45,29,68,.27)); transition: transform .2s ease, filter .2s ease; }
.fan-wrap:hover, .fan-wrap:focus-visible { transform: translateY(-4px) rotate(-3deg); filter: drop-shadow(0 10px 10px rgba(45,29,68,.33)); outline: none; }.fan-wrap:focus-visible .fan-head { outline: 3px solid rgba(255,255,255,.8); outline-offset: 5px; }
.fan-device { position: absolute; inset: 0; display: block; }.fan-head { position: absolute; left: 11px; top: 0; width: 62px; height: 62px; overflow: hidden; border: 5px solid #fff0f3; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffd5e0, #f58dac 67%, #d76894); box-shadow: inset 0 3px rgba(255,255,255,.48), 0 4px 0 #b5577c; }.fan-head::before { position: absolute; inset: 8px; content: ""; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; }.fan-rotor { position: absolute; inset: 0; }.fan-head b { position: absolute; z-index: 1; left: 28px; top: 8px; width: 11px; height: 27px; border-radius: 80% 25% 72% 35%; background: linear-gradient(90deg, #fff7f7, #f3b0c3); transform-origin: 5px 23px; }.fan-head b:nth-child(2) { transform: rotate(120deg); }.fan-head b:nth-child(3) { transform: rotate(240deg); }.fan-head em { position: absolute; z-index: 2; left: 24px; top: 24px; width: 11px; height: 11px; border-radius: 50%; background: #f8d776; box-shadow: inset 0 -2px #d7a847; }.fan-stem { position: absolute; left: 34px; top: 55px; width: 17px; height: 33px; border-radius: 4px 4px 8px 8px; background: linear-gradient(90deg, #da6f94, #fda6bd 48%, #bd537a); box-shadow: inset 2px 0 rgba(255,255,255,.27); }.fan-base { position: absolute; left: 20px; top: 84px; width: 46px; height: 12px; border-radius: 50% 50% 8px 8px; background: linear-gradient(#ffb1c5, #c65f86); box-shadow: 0 4px 0 #914865; }
.fan-callout { position: absolute; z-index: 3; left: -2px; top: -28px; width: 122px; padding: 7px 8px; color: #75445f; border: 1px solid rgba(255,255,255,.88); border-radius: 99px; background: #fff6ef; box-shadow: 0 7px 15px rgba(61,34,75,.2); font-size: 9px; font-weight: 900; letter-spacing: .04em; text-align: center; text-transform: uppercase; animation: fan-callout-bob 1.25s ease-in-out infinite; }
.fan-caption { position: absolute; left: -3px; top: 100px; width: 78px; color: white; font-size: 9px; font-weight: 800; letter-spacing: .03em; text-align: center; text-shadow: 0 2px 4px rgba(46,24,68,.48); }
.fan-wind { position: absolute; z-index: -1; left: 52px; top: 9px; width: 145px; height: 76px; opacity: 0; pointer-events: none; transform: rotate(-17deg); transform-origin: left center; }.fan-wind i { position: absolute; left: 0; width: 82px; height: 8px; border-top: 2px solid rgba(255,255,255,.93); border-radius: 50%; box-shadow: 0 -1px 8px rgba(252,226,255,.58); }.fan-wind i:nth-child(1) { top: 15px; }.fan-wind i:nth-child(2) { top: 36px; left: 12px; width: 110px; }.fan-wind i:nth-child(3) { top: 58px; left: 25px; width: 76px; }
.fan-wrap.is-blowing { transform: translateY(-2px) rotate(-8deg); }.fan-wrap.is-blowing .fan-rotor { animation: spin-rotor .22s linear infinite; }.fan-wrap.is-blowing .fan-wind { opacity: 1; animation: wind-pulse .28s ease-in-out infinite alternate; }.fan-wrap.is-blowing .fan-caption { color: #ffe9a7; }.fan-wrap.is-done { pointer-events: none; opacity: .76; filter: grayscale(.15) drop-shadow(0 5px 5px rgba(45,29,68,.2)); }.fan-wrap.is-done .fan-caption { width: 92px; left: -10px; color: #ffeff4; }

.knife { --knife-x: 76px; --knife-y: 48px; position: absolute; z-index: 15; left: 50%; bottom: 92px; width: 178px; height: 40px; transform: translateX(var(--knife-x)) translateY(var(--knife-y)) rotate(-18deg); transform-origin: 79% 52%; border: 0; background: none; padding: 0; cursor: grab; filter: drop-shadow(0 8px 5px rgba(41,28,60,.3)); transition: transform .2s cubic-bezier(.2,.9,.3,1), opacity .25s ease; touch-action: none; }
.knife:active, .knife.is-holding { cursor: grabbing; transition: none; }
.knife:disabled { cursor: not-allowed; opacity: .28; filter: grayscale(.4) drop-shadow(0 5px 3px rgba(41,28,60,.18)); }.knife:disabled ~ .drag-cue { opacity: 0; transform: translateY(8px); }
.knife-blade { position: absolute; top: 9px; left: 3px; width: 115px; height: 20px; transform: skewX(-15deg); border-radius: 15px 4px 4px 13px; background: linear-gradient(180deg, #fff 0 30%, #bdc3d0 32% 70%, #7a8194 100%); box-shadow: inset 0 2px 3px rgba(255,255,255,.9), inset 0 -2px rgba(51,60,81,.35); }
.knife-guard { position: absolute; left: 108px; top: 5px; width: 8px; height: 30px; border-radius: 3px; background: #f1c162; box-shadow: 1px 0 #9b6b56; }.knife-handle { position: absolute; left: 115px; top: 4px; width: 59px; height: 32px; border-radius: 8px 17px 17px 8px; background: linear-gradient(180deg, #b76b69, #764e5b); box-shadow: inset 0 4px rgba(255,255,255,.2), inset 0 -4px rgba(67,31,47,.32); }
.drag-cue { position: absolute; z-index: 16; right: -1px; bottom: 109px; display: flex; align-items: center; gap: 6px; padding: 6px 8px 6px 10px; color: white; border-radius: 99px; background: rgba(109,75,124,.78); font-size: 10px; font-weight: 800; box-shadow: 0 5px 11px rgba(41,20,60,.25); pointer-events: none; animation: cue-bob 1.3s ease-in-out infinite; }
.drag-cue i { font-size: 17px; font-style: normal; line-height: .5; }

.cake-actions { width: min(100%, 360px); display: flex; justify-content: space-between; align-items: center; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
.text-button, .sound-toggle { border: 0; color: #fff0f5; background: none; text-shadow: 0 1px 7px rgba(45,28,64,.45); cursor: pointer; font-size: 12px; font-weight: 700; }.text-button { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 4px; }.sound-toggle { padding: 7px; border-radius: 9px; }.sound-toggle[aria-pressed="true"] { background: rgba(255,255,255,.14); }

.cut-line { display: none; position: absolute; z-index: 10; left: 141px; bottom: 35px; width: 4px; height: 135px; border-radius: 99px; background: rgba(128,58,88,.6); transform: rotate(13deg); box-shadow: 1px 0 rgba(255,229,235,.7); }.cake-slice { display: none; position: absolute; z-index: 9; right: 7px; bottom: 36px; width: 65px; height: 96px; transform: rotate(0); transform-origin: 0 100%; border-radius: 5px 25px 13px 7px; background: linear-gradient(100deg, #ffaec5, #f17caa); border-top: 8px solid #fff0ef; box-shadow: inset -7px 0 rgba(174,66,107,.17); }
.cake.is-cut .cut-line, .cake.is-cut .cake-slice { display: block; animation: slice-away 1.4s cubic-bezier(.12,.74,.29,1) forwards; }.cake.is-cut .cut-line { animation: cut-draw .5s ease-out forwards; transform-origin: top; }.cake.is-cut .tier-front, .cake.is-cut .tier-back { animation: cake-wiggle .54s ease-in-out; }.cake-stage.is-cut .flame { animation: extinguish .7s ease-out forwards; }
.knife.is-armed { filter: drop-shadow(0 0 9px rgba(255,229,150,.9)) drop-shadow(0 8px 5px rgba(41,28,60,.3)); }

.teddy-scene { justify-content: center; gap: 0; }
.teddy-copy { position: relative; z-index: 2; margin-top: max(0px, env(safe-area-inset-top)); text-align: center; }.teddy-copy .eyebrow { margin-bottom: 9px; color: #f7d8e4; text-shadow: 0 2px 8px rgba(49,25,67,.4); }.teddy-copy h2 { font-size: clamp(34px, 9vw, 46px); }
.teddy-stage { position: relative; width: min(100%, 400px); height: clamp(320px, 49vh, 410px); margin: 6px auto 1px; overflow: hidden; border-radius: 34px; background: radial-gradient(circle at 51% 49%, rgba(255,232,201,.32), rgba(255,255,255,.06) 45%, transparent 70%); }.teddy-stage::before { position: absolute; inset: 21px 0 0; content: ""; background: radial-gradient(ellipse at bottom, rgba(250,198,212,.25), transparent 65%); pointer-events: none; }.teddy-stars { position: absolute; top: 19px; left: 50%; z-index: 1; color: #ffe2a4; font-size: 17px; letter-spacing: .4em; opacity: .9; transform: translateX(-50%); text-shadow: 0 0 15px rgba(255,239,178,.75); }.teddy-ground { position: absolute; z-index: 0; left: 50%; bottom: 22px; width: 230px; height: 32px; border-radius: 50%; background: radial-gradient(ellipse, rgba(57,31,70,.37), rgba(57,31,70,.05) 64%, transparent 71%); transform: translateX(-50%); filter: blur(3px); }
.teddy-walker { position: absolute; z-index: 2; left: 50%; bottom: 10px; width: min(72vw, 253px); opacity: 0; transform: translateX(-145vw); }.teddy-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 15px 11px rgba(46,27,58,.25)); }.teddy-walker.is-arrived { animation: teddy-arrive 1.75s cubic-bezier(.16,.78,.27,1) forwards; }.teddy-walker.is-arrived .teddy-image { animation: teddy-breathe 1.55s 1.75s ease-in-out infinite; }.teddy-walker.is-giving { opacity: 1; transform: translateX(-50%); animation: teddy-step-close .95s cubic-bezier(.24,.8,.3,1) forwards; }.teddy-walker.is-giving .teddy-image { animation: teddy-offer-bob .95s ease-in-out forwards; }
.teddy-handoff { position: absolute; z-index: 4; left: 50%; top: 45%; width: 105px; height: 82px; opacity: 0; transform: translate(-50%, 0) scale(.53); filter: drop-shadow(0 10px 7px rgba(71,30,63,.27)); }.teddy-handoff i { position: absolute; inset: 16px 0 0; border-radius: 8px 8px 14px 14px; background: linear-gradient(110deg, #ffc2d5, #f777a8 55%, #df5d90); box-shadow: inset 7px 0 rgba(255,255,255,.25), inset -7px -7px rgba(144,43,84,.15); }.teddy-handoff b { position: absolute; z-index: 2; left: 41px; top: 14px; width: 23px; height: 68px; background: linear-gradient(90deg, #fff0ac, #e8b553 55%, #d89a3e); }.teddy-handoff em { position: absolute; z-index: 3; left: 25px; top: 1px; width: 58px; height: 32px; border: 9px solid #f5cc6d; border-radius: 56% 43% 55% 44%; transform: rotate(-4deg); }.teddy-walker.is-giving .teddy-handoff { animation: teddy-gift-offer 1.02s cubic-bezier(.16,.82,.28,1) forwards; }
.teddy-footer { position: relative; z-index: 3; width: min(100%, 326px); text-align: center; }.teddy-footer p { min-height: 21px; margin: 0 0 12px; color: #fff5f4; font-size: 12px; font-weight: 700; text-shadow: 0 2px 7px rgba(46,24,65,.45); }.delivery-button { width: 100%; padding: 14px 18px; color: white; border: 0; border-radius: 14px; background: linear-gradient(135deg, #ed85aa, #d86795); box-shadow: 0 10px 20px rgba(64,25,74,.23), inset 0 1px rgba(255,255,255,.35); cursor: pointer; font-size: 14px; font-weight: 800; opacity: 0; transform: translateY(13px); transition: opacity .36s ease, transform .36s ease, filter .2s ease; }.delivery-button.is-ready { opacity: 1; transform: translateY(0); }.delivery-button:disabled { pointer-events: none; }.delivery-button:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-2px); }.delivery-button span { color: #ffe9a5; }

.reveal-scene { justify-content: center; }
.reveal-card { position: relative; min-height: 562px; overflow: hidden; padding: 26px 26px 31px; display: flex; flex-direction: column; justify-content: center; }
.gift-wrap { position: relative; align-self: center; width: 202px; height: 191px; margin: 3px auto 10px; cursor: pointer; outline: none; transition: transform .25s ease; }.gift-wrap:hover, .gift-wrap:focus-visible { transform: translateY(-5px) scale(1.02); }.gift-box { position: absolute; z-index: 2; left: 16px; bottom: 0; width: 170px; height: 128px; overflow: hidden; border-radius: 9px 9px 17px 17px; background: linear-gradient(115deg, #ffb5cb 0 45%, #f989ad 46% 72%, #ed719e 100%); box-shadow: inset 7px 0 rgba(255,255,255,.2), inset -8px -8px rgba(166,45,95,.15), 0 13px 18px rgba(81,40,76,.17); }.gift-lid { position: absolute; z-index: 5; left: 8px; top: 50px; width: 187px; height: 37px; border-radius: 9px; background: linear-gradient(105deg, #ffc7d8, #f985ad); box-shadow: inset 0 5px rgba(255,255,255,.25), 0 6px 8px rgba(88,39,77,.15); transform-origin: 14% 82%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }.gift-lid span, .gift-ribbon-v { position: absolute; left: 50%; top: 0; width: 24px; height: 100%; transform: translateX(-50%); background: linear-gradient(90deg, #ffedb1, #f4c664 55%, #da9c43); box-shadow: inset 3px 0 rgba(255,255,255,.35); }.gift-ribbon-h { position: absolute; z-index: 4; left: 0; top: 48px; width: 100%; height: 20px; background: linear-gradient(#ffebaa, #e7af4f); }.gift-bow { position: absolute; z-index: 7; top: 21px; left: 50%; width: 85px; height: 50px; transform: translateX(-50%); }.gift-bow i { position: absolute; top: 3px; width: 49px; height: 37px; border: 11px solid #f6c968; border-radius: 55% 46% 54% 45%; }.gift-bow i:first-child { left: 1px; transform: rotate(-25deg); }.gift-bow i:last-child { right: 1px; transform: rotate(25deg); }.tap-me { position: absolute; z-index: 8; width: 100%; bottom: -27px; color: #b56583; font-size: 11px; font-weight: 800; text-align: center; animation: heart-beat 1.4s ease-in-out infinite; }
.gift-wrap.is-open { pointer-events: none; transform: translateY(-16px) scale(.86); }.gift-wrap.is-open .gift-lid { transform: translate(-5px, -76px) rotate(-17deg); }.gift-wrap.is-open .tap-me { opacity: 0; }
.poem-scene { justify-content: center; }.poem-card { width: min(100%, 440px); padding: 29px 21px 25px; text-align: center; }.poem-card .eyebrow { margin-bottom: 11px; font-size: 8.5px; }.poem-card h2 { color: #684258; font-size: clamp(30px, 8.5vw, 41px); text-shadow: none; }.poem-card h2 em { color: #e37499; }.poet-credit { margin: 9px 0 19px; color: #9b667b; font-family: Georgia, serif; font-size: 13px; font-style: italic; }.poet-credit span { color: #d96e96; font-weight: 700; }.poem-lines { padding: 15px 14px; border: 1px solid rgba(219,145,171,.31); border-radius: 17px; background: linear-gradient(140deg, rgba(255,255,255,.68), rgba(255,226,234,.55)); box-shadow: inset 0 1px rgba(255,255,255,.8); }.poem-lines p { margin: 0; color: #6e435d; font-family: "Noto Serif Tamil", "Latha", "Nirmala UI", Georgia, serif; font-size: clamp(12px, 3.3vw, 14px); font-weight: 600; line-height: 1.73; text-align: left; }.poem-continue { width: 100%; margin-top: 17px; padding: 13px 15px; color: #fff; border: 0; border-radius: 13px; background: linear-gradient(135deg, #ed85aa, #d86795); box-shadow: 0 9px 17px rgba(182,71,116,.25); cursor: pointer; font-size: 13px; font-weight: 800; }.poem-continue span { display: inline-block; margin-left: 7px; font-size: 17px; transition: transform .2s ease; }.poem-continue:hover span { transform: translateX(4px); }
.sury-scene { justify-content: center; }.sury-card { width: min(100%, 416px); padding: 27px 24px 25px; text-align: center; overflow: hidden; }.sury-card .eyebrow { margin-bottom: 8px; }.sury-card h2 { color: #684258; font-size: clamp(31px, 9vw, 43px); text-shadow: none; }.sury-card h2 em { color: #e37499; }.sury-avatar-wrap { position: relative; width: min(56vw, 225px); height: min(60vw, 241px); margin: 5px auto 3px; overflow: hidden; border: 2px solid rgba(255,255,255,.9); border-radius: 48% 48% 34% 34% / 38% 38% 22% 22%; background: linear-gradient(145deg, #fff1f3, #f8c8d7); box-shadow: 0 12px 23px rgba(126,55,94,.18), inset 0 2px rgba(255,255,255,.9); }.sury-glow { position: absolute; z-index: 0; left: 50%; top: 51%; width: 188px; height: 188px; border-radius: 50%; background: radial-gradient(circle, rgba(255,211,224,.95), rgba(248,162,193,.31) 53%, transparent 70%); transform: translate(-50%, -50%); }.sury-avatar { position: absolute; z-index: 1; bottom: 0; left: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; filter: drop-shadow(0 13px 9px rgba(78,39,73,.23)); }.sury-boom { position: absolute; z-index: 2; right: -13px; top: 24px; padding: 8px 9px; color: #fff4bd; border: 2px solid #fff7df; border-radius: 50% 45% 52% 46%; background: #ef709b; box-shadow: 0 6px 0 #bd547c, 0 8px 15px rgba(126,53,91,.27); font-size: 14px; font-weight: 950; letter-spacing: -.04em; transform: rotate(11deg) scale(0); }.sury-gift-line { margin: 8px auto 17px; color: #8e5c73; font-family: Georgia, serif; font-size: 15px; line-height: 1.45; }.sury-gift-line strong { color: #dd6e96; font-size: 1.14em; }.sury-gift-line span { color: #eb80a6; }.sury-continue { width: 100%; padding: 13px 15px; color: white; border: 0; border-radius: 13px; background: linear-gradient(135deg, #ed85aa, #d86795); box-shadow: 0 9px 17px rgba(182,71,116,.25); cursor: pointer; font-size: 13px; font-weight: 800; }.sury-continue span { display: inline-block; margin-left: 7px; font-size: 17px; transition: transform .2s ease; }.sury-continue:hover span { transform: translateX(4px); }.sury-scene.is-visible .sury-avatar { animation: sury-pop .78s .22s cubic-bezier(.15,.88,.22,1.25) both; }.sury-scene.is-visible .sury-boom { animation: boom-pop .48s .72s cubic-bezier(.13,.8,.3,1.5) both; }.sury-scene.is-visible .sury-glow { animation: glow-pulse 1.55s .5s ease-in-out infinite alternate; }
.sury-avatar-wrap { touch-action: none; }.ring-target { position: absolute; z-index: 3; right: 65px; bottom: 50px; width: 48px; height: 48px; border: 2px dashed rgba(234,123,162,.76); border-radius: 50%; background: rgba(255,247,207,.62); box-shadow: 0 0 0 7px rgba(255,255,255,.25), 0 0 18px rgba(246,184,88,.62); animation: ring-target-pulse 1.2s ease-in-out infinite; pointer-events: none; }.ring-target i { position: absolute; inset: 0; color: #da769d; font-size: 18px; font-style: normal; line-height: 43px; text-align: center; }.ring-target.is-complete { opacity: 0; transform: scale(1.4); transition: opacity .3s ease, transform .3s ease; animation: none; }.ring-drag { position: absolute; z-index: 5; left: 9px; top: 167px; width: 58px; height: 58px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; filter: drop-shadow(0 7px 5px rgba(105,64,42,.25)); transition: filter .2s ease, transform .2s ease; }.ring-drag:focus-visible { outline: 3px solid white; border-radius: 50%; }.ring-drag.is-dragging { cursor: grabbing; filter: drop-shadow(0 12px 8px rgba(105,64,42,.35)); transition: none; }.ring-drag.is-placed { cursor: default; filter: drop-shadow(0 0 8px rgba(255,224,106,.9)); transition: left .28s ease, top .28s ease, filter .28s ease; }.ring-band { position: absolute; left: 10px; top: 17px; width: 38px; height: 38px; border: 7px solid #efc550; border-top-color: #ffe99a; border-radius: 50%; box-shadow: inset 0 0 0 1px #a66f2c, 0 1px 0 #99692d; }.ring-gem { position: absolute; left: 21px; top: 4px; width: 20px; height: 20px; border: 3px solid #e8c64e; border-radius: 6px; background: linear-gradient(135deg, #fff 0 22%, #b8ecff 23% 48%, #d6a9ff 49% 71%, #fff 72%); box-shadow: 0 0 9px 2px rgba(194,239,255,.78); transform: rotate(45deg); }.ring-instruction { margin: -1px 0 13px; color: #ac6380; font-size: 11px; font-weight: 800; }.ring-instruction.is-complete { color: #c66189; animation: appear .5s ease; }.sury-continue:disabled { cursor: not-allowed; opacity: .4; box-shadow: none; }.sury-continue:not(:disabled):hover { transform: translateY(-2px); filter: brightness(1.06); }
.surya-crown { position: absolute; z-index: 4; top: 16px; left: 50%; color: #ffe68a; font-size: 29px; line-height: 1; opacity: 0; filter: drop-shadow(0 3px 2px rgba(126,72,34,.3)); transform: translate(-50%, -11px) rotate(-12deg) scale(.45); transition: opacity .35s ease, transform .55s cubic-bezier(.2,1.2,.3,1); }.surya-joy { position: absolute; z-index: 4; inset: 0; pointer-events: none; }.surya-joy i { position: absolute; color: #ffec9d; font-size: 18px; font-style: normal; opacity: 0; }.surya-joy i:nth-child(1) { left: 18px; bottom: 64px; color: #ef7ca4; }.surya-joy i:nth-child(2) { right: 18px; bottom: 92px; }.surya-joy i:nth-child(3) { right: 28px; bottom: 36px; color: #ef7ca4; }.surya-joy i:nth-child(4) { left: 32px; bottom: 25px; }.surya-final-message { display: none; margin: 15px 0 0; color: #b75981; font-family: Georgia, serif; font-size: 14px; font-weight: 700; line-height: 1.5; }.sury-card.is-sealed .sury-avatar { animation: surya-happy 1.05s cubic-bezier(.18,.8,.26,1.35) both; }.sury-card.is-sealed .sury-glow { background: radial-gradient(circle, rgba(255,229,144,.96), rgba(249,149,191,.38) 53%, transparent 72%); animation: sealed-glow 1.2s ease-in-out infinite alternate; }.sury-card.is-sealed .surya-crown { opacity: 1; transform: translate(-50%, 0) rotate(-8deg) scale(1); }.sury-card.is-sealed .surya-joy i { animation: joy-float 1.65s ease-in-out infinite; }.sury-card.is-sealed .surya-joy i:nth-child(2) { animation-delay: .2s; }.sury-card.is-sealed .surya-joy i:nth-child(3) { animation-delay: .45s; }.sury-card.is-sealed .surya-joy i:nth-child(4) { animation-delay: .65s; }.sury-card.is-sealed .sury-boom { opacity: 0; transform: rotate(11deg) scale(.7); transition: opacity .25s ease, transform .25s ease; }.sury-card.is-sealed .sury-gift-line { margin-bottom: 7px; color: #c46488; }.sury-card.is-sealed .ring-instruction { margin-bottom: 4px; }.sury-card.is-sealed .sury-continue { display: none; }.sury-card.is-sealed .surya-final-message { display: block; animation: appear .55s .16s both; }
.proposal-scene { justify-content: center; }.proposal-card { width: min(100%, 418px); padding: 33px 27px 29px; text-align: center; }.proposal { opacity: 1; }.love-mark { margin: 4px 0 9px; color: #ee7fa5; font-size: 26px; }.proposal h2 { color: #6b405c; font-size: clamp(34px, 10vw, 44px); text-shadow: none; }.proposal h2 em { color: #e46f98; }.proposal-copy { margin-top: 17px; font-size: 13.5px; }.answer-row { display: grid; gap: 10px; margin-top: 22px; }.yes-button { padding: 14px; border-radius: 13px; font-size: 14px; font-weight: 800; }.yes-button span { color: #ffe3a3; }.later-button { border: 0; cursor: pointer; color: #a46f85; background: transparent; font-size: 11px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }.final-note { display: none; margin: 18px 0 0; color: #bb6083; font-family: Georgia, serif; font-size: 14px; line-height: 1.5; }.proposal-card.got-yes .final-note { display: block; animation: appear .5s ease; }.proposal-card.got-yes .answer-row { display: none; }

.toast { position: fixed; z-index: 90; left: 50%; bottom: max(26px, env(safe-area-inset-bottom)); padding: 11px 16px; color: #62485f; border-radius: 99px; background: #fff8ef; box-shadow: 0 10px 25px rgba(38,21,56,.28); font-size: 12px; font-weight: 800; opacity: 0; pointer-events: none; transform: translate(-50%, 18px); transition: opacity .25s ease, transform .25s ease; white-space: nowrap; }.toast.show { opacity: 1; transform: translate(-50%, 0); }
.restart { position: fixed; z-index: 50; top: max(15px, env(safe-area-inset-top)); right: 15px; width: 34px; height: 34px; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.36); border-radius: 50%; background: rgba(78,55,98,.25); backdrop-filter: blur(5px); cursor: pointer; opacity: 0; transition: opacity .3s; }.restart.is-on { opacity: 1; }

@keyframes glimmer { to { opacity: .78; filter: brightness(1.2); } } @keyframes flicker { to { transform: translateX(-50%) scale(.84,1.14) rotate(4deg); filter: brightness(1.15); } } @keyframes flame-bend { to { transform: translateX(-50%) translateX(7px) rotate(19deg) scale(.68,1.22); filter: brightness(1.13); } } @keyframes flame-out { 0% { opacity: 1; transform: translateX(-50%) translateX(6px) rotate(20deg) scale(.9,1.1); } 62% { opacity: .86; transform: translateX(-50%) translateX(13px) rotate(35deg) scale(.35,1.55); } 100% { opacity: 0; transform: translateX(-50%) translateX(17px) translateY(5px) scale(0); } } @keyframes smoke-rise { 0% { opacity: 0; transform: translateX(-50%) translateY(0) rotate(-18deg) scale(.45); } 20% { opacity: .88; } 100% { opacity: 0; transform: translateX(calc(-50% + 14px)) translateY(-45px) rotate(30deg) scale(1.3); } } @keyframes spin-rotor { to { transform: rotate(360deg); } } @keyframes wind-pulse { to { transform: rotate(-17deg) translateX(9px) scaleX(1.08); opacity: .72; } } @keyframes fan-callout-bob { 50% { transform: translateY(-5px) scale(1.03); } } @keyframes teddy-arrive { 0% { opacity: 0; transform: translateX(-145vw) rotate(-4deg); } 18% { opacity: 1; } 70% { transform: translateX(-56%) rotate(2deg); } 84% { transform: translateX(-46%) rotate(-1deg); } 100% { opacity: 1; transform: translateX(-50%) rotate(0); } } @keyframes teddy-breathe { 50% { transform: translateY(-8px) rotate(1deg); } } @keyframes teddy-step-close { to { transform: translateX(-50%) scale(1.075); } } @keyframes teddy-offer-bob { 40% { transform: translateY(-12px) rotate(1deg); } 100% { transform: translateY(-2px) scale(.97); opacity: .3; } } @keyframes teddy-gift-offer { 0% { opacity: 0; transform: translate(-50%, 0) scale(.53); } 18% { opacity: 1; } 100% { opacity: 1; transform: translate(-50%, -87px) scale(1.5); } } @keyframes sury-pop { 0% { opacity: 0; transform: translateY(35px) scale(.64); } 72% { opacity: 1; transform: translateY(-6px) scale(1.04); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes boom-pop { to { transform: rotate(11deg) scale(1); } } @keyframes glow-pulse { to { transform: translate(-50%, -50%) scale(1.13); filter: brightness(1.12); } } @keyframes heart-beat { 50% { transform: scale(1.22); } } @keyframes cue-bob { 50% { transform: translateX(-8px); } } @keyframes cut-draw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } } @keyframes slice-away { to { transform: translate(39px, 14px) rotate(14deg); opacity: .92; } } @keyframes cake-wiggle { 25% { transform: translateX(-50%) rotate(-1.5deg); } 70% { transform: translateX(-50%) rotate(1.2deg); } } @keyframes extinguish { 0% { opacity: 1; } 40% { transform: translateX(-50%) scale(.3,1.8); } 100% { opacity: 0; transform: translateX(-50%) translateY(-10px) scale(0); } } @keyframes appear { from { opacity: 0; transform: translateY(7px); } }

@media (min-width: 600px) { .cake-stage { transform: scale(1.05); margin-top: 6px; }.cake-actions { padding-bottom: 14px; }.reveal-card { min-height: 578px; } }
@media (max-height: 700px) { .cake-header { padding-top: 0; }.wish-ribbon { top: 130px; }.cake-stage { height: 43vh; min-height: 292px; transform: scale(.88); margin: -6px auto; }.cake-actions { padding-bottom: 0; }.teddy-stage { height: 318px; margin-top: -4px; }.teddy-walker { width: 210px; }.teddy-copy { transform: scale(.92); }.sury-card { transform: scale(.88); }.reveal-card { min-height: 508px; transform: scale(.9); }.intro-card { transform: scale(.9); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }

@keyframes ring-target-pulse { 50% { transform: scale(1.14); box-shadow: 0 0 0 10px rgba(255,255,255,.17), 0 0 26px rgba(246,184,88,.8); } }
@keyframes cinematic-twinkle { to { transform: translateY(-5px) scale(1.14); filter: brightness(1.2); } } @keyframes surya-happy { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-17px) rotate(-2deg) scale(1.045); } 63% { transform: translateY(-3px) rotate(2deg) scale(1.015); } 82% { transform: translateY(-9px) rotate(-1deg) scale(1.03); } 100% { transform: translateY(0) rotate(0) scale(1); } } @keyframes sealed-glow { to { transform: translate(-50%, -50%) scale(1.22); filter: brightness(1.18); } } @keyframes joy-float { 0%, 100% { opacity: 0; transform: translateY(8px) scale(.7) rotate(-12deg); } 30%, 70% { opacity: 1; } 55% { transform: translateY(-28px) scale(1.1) rotate(12deg); } }
@keyframes scene-scroll-arrive { 0% { opacity: 0; filter: blur(6px); transform: translate3d(0, 13vh, 0) scale(.93); } 58% { opacity: 1; filter: blur(0); transform: translate3d(0, -1.5vh, 0) scale(1.012); } 100% { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); } } @keyframes depth-drift { to { transform: translate3d(-18px, -24px, 0) scale(1.15); opacity: .72; } } @keyframes scroll-nudge { 50% { transform: translateY(5px); opacity: .65; } }
@keyframes manisha-avatar-arrive { 0% { opacity: 0; transform: translateY(18px) scale(.58) rotate(-7deg); } 70% { opacity: 1; transform: translateY(-4px) scale(1.06) rotate(2deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } } @keyframes avatar-aura-pulse { to { transform: scale(1.075); filter: brightness(1.07); } } @keyframes avatar-spark { 0%, 100% { opacity: 0; transform: translateY(8px) scale(.72) rotate(-15deg); } 44%, 70% { opacity: 1; } 56% { transform: translateY(-8px) scale(1.1) rotate(10deg); } }
@keyframes avatar-orbit { to { transform: rotate(348deg); } } @keyframes crown-arrive { from { opacity: 0; transform: translateX(-50%) translateY(-14px) rotate(-20deg) scale(.2); } to { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-8deg) scale(1); } } @keyframes ribbon-arrive { from { opacity: 0; transform: translateX(-50%) translateY(9px) scale(.7); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes hero-copy-arrive { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }

/* The cake cut has three beats: the slice opens, the cake celebrates, then it is served. */
.cake-stage.is-cut .cake-halo { animation: cake-halo-bloom 1.35s ease-out both; }.cake-stage.is-cut .cake-plate { animation: plate-settle .72s cubic-bezier(.18,.86,.25,1.2) both; }.cake-slice { overflow: visible; background: linear-gradient(100deg, #ffbdd0 0 31%, #f17caa 32% 60%, #d96698 100%); box-shadow: inset -7px 0 rgba(174,66,107,.17), 0 8px 10px rgba(95,39,76,.14); }.cake-slice::before { position: absolute; left: -4px; right: -2px; top: 27px; height: 11px; content: ""; border-radius: 3px; background: #fff2e9; box-shadow: 0 21px 0 #f9b8c9, 0 32px 0 rgba(175,62,103,.16); }.cake-slice::after { position: absolute; top: -15px; left: 7px; width: 49px; height: 20px; content: ""; border-radius: 50%; background: radial-gradient(ellipse at 48% 30%, #fffdfa, #ffe6ec 56%, #efa0ba 100%); box-shadow: inset 0 3px rgba(255,255,255,.76), 0 2px #efb0c3; }.cake-stage.is-served .cake-slice { animation: slice-serve .74s cubic-bezier(.19,.9,.24,1.14) forwards; }.cake-celebration { position: absolute; z-index: 13; inset: 0; pointer-events: none; }.cake-celebration i { position: absolute; bottom: 111px; left: 50%; color: #ffe894; font-size: 18px; font-style: normal; opacity: 0; text-shadow: 0 3px 8px rgba(129,48,91,.24); }.cake-celebration i:nth-child(1) { --burst-x: -112px; --burst-y: -62px; --burst-r: -22deg; color: #ef7da7; }.cake-celebration i:nth-child(2) { --burst-x: -72px; --burst-y: -116px; --burst-r: 18deg; }.cake-celebration i:nth-child(3) { --burst-x: -19px; --burst-y: -145px; --burst-r: -11deg; color: #ffacc6; }.cake-celebration i:nth-child(4) { --burst-x: 42px; --burst-y: -129px; --burst-r: 22deg; color: #ef7da7; }.cake-celebration i:nth-child(5) { --burst-x: 101px; --burst-y: -72px; --burst-r: -18deg; }.cake-celebration i:nth-child(6) { --burst-x: 82px; --burst-y: -27px; --burst-r: 12deg; color: #ffacc6; }.cake-celebration i:nth-child(7) { --burst-x: -88px; --burst-y: -23px; --burst-r: -18deg; }.cake-stage.is-celebrating .cake-celebration i { animation: cake-burst 1.18s .14s cubic-bezier(.15,.82,.3,1) both; }.cake-stage.is-celebrating .cake-celebration i:nth-child(2) { animation-delay: .2s; }.cake-stage.is-celebrating .cake-celebration i:nth-child(3) { animation-delay: .1s; }.cake-stage.is-celebrating .cake-celebration i:nth-child(4) { animation-delay: .26s; }.cake-stage.is-celebrating .cake-celebration i:nth-child(5) { animation-delay: .17s; }.cake-stage.is-celebrating .cake-celebration i:nth-child(6) { animation-delay: .31s; }.cake-stage.is-celebrating .cake-celebration i:nth-child(7) { animation-delay: .23s; }

/* Teddy gets a real arrival: spotlight, tiny trail, hello, then a gift-forward motion. */
.teddy-spotlight { position: absolute; z-index: 0; left: 50%; bottom: 12px; width: 360px; height: 330px; border-radius: 50% 50% 42% 42%; background: radial-gradient(ellipse at bottom, rgba(255,228,168,.3), rgba(255,205,224,.13) 42%, transparent 71%); transform: translateX(-50%) scale(.54); opacity: 0; filter: blur(2px); }.teddy-stage.is-arrived .teddy-spotlight { animation: teddy-spotlight-in 1.35s .15s ease-out both; }.teddy-trail { position: absolute; z-index: 1; bottom: 36px; left: 50%; width: 220px; height: 50px; transform: translateX(-50%); pointer-events: none; }.teddy-trail i { position: absolute; bottom: 0; width: 12px; height: 8px; border-radius: 50%; background: rgba(255,227,206,.68); opacity: 0; transform: rotate(-16deg) scale(.4); }.teddy-trail i:nth-child(1) { left: 20px; }.teddy-trail i:nth-child(2) { left: 67px; bottom: 12px; transform: rotate(16deg) scale(.4); }.teddy-trail i:nth-child(3) { left: 117px; bottom: 2px; }.teddy-trail i:nth-child(4) { left: 163px; bottom: 14px; transform: rotate(16deg) scale(.4); }.teddy-stage.is-arrived .teddy-trail i { animation: teddy-footprint .65s ease-out both; }.teddy-stage.is-arrived .teddy-trail i:nth-child(2) { animation-delay: .36s; }.teddy-stage.is-arrived .teddy-trail i:nth-child(3) { animation-delay: .72s; }.teddy-stage.is-arrived .teddy-trail i:nth-child(4) { animation-delay: 1.08s; }.teddy-bubble { position: absolute; z-index: 5; right: 18px; top: 58px; padding: 8px 10px; color: #86516b; border: 1px solid rgba(255,255,255,.85); border-radius: 18px 18px 18px 4px; background: rgba(255,249,240,.94); box-shadow: 0 8px 17px rgba(53,27,69,.2); font-family: Georgia, serif; font-size: 12px; font-weight: 700; opacity: 0; transform: translateY(10px) scale(.78); }.teddy-bubble::after { position: absolute; left: 8px; bottom: -7px; width: 13px; height: 13px; content: ""; background: #fff9f0; transform: rotate(45deg); }.teddy-bubble span { color: #e4729b; }.teddy-stage.is-arrived .teddy-bubble { animation: teddy-bubble-in .52s 1.52s cubic-bezier(.17,1.2,.28,1) both; }.teddy-walker.is-arrived { animation: teddy-cinematic-arrive 2.02s cubic-bezier(.16,.78,.27,1) forwards; }.teddy-walker.is-arrived .teddy-image { animation: teddy-welcome-bounce 1.7s 2s ease-in-out infinite; }.teddy-stage.is-arrived .teddy-ground { animation: teddy-shadow-pulse 2.02s ease-out both; }.teddy-gift-spark { position: absolute; z-index: 6; left: 50%; top: 39%; width: 124px; height: 94px; pointer-events: none; transform: translateX(-50%); }.teddy-gift-spark i { position: absolute; color: #ffe793; font-size: 18px; font-style: normal; opacity: 0; }.teddy-gift-spark i:nth-child(1) { left: 8px; top: 13px; }.teddy-gift-spark i:nth-child(2) { right: 8px; top: 27px; color: #f27da9; }.teddy-gift-spark i:nth-child(3) { left: 49px; bottom: 0; }.teddy-stage.is-offering .teddy-gift-spark i { animation: teddy-gift-spark 1.05s .16s ease-out both; }.teddy-stage.is-offering .teddy-gift-spark i:nth-child(2) { animation-delay: .32s; }.teddy-stage.is-offering .teddy-gift-spark i:nth-child(3) { animation-delay: .48s; }.teddy-stage.is-offering .teddy-bubble { animation: teddy-bubble-out .32s ease forwards; }.teddy-stage.is-offering .teddy-ground { animation: teddy-offer-shadow .9s ease both; }
.teddy-walker.is-arrived.is-giving { animation: teddy-step-close .95s cubic-bezier(.24,.8,.3,1) forwards; }.teddy-walker.is-arrived.is-giving .teddy-image { animation: teddy-offer-bob .95s ease-in-out forwards; }
.teddy-walker.is-arrived.is-leaving { animation: teddy-walk-away 1.03s cubic-bezier(.48,.05,.82,.42) forwards; }.teddy-walker.is-arrived.is-leaving .teddy-image { animation: teddy-goodbye-bounce .72s ease-in-out both; }.teddy-walker.is-leaving .teddy-handoff { opacity: 0; transition: opacity .18s ease; }.teddy-stage.is-leaving .teddy-spotlight { animation: teddy-spotlight-out .7s ease both; }.teddy-stage.is-leaving .teddy-trail { opacity: .55; transition: opacity .55s ease; }.teddy-stage.is-leaving .teddy-stars { animation: teddy-stars-sendoff .75s ease both; }

@keyframes cake-halo-bloom { 0% { opacity: .35; transform: translateX(-50%) scale(.82); } 55% { opacity: 1; transform: translateX(-50%) scale(1.2); } 100% { opacity: .78; transform: translateX(-50%) scale(1); } } @keyframes plate-settle { 0% { transform: translateX(-50%) translateY(7px) scale(.88); } 72% { transform: translateX(-50%) translateY(-2px) scale(1.045); } 100% { transform: translateX(-50%) translateY(0) scale(1); } } @keyframes slice-serve { from { transform: translate(39px, 14px) rotate(14deg); } to { transform: translate(56px, -1px) rotate(8deg) scale(1.04); } } @keyframes cake-burst { 0% { opacity: 0; transform: translate(-50%, 0) scale(.25) rotate(0); } 32% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--burst-x)), var(--burst-y)) scale(1.15) rotate(var(--burst-r)); } } @keyframes teddy-cinematic-arrive { 0% { opacity: 0; transform: translateX(-145vw) translateY(7px) rotate(-5deg); } 12% { opacity: 1; } 28% { transform: translateX(-109%) translateY(-8px) rotate(2deg); } 45% { transform: translateX(-83%) translateY(3px) rotate(-2deg); } 62% { transform: translateX(-65%) translateY(-8px) rotate(2deg); } 78% { transform: translateX(-56%) translateY(2px) rotate(-1deg); } 90% { transform: translateX(-47%) translateY(-3px) rotate(1deg); } 100% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0); } } @keyframes teddy-welcome-bounce { 0%, 100% { transform: translateY(0) rotate(0); } 38% { transform: translateY(-9px) rotate(1.5deg); } 55% { transform: translateY(-3px) rotate(-1deg); } 70% { transform: translateY(-6px) rotate(1deg); } } @keyframes teddy-spotlight-in { from { opacity: 0; transform: translateX(-50%) scale(.54); } to { opacity: 1; transform: translateX(-50%) scale(1); } } @keyframes teddy-footprint { 0% { opacity: 0; transform: rotate(-16deg) scale(.4); } 45% { opacity: .8; transform: rotate(-16deg) scale(1); } 100% { opacity: .18; transform: rotate(-16deg) scale(.86); } } @keyframes teddy-bubble-in { from { opacity: 0; transform: translateY(10px) scale(.78); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes teddy-bubble-out { to { opacity: 0; transform: translateY(-8px) scale(.86); } } @keyframes teddy-shadow-pulse { 0% { transform: translateX(-50%) scale(.42); opacity: .1; } 60% { transform: translateX(-50%) scale(1.13); opacity: .52; } 100% { transform: translateX(-50%) scale(1); opacity: 1; } } @keyframes teddy-offer-shadow { to { transform: translateX(-50%) scale(1.22); opacity: .7; } } @keyframes teddy-gift-spark { 0% { opacity: 0; transform: translateY(8px) scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-26px) scale(1.2) rotate(18deg); } }

/* The knife now performs a visible pull-back → sweep → lift, timed to the cake opening. */
.cake-stage.is-knife-cutting .cake { animation: cake-ready-to-cut .46s ease-out both; }.knife.is-cutting { z-index: 24; pointer-events: none; opacity: 1; animation: knife-cinematic-cut 1.02s cubic-bezier(.2,.82,.25,1) both; }.knife.is-cutting .knife-blade { animation: blade-flash .6s .33s ease-out both; }.cake-cut-impact { position: absolute; z-index: 18; left: 50%; bottom: 151px; width: 20px; height: 20px; pointer-events: none; transform: translateX(-50%); }.cake-cut-impact::before { position: absolute; inset: -24px; content: ""; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,225,.94), rgba(255,208,224,.48) 28%, transparent 68%); opacity: 0; transform: scale(.22); }.cake-cut-impact i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #fff5c9; opacity: 0; box-shadow: 0 0 7px rgba(255,225,134,.84); }.cake-cut-impact i:nth-child(1) { --crumb-x: -49px; --crumb-y: -32px; background: #ffbfd0; }.cake-cut-impact i:nth-child(2) { --crumb-x: -20px; --crumb-y: -58px; }.cake-cut-impact i:nth-child(3) { --crumb-x: 25px; --crumb-y: -51px; background: #f591b6; }.cake-cut-impact i:nth-child(4) { --crumb-x: 51px; --crumb-y: -24px; }.cake-cut-impact i:nth-child(5) { --crumb-x: 10px; --crumb-y: 24px; background: #ffbfd0; }.cake-stage.is-cut .cake-cut-impact::before { animation: cut-impact-flash .48s ease-out both; }.cake-stage.is-cut .cake-cut-impact i { animation: cake-crumb-fly .78s cubic-bezier(.13,.82,.25,1) both; }.cake-stage.is-cut .cake-cut-impact i:nth-child(2) { animation-delay: .05s; }.cake-stage.is-cut .cake-cut-impact i:nth-child(3) { animation-delay: .1s; }.cake-stage.is-cut .cake-cut-impact i:nth-child(4) { animation-delay: .03s; }.cake-stage.is-cut .cake-cut-impact i:nth-child(5) { animation-delay: .13s; }

@keyframes cake-ready-to-cut { 0% { transform: translateX(-50%) scale(1); } 58% { transform: translateX(-50%) translateY(2px) scale(.985); } 100% { transform: translateX(-50%) translateY(0) scale(1); } } @keyframes knife-cinematic-cut { 0% { transform: translateX(76px) translateY(48px) rotate(-18deg); } 20% { transform: translateX(48px) translateY(-16px) rotate(-32deg); } 47% { transform: translateX(4px) translateY(-42px) rotate(-8deg); } 66% { transform: translateX(-33px) translateY(-19px) rotate(12deg); } 82% { transform: translateX(-17px) translateY(-61px) rotate(22deg); } 100% { transform: translateX(-6px) translateY(-78px) rotate(18deg); opacity: .2; } } @keyframes blade-flash { 0% { filter: brightness(1); } 42% { filter: brightness(1.85) drop-shadow(0 0 7px rgba(255,247,188,.96)); } 100% { filter: brightness(1); } } @keyframes cut-impact-flash { 0% { opacity: 0; transform: scale(.22); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.85); } } @keyframes cake-crumb-fly { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--crumb-x)), calc(-50% + var(--crumb-y))) scale(.78) rotate(150deg); } }
@keyframes teddy-walk-away { 0% { opacity: 1; transform: translateX(-50%) translateY(0) rotate(0); } 25% { transform: translateX(-12%) translateY(-8px) rotate(3deg); } 52% { transform: translateX(43%) translateY(2px) rotate(-2deg); } 78% { opacity: 1; transform: translateX(96%) translateY(-6px) rotate(3deg); } 100% { opacity: 0; transform: translateX(145vw) translateY(4px) rotate(-2deg); } } @keyframes teddy-goodbye-bounce { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(5deg) translateY(-7px); } 65% { transform: rotate(-3deg) translateY(1px); } } @keyframes teddy-spotlight-out { to { opacity: 0; transform: translateX(-50%) scale(1.2); } } @keyframes teddy-stars-sendoff { 50% { transform: translateX(-50%) translateY(-12px) scale(1.18); } 100% { opacity: 0; transform: translateX(-50%) translateY(-24px) scale(.8); } }

/* One camera movement carries the whole story forward; pointer movement adds a second, nearer layer. */
.experience { --chapter-x: 0px; --chapter-y: 0px; }.sky-wash { transform: translate3d(calc(var(--far-x) + var(--chapter-x)), calc(var(--far-y) + var(--chapter-y)), 0) scale(1.1); transition: transform 1.35s cubic-bezier(.18,.78,.22,1); }.sparkles { transform: translate3d(calc(var(--near-x) + var(--chapter-x)), calc(var(--near-y) + var(--chapter-y)), 0); transition: transform 1.05s cubic-bezier(.18,.78,.22,1); }.parallax-field { transform: translate3d(calc(var(--near-x) + var(--chapter-x)), calc(var(--near-y) + var(--chapter-y) + var(--scroll-sway)), 0); transition: transform 1.2s cubic-bezier(.18,.78,.22,1); }.parallax-field i:nth-child(1) { animation: ambient-float-left 9s ease-in-out infinite alternate; }.parallax-field i:nth-child(2) { animation: ambient-float-right 12s -3s ease-in-out infinite alternate; }.parallax-field i:nth-child(3) { animation: ambient-float-low 11s -5s ease-in-out infinite alternate; }.teddy-walker.is-arrived { animation-duration: 1.62s; animation-timing-function: cubic-bezier(.16,.8,.26,1); }.teddy-walker.is-arrived .teddy-image { animation-delay: 1.62s; }.teddy-stage.is-arrived .teddy-ground { animation-duration: 1.62s; }.teddy-stage.is-arrived .teddy-bubble { animation-delay: 1.18s; }.teddy-stage.is-arrived .teddy-spotlight { animation-duration: 1.05s; }.teddy-scene.is-visible .teddy-copy { animation: teddy-copy-float .82s .08s cubic-bezier(.18,.82,.25,1) both; }.teddy-stage { transform: translateY(0) scale(1); transition: transform .8s cubic-bezier(.18,.82,.25,1), filter .8s ease; }.teddy-stage.is-offering { transform: translateY(-4px) scale(1.018); filter: saturate(1.07) brightness(1.035); }.teddy-stage.is-leaving { transform: translateY(-10px) scale(1.035); filter: brightness(1.06); }.cake-stage.is-knife-cutting { filter: saturate(1.06) brightness(1.04); transition: filter .35s ease; }.cake-stage.is-cut { filter: saturate(1.08) brightness(1.03); transition: filter .7s ease; }

@keyframes ambient-float-left { to { transform: translate3d(30px, 22px, 0) scale(1.08); } } @keyframes ambient-float-right { to { transform: translate3d(-25px, 32px, 0) scale(.9); } } @keyframes ambient-float-low { to { transform: translate3d(22px, -24px, 0) scale(1.12); } } @keyframes teddy-copy-float { from { opacity: 0; transform: translateY(18px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }