:root {
  --stage-size: min(91vw, 690px);
  --cream-0: #fffdf6;
  --cream-1: #f8eedf;
  --cream-2: #e6d1b5;
  --cream-3: #b99770;
  --blow-time: 980ms;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #080609;
}

body {
  min-height: 100dvh;
  overscroll-behavior: none;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(83, 48, 43, 0.44) 0%, rgba(28, 20, 25, 0.38) 34%, transparent 67%),
    linear-gradient(155deg, #100d13 0%, #08070a 44%, #141016 100%);
}

.photo-bg {
  position: absolute;
  inset: -15px;
  z-index: 1;
  background-image: url("./assets/seohyun-bg.jpg");
  background-size: cover;
  background-position: 63% clamp(-580px, -45vh, -380px);
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  filter: brightness(.85) contrast(1.04) saturate(1.1) blur(4px);
  transform: scale(.98);
  transition: opacity 1.8s cubic-bezier(.16, .84, .25, 1), filter 1.8s ease, transform 1.8s ease, visibility 1.8s ease;
  pointer-events: none;
}

.photo-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 34%, transparent 0%, rgba(8, 6, 9, .35) 55%, rgba(8, 6, 9, .82) 100%),
    linear-gradient(to top, #080609 0%, rgba(8, 6, 9, .15) 45%, rgba(8, 6, 9, .45) 100%);
}

.scene.performance .photo-bg,
.scene.extinguished .photo-bg {
  opacity: .96;
  visibility: visible;
  filter: brightness(1.02) contrast(1.06) saturate(1.18) blur(0);
  transform: scale(1.02);
}

.room-glow {
  position: absolute;
  left: 50%;
  top: 42%;
  width: min(116vw, 990px);
  aspect-ratio: 1.08;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 205, 123, 0.23), rgba(237, 126, 58, 0.08) 34%, transparent 67%);
  filter: blur(22px);
  animation: room-breathe 2.8s ease-in-out infinite alternate;
  transition: opacity 1.35s ease;
}

.bokeh {
  position: absolute;
  inset: 0 0 35%;
  opacity: 0.72;
  filter: blur(1px);
}

.bokeh i {
  position: absolute;
  display: block;
  width: clamp(18px, 3.4vw, 42px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 219, 156, 0.62), rgba(233, 127, 64, 0.22) 42%, transparent 72%);
  filter: blur(6px);
  animation: bokeh-flicker 3.7s ease-in-out infinite alternate;
}

.bokeh i:nth-child(1) { left: 9%; top: 18%; scale: .72; opacity: .54; }
.bokeh i:nth-child(2) { left: 20%; top: 42%; scale: .38; opacity: .4; animation-delay: -.8s; }
.bokeh i:nth-child(3) { left: 31%; top: 12%; scale: .28; opacity: .36; animation-delay: -2.1s; }
.bokeh i:nth-child(4) { right: 30%; top: 17%; scale: .42; opacity: .43; animation-delay: -1.4s; }
.bokeh i:nth-child(5) { right: 17%; top: 36%; scale: .56; opacity: .5; animation-delay: -2.7s; }
.bokeh i:nth-child(6) { right: 8%; top: 13%; scale: .25; opacity: .34; animation-delay: -.3s; }
.bokeh i:nth-child(7) { left: 14%; top: 62%; scale: .24; opacity: .32; animation-delay: -1.8s; }

.table {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -4%;
  height: 39%;
  transform: perspective(550px) rotateX(61deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(96deg, transparent 0 18%, rgba(255,255,255,.026) 25%, transparent 36% 65%, rgba(255,255,255,.018) 74%, transparent 82%),
    radial-gradient(ellipse at 50% 12%, rgba(97, 66, 62, 0.4), transparent 49%),
    linear-gradient(#282027, #0f0c10 75%);
  box-shadow: inset 0 18px 34px rgba(0, 0, 0, 0.48);
}

.table::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background-image:
    repeating-linear-gradient(92deg, transparent 0 70px, rgba(255,255,255,.04) 72px, transparent 74px),
    repeating-linear-gradient(5deg, transparent 0 48px, rgba(0,0,0,.18) 50px, transparent 52px);
}

.blower {
  position: absolute;
  left: 50%;
  bottom: 35.5%;
  z-index: 3;
  display: block;
  width: min(84vw, 680px);
  max-height: 88dvh;
  object-fit: contain;
  object-position: center bottom;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.55));
  transform: translate(-50%, 6%) scale(.82);
  transform-origin: 50% 42%;
  will-change: opacity, transform;
}

.scene.performance .blower {
  animation: blower-visit 2.8s cubic-bezier(.19,.72,.27,1) both;
}

.fanfare {
  position: absolute;
  top: 53%;
  z-index: 14;
  width: clamp(92px, 18vw, 185px);
  aspect-ratio: 1.15;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 70%;
}

.fanfare-left {
  left: max(-28px, calc(50% - var(--stage-size) * .69));
  transform: translateX(-65%) rotate(-25deg) scale(.45);
}

.fanfare-right {
  right: max(-28px, calc(50% - var(--stage-size) * .69));
  transform: translateX(65%) rotate(25deg) scale(.45);
}

.scene.performance .fanfare-left {
  animation: fanfare-left 1.55s cubic-bezier(.18,.8,.27,1) 520ms both;
}

.scene.performance .fanfare-right {
  animation: fanfare-right 1.55s cubic-bezier(.18,.8,.27,1) 560ms both;
}

.party-cone {
  position: absolute;
  left: 25%;
  bottom: 5%;
  width: 64%;
  height: 56%;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  border-radius: 8px;
  background:
    repeating-linear-gradient(112deg, #f9c83b 0 12%, #f56388 13% 25%, #53c9da 26% 38%, #fff0ac 39% 49%);
  box-shadow:
    inset -8px 0 12px rgba(104,49,28,.24),
    0 7px 12px rgba(0,0,0,.28);
}

.party-cone::after {
  content: "";
  position: absolute;
  right: -7%;
  top: -6%;
  width: 20%;
  height: 112%;
  border-radius: 50%;
  background: linear-gradient(90deg, #d99d21, #fff0a3 48%, #a96713);
  box-shadow: 0 0 9px rgba(255,199,72,.55);
}

.fanfare-right .party-cone {
  left: 11%;
  transform: scaleX(-1);
}

.burst {
  position: absolute;
  left: 87%;
  top: 28%;
  width: 16%;
  height: 16%;
}

.fanfare-right .burst {
  left: 1%;
  transform: scaleX(-1);
}

.burst i {
  position: absolute;
  left: 0;
  top: 42%;
  width: clamp(28px, 5vw, 62px);
  height: 5px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, #fff5a8, #ff9c35 60%, transparent);
  box-shadow: 0 0 8px rgba(255,185,64,.7);
  transform-origin: 0 50%;
}

.burst i:nth-child(1) { rotate: -48deg; }
.burst i:nth-child(2) { rotate: -27deg; background: linear-gradient(90deg,#fff,#56d9e8 60%,transparent); }
.burst i:nth-child(3) { rotate: -8deg; }
.burst i:nth-child(4) { rotate: 14deg; background: linear-gradient(90deg,#fff,#f36391 60%,transparent); }
.burst i:nth-child(5) { rotate: 35deg; }
.burst i:nth-child(6) { rotate: 54deg; background: linear-gradient(90deg,#fff,#56d9e8 60%,transparent); }

.scene.performance .burst i {
  animation: burst-ray 820ms ease-out 770ms both;
}

.scene.performance .burst i:nth-child(2) { animation-delay: 800ms; }
.scene.performance .burst i:nth-child(3) { animation-delay: 740ms; }
.scene.performance .burst i:nth-child(4) { animation-delay: 830ms; }
.scene.performance .burst i:nth-child(5) { animation-delay: 760ms; }
.scene.performance .burst i:nth-child(6) { animation-delay: 805ms; }

.celebration-message {
  position: absolute;
  left: 50%;
  top: clamp(6%, 11vh, 14%);
  z-index: 22;
  width: min(96vw, 980px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 26px) rotate(-4deg) scale(.24);
  transform-origin: 50% 58%;
  will-change: opacity, transform, filter;
}

.celebration-message .message-layer {
  display: block;
  font-family: "Arial Black", "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-size: clamp(2.65rem, 9.8vw, 7.2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
  white-space: nowrap;
  user-select: none;
}

/* 1. 은은하고 화사한 네온 앰비언트 글로우 */
.celebration-message .message-glow {
  position: absolute;
  inset: 0;
  color: #ff3888;
  opacity: .85;
  filter: blur(22px);
  transform: scale(1.05);
}

/* 2. 입체감을 살려주는 깔끔한 3D 섀도우 & 베이스 */
.celebration-message .message-shadow {
  position: absolute;
  inset: 0;
  color: #2b0638;
  -webkit-text-stroke: clamp(7px, 1.5vw, 15px) #2b0638;
  text-shadow:
    0 3px 0 #b81f6c,
    0 6px 0 #7b1893,
    0 9px 0 #3d0a58,
    0 14px 22px rgba(0, 0, 0, .75);
}

/* 3. 글씨 바깥을 감싸는 선명하고 깨끗한 화이트 아웃라인 (속 파먹힘 없음) */
.celebration-message .message-stroke {
  position: absolute;
  inset: 0;
  color: #ffffff;
  -webkit-text-stroke: clamp(4.5px, 1.05vw, 10px) #ffffff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, .85));
}

/* 4. 최상단 그라데이션 텍스트 (완벽한 가독성과 화려한 색감) */
.celebration-message .message-front {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 0;
  background: linear-gradient(112deg, #ffffff 0%, #fff4b0 16%, #ffc83b 36%, #ff4687 62%, #a855f7 84%, #3de5ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 2px 4px rgba(255, 220, 100, .5));
}

.celebration-message .message-front::before {
  content: "✨";
  position: absolute;
  left: -2%;
  top: -24%;
  font-size: .38em;
  filter: drop-shadow(0 0 8px #ffd700);
  animation: message-sparkle-left 650ms ease-in-out infinite alternate;
}

.celebration-message .message-front::after {
  content: "✦";
  position: absolute;
  right: -1%;
  top: -38%;
  color: #fff9b8;
  font-size: .44em;
  text-shadow: 0 0 10px #ffffff, 0 0 24px #ffd334;
  animation: message-sparkle-right 520ms ease-in-out infinite alternate;
}

.scene.performance .celebration-message,
.scene.extinguished .celebration-message {
  visibility: visible;
  animation:
    celebration-pop 920ms cubic-bezier(.16, .84, .25, 1) 980ms both,
    celebration-idle 3.8s ease-in-out 1900ms infinite alternate;
}

.firework {
  position: absolute;
  z-index: 16;
  width: clamp(108px, 19vw, 210px);
  aspect-ratio: 1;
  opacity: 0;
  pointer-events: none;
  transform: scale(.4);
}

.firework-left { left: 5%; top: 16%; }
.firework-center { left: 50%; top: 6%; translate: -50% 0; scale: .75; }
.firework-right { right: 5%; top: 19%; }

.firework i {
  --ray-color: #ffd747;
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(34px, 6vw, 72px);
  height: clamp(3px, .48vw, 6px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, #fff 0 5%, var(--ray-color) 28% 68%, transparent 100%);
  box-shadow: 0 0 7px var(--ray-color), 0 0 15px color-mix(in srgb, var(--ray-color) 70%, transparent);
  transform-origin: 0 50%;
  rotate: var(--ray-angle);
}

.firework i:nth-child(1) { --ray-angle: 0deg; }
.firework i:nth-child(2) { --ray-angle: 30deg; --ray-color: #ff5c9c; }
.firework i:nth-child(3) { --ray-angle: 60deg; --ray-color: #5de9f1; }
.firework i:nth-child(4) { --ray-angle: 90deg; }
.firework i:nth-child(5) { --ray-angle: 120deg; --ray-color: #b976ff; }
.firework i:nth-child(6) { --ray-angle: 150deg; --ray-color: #ff6b8f; }
.firework i:nth-child(7) { --ray-angle: 180deg; }
.firework i:nth-child(8) { --ray-angle: 210deg; --ray-color: #5de9f1; }
.firework i:nth-child(9) { --ray-angle: 240deg; --ray-color: #ff5c9c; }
.firework i:nth-child(10) { --ray-angle: 270deg; }
.firework i:nth-child(11) { --ray-angle: 300deg; --ray-color: #b976ff; }
.firework i:nth-child(12) { --ray-angle: 330deg; --ray-color: #63e9d5; }

.scene.performance .firework-left {
  animation: firework-shell 940ms ease-out 1090ms both;
}

.scene.performance .firework-center {
  animation: firework-shell 900ms ease-out 1430ms both;
}

.scene.performance .firework-right {
  animation: firework-shell 980ms ease-out 1210ms both;
}

.scene.performance .firework i {
  animation: firework-ray 900ms cubic-bezier(.08,.62,.2,1) 1090ms both;
}

.scene.performance .firework-center i { animation-delay: 1430ms; }
.scene.performance .firework-right i { animation-delay: 1210ms; }

.scene.performance .firework i:nth-child(2n) { animation-duration: 1020ms; }
.scene.performance .firework i:nth-child(3n) { animation-duration: 820ms; }

.stage {
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 4;
  width: var(--stage-size);
  height: calc(var(--stage-size) * .89);
  translate: -50% -50%;
  transform-origin: 50% 72%;
}

.cake-shadow {
  position: absolute;
  left: 7%;
  bottom: 1%;
  width: 86%;
  height: 15%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .72);
  filter: blur(24px);
}

.plate {
  position: absolute;
  left: 2%;
  bottom: 7%;
  z-index: 1;
  width: 96%;
  height: 17%;
  border-radius: 50%;
  background:
    linear-gradient(to bottom, #f5f5f5 0%, #d7d8db 40%, #85868c 70%, #4d4e54 100%);
  box-shadow:
    inset 0 7px 10px rgba(255,255,255,.86),
    inset 0 -6px 11px rgba(36,37,42,.38),
    0 18px 24px rgba(0,0,0,.52);
}

.plate::after {
  content: "";
  position: absolute;
  inset: 14% 5% 28%;
  border-radius: 50%;
  border: 1px solid rgba(102, 103, 109, .5);
  background: radial-gradient(ellipse, rgba(255,255,255,.38), rgba(178,179,184,.16) 68%, rgba(67,68,73,.27));
  box-shadow: inset 0 3px 6px rgba(255,255,255,.6);
}

.plate i {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -5%;
  height: 38%;
  border-radius: 50%;
  background: rgba(17, 14, 17, .5);
  filter: blur(12px);
}

.cake {
  position: absolute;
  left: 8%;
  bottom: 13%;
  z-index: 2;
  width: 84%;
  height: 55%;
  filter: drop-shadow(0 14px 11px rgba(15, 10, 9, .38));
}

.cake-shell {
  position: absolute;
  left: 3%;
  right: 3%;
  top: 18%;
  bottom: 7%;
  z-index: 1;
  overflow: hidden;
  border-radius: 5% 5% 17% 17% / 9% 9% 23% 23%;
  border-inline: 1px solid rgba(126, 90, 56, .35);
  background:
    linear-gradient(91deg, rgba(126, 82, 45, .24), transparent 9%, rgba(255,255,255,.48) 29%, transparent 55%, rgba(111,71,40,.2) 100%),
    linear-gradient(to bottom, #fffaf0 0%, #f5e9d8 52%, #e0c6a5 100%);
  box-shadow:
    inset 18px 0 24px rgba(255,255,255,.34),
    inset -19px 0 26px rgba(116,75,39,.15),
    inset 0 -22px 28px rgba(126,83,45,.18);
}

.cake-shell::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: -9%;
  height: 23%;
  border-radius: 50%;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(138,96,55,.28));
}

.side-light {
  position: absolute;
  left: 12%;
  top: 9%;
  width: 12%;
  height: 74%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  filter: blur(10px);
  rotate: 3deg;
}

.cream-texture {
  position: absolute;
  inset: 0;
  opacity: .42;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(ellipse at 17% 23%, rgba(120,80,43,.15) 0 1px, transparent 1.6px),
    radial-gradient(ellipse at 68% 72%, rgba(255,255,255,.7) 0 1px, transparent 1.8px),
    repeating-linear-gradient(94deg, transparent 0 22px, rgba(133,92,55,.025) 23px 24px);
  background-size: 37px 31px, 43px 39px, auto;
}

.top-surface {
  position: absolute;
  left: 3%;
  top: 0;
  z-index: 2;
  width: 94%;
  height: 35%;
  overflow: hidden;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.63);
  background:
    radial-gradient(ellipse at 39% 19%, rgba(255,255,255,.82), transparent 37%),
    radial-gradient(ellipse at 50% 48%, #fffdf7 0%, #f8ebd8 58%, #cfad82 100%);
  box-shadow:
    inset 0 -18px 22px rgba(134,89,49,.2),
    inset 0 8px 12px rgba(255,255,255,.72),
    0 7px 10px rgba(87,56,29,.24);
}

.surface-texture {
  position: absolute;
  inset: 7% 5% 8%;
  border-radius: 50%;
  opacity: .6;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0 48%, rgba(143,98,58,.09) 49%, transparent 51%),
    repeating-radial-gradient(ellipse at 46% 44%, transparent 0 17px, rgba(148,100,58,.035) 18px 19px);
  filter: blur(.15px);
}

.top-front-lip {
  position: absolute;
  left: 3.5%;
  top: 17%;
  z-index: 6;
  width: 93%;
  height: 19%;
  overflow: hidden;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  border-bottom: 1px solid rgba(150,105,64,.26);
  background: linear-gradient(to bottom, rgba(255,249,238,.9), #f2dfc5 74%, rgba(194,156,111,.75));
  clip-path: inset(47% 0 0 0 round 0 0 50% 50%);
  box-shadow: 0 8px 9px rgba(103,68,36,.16);
}

.piping {
  position: absolute;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.piping-back {
  left: 9%;
  top: 4%;
  z-index: 3;
  width: 82%;
  height: 16%;
  align-items: center;
  transform: perspective(440px) rotateX(56deg);
}

.piping-front {
  left: 7%;
  top: 24%;
  z-index: 8;
  width: 86%;
  height: 15%;
  align-items: center;
  transform: perspective(440px) rotateX(52deg);
}

.piping i,
.bottom-piping i {
  position: relative;
  display: block;
  flex: 0 0 9.7%;
  aspect-ratio: 1.03;
  border-radius: 52% 48% 38% 42% / 48% 51% 49% 52%;
  clip-path: polygon(50% 0, 64% 13%, 82% 25%, 96% 49%, 100% 78%, 87% 100%, 12% 100%, 0 77%, 5% 48%, 22% 24%, 38% 12%);
  background:
    radial-gradient(ellipse at 47% 18%, rgba(255,255,255,.98) 0 8%, transparent 29%),
    linear-gradient(90deg, #c9a376 0%, #f6e7d1 12%, #fffef8 23%, #d7b58c 35%, #fffdf6 48%, #d1ad82 61%, #fff8eb 76%, #c49c6d 100%);
  box-shadow:
    inset 0 3px 5px rgba(255,255,255,.78),
    inset 0 -6px 7px rgba(113,72,38,.24),
    0 6px 6px rgba(72,43,24,.22);
}

.piping i::before,
.bottom-piping i::before {
  content: "";
  position: absolute;
  left: 46%;
  top: 4%;
  width: 9%;
  height: 64%;
  border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.9), rgba(150,103,61,.18));
  filter: blur(.4px);
}

.piping i::after,
.bottom-piping i::after {
  content: "";
  position: absolute;
  left: 17%;
  right: 17%;
  bottom: 3%;
  height: 18%;
  border-radius: 50%;
  background: rgba(119,75,39,.18);
  filter: blur(2px);
}

.piping i:nth-child(2n) { scale: .92 1.06; rotate: 3deg; }
.piping i:nth-child(3n) { scale: 1.05 .94; rotate: -4deg; }
.piping i:nth-child(5n) { translate: 0 3px; rotate: 6deg; }
.piping i:nth-child(7n) { translate: -2px -1px; scale: .95 1.04; }

.bottom-piping {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 2%;
  z-index: 9;
  display: flex;
  justify-content: space-between;
  align-items: end;
  height: 18%;
}

.bottom-piping i {
  flex-basis: 8.4%;
  aspect-ratio: 1.07;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.78),
    inset 0 -5px 6px rgba(125,82,45,.24),
    0 7px 7px rgba(72,44,25,.24);
}

.bottom-piping i:nth-child(2n) { scale: 1 .92; rotate: -4deg; }
.bottom-piping i:nth-child(3n) { scale: .94 1.07; rotate: 5deg; }

.candles {
  position: absolute;
  left: 50%;
  top: -54%;
  z-index: 5;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2%;
  width: 31%;
  height: 77%;
  translate: -50% 0;
  filter: drop-shadow(5px 9px 5px rgba(57,29,22,.3));
}

.candle {
  position: relative;
  flex: 1 1 50%;
  height: 100%;
  --wax-a: #ff8cad;
  --wax-b: #c7396c;
  --wax-hi: #ffe0e9;
  --wax-side: #8e204c;
  --wick-x: 52%;
}

.candle:nth-child(2) {
  --wax-a: #72d6e8;
  --wax-b: #168aae;
  --wax-hi: #dffbff;
  --wax-side: #075f83;
}

.number-svg {
  position: absolute;
  left: 0;
  bottom: 5%;
  width: 100%;
  height: 81%;
  overflow: visible;
}

.digit-side,
.digit-front,
.digit-highlight {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.digit-side {
  stroke: var(--wax-side);
  stroke-width: 31;
  transform: translate(5px, 6px);
  opacity: .88;
}

.digit-front {
  stroke: url(#waxGradient);
  stroke-width: 27;
  filter: url(#waxFinish);
}

.digit-highlight {
  stroke: var(--wax-hi);
  stroke-width: 4;
  opacity: .64;
  transform: translate(-5px, -2px);
}

.peg {
  position: absolute;
  left: var(--wick-x);
  bottom: -2%;
  z-index: -1;
  width: 12%;
  height: 18%;
  translate: -50% 0;
  border-radius: 2px 2px 45% 45%;
  background: linear-gradient(90deg, var(--wax-side), var(--wax-a) 48%, var(--wax-hi) 72%, var(--wax-b));
  box-shadow: 3px 4px 4px rgba(55,27,19,.24);
}

.insertion-shadow {
  position: absolute;
  left: var(--wick-x);
  bottom: -5%;
  width: 29%;
  height: 7%;
  translate: -50% 0;
  border-radius: 50%;
  background: rgba(102,62,34,.38);
  filter: blur(2px);
}

.wick {
  position: absolute;
  left: var(--wick-x);
  top: 7%;
  z-index: 4;
  width: max(2px, calc(var(--stage-size) * .0044));
  height: 12%;
  translate: -50% 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #302019, #b18258 49%, #20140f);
  transform: rotate(2deg);
  transform-origin: 50% 100%;
}

.flame-unit {
  position: absolute;
  left: var(--wick-x);
  top: -21%;
  z-index: 8;
  width: calc(var(--stage-size) * .078);
  height: calc(var(--stage-size) * .14);
  translate: -50% 0;
  transform-origin: 50% 96%;
}

.halo {
  position: absolute;
  inset: 6% -38% -18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,223,137,.58), rgba(255,125,38,.18) 43%, transparent 72%);
  filter: blur(10px);
  animation: halo-live 1.25s ease-in-out infinite alternate;
}

.flame {
  position: absolute;
  left: 50%;
  bottom: 3%;
  width: 37%;
  height: 73%;
  translate: -50% 0;
  border-radius: 48% 52% 48% 52% / 76% 79% 21% 24%;
  background:
    radial-gradient(ellipse at 50% 72%, #fff 0 12%, #fff8b0 14% 28%, transparent 30%),
    linear-gradient(to top, #ff6d16 0 17%, #ffb927 43%, #ffe976 69%, #fffbe5 100%);
  box-shadow:
    0 0 7px 2px rgba(255,244,185,.92),
    0 0 21px 7px rgba(255,132,36,.56),
    0 0 46px 18px rgba(255,95,24,.2);
  transform-origin: 50% 100%;
  animation: flame-live-a .93s cubic-bezier(.44,.06,.55,.96) infinite alternate;
}

.candle:nth-child(2) .flame {
  animation-name: flame-live-b;
  animation-duration: 1.08s;
  animation-delay: -.41s;
}

.flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5%;
  width: 26%;
  height: 36%;
  translate: -50% 0;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(#fff, #e7fbff 56%, #6bb7e3);
  filter: blur(.5px);
}

.smoke {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 12%;
  height: 47%;
  translate: -50% 0;
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(to top, rgba(224,226,229,.75), rgba(157,162,172,.36), transparent);
  filter: blur(3px);
  transform-origin: 50% 100%;
}

.smoke-b {
  left: 56%;
  height: 57%;
  filter: blur(5px);
}

.sparks {
  position: absolute;
  inset: 24% 6% 5%;
}

.sparks i {
  position: absolute;
  left: 50%;
  bottom: 24%;
  width: 5px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: #fff3a3;
  box-shadow: 0 0 7px #ff8b2c;
}

.sparks i:nth-child(2) { scale: .65; }
.sparks i:nth-child(3) { scale: .8; }

.scene.blowing .stage {
  animation: cake-breath var(--blow-time) ease-out both;
}

.scene.blowing .flame-unit {
  animation: unit-blow var(--blow-time) cubic-bezier(.2,.54,.4,1) both;
}

.scene.blowing .candle:nth-child(2) .flame-unit {
  animation-name: unit-blow-b;
  animation-delay: 22ms;
}

.scene.blowing .flame {
  animation: flame-out var(--blow-time) cubic-bezier(.18,.6,.31,1) both;
}

.scene.blowing .halo {
  animation: halo-out var(--blow-time) ease-out both;
}

.scene.blowing .sparks i:nth-child(1) { animation: spark-one 560ms ease-out 380ms both; }
.scene.blowing .sparks i:nth-child(2) { animation: spark-two 620ms ease-out 420ms both; }
.scene.blowing .sparks i:nth-child(3) { animation: spark-three 540ms ease-out 460ms both; }

.scene.extinguished .flame,
.scene.extinguished .halo {
  opacity: 0;
  animation: none;
}

.scene.extinguished .wick {
  background: linear-gradient(90deg, #070707, #3b332d 51%, #000);
}

.scene.extinguished .room-glow {
  opacity: .19;
  animation: none;
}

.scene.extinguished .bokeh {
  opacity: .37;
  transition: opacity 1.1s ease;
}

.scene.extinguished .smoke-a { animation: smoke-a 4.4s ease-out 40ms both; }
.scene.extinguished .smoke-b { animation: smoke-b 4.9s ease-out 170ms both; }

@keyframes flame-live-a {
  0% { transform: skewX(-5deg) rotate(-2deg) scale(.95,1.04); }
  31% { transform: skewX(3deg) rotate(1deg) scale(1.02,.97); }
  67% { transform: skewX(-2deg) rotate(-1deg) scale(.96,1.09); }
  100% { transform: skewX(6deg) rotate(2deg) scale(1.04,.94); }
}

@keyframes flame-live-b {
  0% { transform: skewX(4deg) rotate(2deg) scale(1.03,.96); }
  36% { transform: skewX(-5deg) rotate(-2deg) scale(.95,1.07); }
  72% { transform: skewX(2deg) rotate(1deg) scale(1.04,.99); }
  100% { transform: skewX(-3deg) rotate(-1deg) scale(.97,1.08); }
}

@keyframes halo-live {
  from { opacity: .62; transform: scale(.88); }
  to { opacity: .98; transform: scale(1.12); }
}

@keyframes room-breathe {
  from { opacity: .78; transform: scale(.97); }
  to { opacity: 1; transform: scale(1.03); }
}

@keyframes bokeh-flicker {
  from { filter: blur(7px); transform: scale(.88); }
  to { filter: blur(4px); transform: scale(1.12); }
}

@keyframes blower-visit {
  0% { opacity: 0; transform: translate(-50%, 6%) scale(.82); }
  13% { opacity: 0; }
  29% { opacity: .95; transform: translate(-50%, 1%) scale(.96); }
  43% { opacity: 1; transform: translate(-50%, -2%) scale(1.04); }
  62% { opacity: 1; transform: translate(-50%, -2.5%) scale(1.055); }
  79% { opacity: .72; transform: translate(-50%, 0%) scale(.98); }
  100% { opacity: 0; transform: translate(-50%, 6%) scale(.82); }
}

@keyframes fanfare-left {
  0% { opacity: 0; transform: translateX(-65%) rotate(-25deg) scale(.45); }
  25% { opacity: 1; transform: translateX(0) rotate(-9deg) scale(1.08); }
  42% { transform: translateX(0) rotate(-13deg) scale(.98); }
  72% { opacity: 1; transform: translateX(0) rotate(-10deg) scale(1); }
  100% { opacity: 0; transform: translateX(-36%) rotate(-20deg) scale(.7); }
}

@keyframes fanfare-right {
  0% { opacity: 0; transform: translateX(65%) rotate(25deg) scale(.45); }
  25% { opacity: 1; transform: translateX(0) rotate(9deg) scale(1.08); }
  42% { transform: translateX(0) rotate(13deg) scale(.98); }
  72% { opacity: 1; transform: translateX(0) rotate(10deg) scale(1); }
  100% { opacity: 0; transform: translateX(36%) rotate(20deg) scale(.7); }
}

@keyframes burst-ray {
  0% { opacity: 0; transform: translateX(0) scaleX(.12); }
  22% { opacity: 1; }
  72% { opacity: .85; transform: translateX(12px) scaleX(1); }
  100% { opacity: 0; transform: translateX(28px) scaleX(.45); }
}

@keyframes celebration-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 30px) rotate(-6deg) scale(.2);
    filter: blur(8px);
  }
  35% {
    opacity: 1;
    transform: translate(-50%, -10px) rotate(2.8deg) scale(1.14);
    filter: blur(0);
  }
  58% {
    transform: translate(-50%, 3px) rotate(-1.5deg) scale(.96);
  }
  78% {
    transform: translate(-50%, -2px) rotate(.8deg) scale(1.03);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, 0) rotate(-.4deg) scale(1);
    filter: blur(0);
  }
}

@keyframes celebration-idle {
  0% {
    transform: translate(-50%, 0) rotate(-.4deg) scale(1);
  }
  50% {
    transform: translate(-50%, -6px) rotate(.5deg) scale(1.018);
  }
  100% {
    transform: translate(-50%, 2px) rotate(-.3deg) scale(.995);
  }
}

@keyframes message-sparkle-left {
  0% { opacity: .35; transform: rotate(-16deg) scale(.75); }
  100% { opacity: 1; transform: rotate(16deg) scale(1.22); }
}

@keyframes message-sparkle-right {
  0% { opacity: .4; transform: rotate(16deg) scale(.78); }
  100% { opacity: 1; transform: rotate(-16deg) scale(1.28); }
}

@keyframes firework-shell {
  0% { opacity: 0; transform: scale(.22) rotate(-7deg); filter: blur(3px); }
  9% { opacity: 1; }
  68% { opacity: 1; transform: scale(1) rotate(3deg); filter: blur(0); }
  100% { opacity: 0; transform: scale(1.14) rotate(5deg); filter: blur(1px); }
}

@keyframes firework-ray {
  0% { opacity: 0; transform: translateX(3px) scaleX(.08); }
  13% { opacity: 1; }
  62% { opacity: .96; transform: translateX(34px) scaleX(1); }
  100% { opacity: 0; transform: translateX(62px) scaleX(.24); }
}

@keyframes unit-blow {
  0% { transform: rotate(0) translateX(0); }
  14% { transform: rotate(-17deg) translateX(-3%); }
  28% { transform: rotate(23deg) translateX(4%); }
  43% { transform: rotate(-28deg) translateX(-7%); }
  58% { transform: rotate(39deg) translateX(11%); }
  74% { transform: rotate(54deg) translateX(17%); }
  100% { transform: rotate(68deg) translateX(23%); }
}

@keyframes unit-blow-b {
  0% { transform: rotate(0) translateX(0); }
  15% { transform: rotate(19deg) translateX(3%); }
  31% { transform: rotate(-22deg) translateX(-5%); }
  47% { transform: rotate(31deg) translateX(7%); }
  63% { transform: rotate(45deg) translateX(12%); }
  79% { transform: rotate(58deg) translateX(18%); }
  100% { transform: rotate(70deg) translateX(24%); }
}

@keyframes flame-out {
  0% { opacity: 1; transform: scale(1); }
  13% { transform: skewX(-17deg) scale(.84,1.16); }
  27% { transform: skewX(20deg) scale(.74,1.32); }
  43% { transform: skewX(-21deg) scale(.9,1.04); }
  60% { opacity: .94; transform: skewX(31deg) scale(.63,1.5); }
  75% { opacity: .7; transform: skewX(38deg) scale(.48,.88); }
  89% { opacity: .27; transform: skewX(44deg) scale(.22,.39); }
  100% { opacity: 0; transform: skewX(48deg) scale(.04,.02); }
}

@keyframes halo-out {
  0% { opacity: .95; transform: scale(1); }
  34% { opacity: .74; transform: scale(1.22); }
  72% { opacity: .2; transform: scale(.77); }
  100% { opacity: 0; transform: scale(.25); }
}

@keyframes cake-breath {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.016); }
}

@keyframes spark-one {
  0% { opacity: 0; transform: translate(0,0) scale(.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(36px,-28px) scale(.05); }
}

@keyframes spark-two {
  0% { opacity: 0; transform: translate(0,0) scale(.3); }
  17% { opacity: .95; }
  100% { opacity: 0; transform: translate(49px,3px) scale(.05); }
}

@keyframes spark-three {
  0% { opacity: 0; transform: translate(0,0) scale(.3); }
  19% { opacity: .9; }
  100% { opacity: 0; transform: translate(29px,24px) scale(.05); }
}

@keyframes smoke-a {
  0% { opacity: 0; transform: translate(0,0) scale(.25,.08) rotate(0); }
  10% { opacity: .68; }
  35% { opacity: .46; transform: translate(-18px,-47px) scale(.72,1.18) rotate(-13deg); }
  67% { opacity: .24; transform: translate(9px,-101px) scale(1.06,1.72) rotate(16deg); }
  100% { opacity: 0; transform: translate(-23px,-171px) scale(1.5,2.22) rotate(-19deg); }
}

@keyframes smoke-b {
  0% { opacity: 0; transform: translate(0,0) scale(.22,.08) rotate(0); }
  14% { opacity: .39; }
  48% { opacity: .26; transform: translate(13px,-72px) scale(.87,1.39) rotate(18deg); }
  77% { opacity: .13; transform: translate(-18px,-131px) scale(1.18,1.78) rotate(-17deg); }
  100% { opacity: 0; transform: translate(8px,-195px) scale(1.56,2.18) rotate(21deg); }
}

@media (max-aspect-ratio: 3 / 4) {
  :root { --stage-size: min(96vw, 610px); }
  .stage { top: 54%; }
  .blower {
    bottom: 37%;
    width: min(108vw, 640px);
  }
  .fanfare { top: 59%; }
  .celebration-message { top: 10%; }
  .firework-left { left: -5%; top: 22%; }
  .firework-right { right: -5%; top: 24%; }
  .firework-center { top: 4%; }
  .bokeh i:nth-child(2),
  .bokeh i:nth-child(5) { opacity: .28; }
}

@media (min-aspect-ratio: 16 / 10) and (max-height: 680px) {
  :root { --stage-size: min(71vw, calc(100dvh * 1.38), 650px); }
  .stage { top: 54%; }
}

@media (max-height: 500px) {
  :root { --stage-size: min(70vw, calc(100dvh * 1.35)); }
  .stage { top: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .flame,
  .halo,
  .room-glow,
  .bokeh i {
    animation-duration: 2.8s;
  }

  .scene.performance .celebration-message {
    animation-timing-function: ease;
  }
}