:root{
  --night-1:#1a1030;
  --night-2:#2d1b4e;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Trebuchet MS",system-ui,sans-serif;
  color:#fff;
  background:radial-gradient(120% 90% at 50% 10%,var(--night-2),var(--night-1) 70%);
  overflow:hidden;
}
.scene{
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.2rem;position:relative;
}
h1{
  font-size:clamp(1.6rem,5vw,3rem);
  letter-spacing:.04em;
  text-shadow:0 0 18px rgba(255,180,120,.45);
  animation:sway 6s ease-in-out infinite;
}
.tagline{opacity:.85;font-size:1.05rem;animation:jiggle 5s ease-in-out infinite}

/* ---- the candles sit on the cake ---- */
.cake-top{display:flex;align-items:flex-end;gap:2.4rem;height:240px}
.cake{
  width:min(420px,80vw);height:74px;border-radius:14px 14px 20px 20px;
  background:repeating-linear-gradient(90deg,#ffd9a0 0 18px,#ffcf8c 18px 36px);
  box-shadow:inset 0 -10px 0 rgba(0,0,0,.12),0 14px 30px rgba(0,0,0,.4);
  position:relative;margin-top:-6px;
  display:flex;align-items:center;justify-content:center;
}
.cake::before{
  content:"";position:absolute;inset:0 0 auto 0;height:16px;border-radius:14px 14px 40% 40%;
  background:linear-gradient(#fff6,transparent);
}
/* ---- studio name piped in icing ---- */
.cake-name{
  font-family:"Brush Script MT","Segoe Script",cursive;
  font-size:clamp(1.4rem,4.2vw,2.3rem);font-weight:700;
  color:#fff;letter-spacing:.03em;position:relative;z-index:1;
  text-shadow:0 2px 0 #e86fa0,0 0 10px rgba(255,120,170,.7),1px 1px 2px rgba(0,0,0,.25);
  animation:namepop 4.5s ease-in-out infinite;
}

/* ---- candle body ---- */
.candle{position:relative;display:flex;flex-direction:column;align-items:center;
  animation:hop 2.6s cubic-bezier(.3,.7,.4,1) infinite;transform-origin:bottom center;}
.candle--tall  .stick{height:150px}
.candle--mid   .stick{height:120px}
.candle--short .stick{height:95px}
.candle:nth-child(1){animation-delay:-.2s}
.candle:nth-child(2){animation-delay:-1.1s}
.candle:nth-child(3){animation-delay:-1.9s}

.stick{
  width:46px;border-radius:12px 12px 6px 6px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--wax) 70%,#000 8%),var(--wax) 40%,#fff6 95%);
  box-shadow:inset -6px 0 10px rgba(0,0,0,.25),inset 6px 0 8px rgba(255,255,255,.35);
  position:relative;
}
.stick::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:repeating-linear-gradient(-30deg,transparent 0 14px,rgba(255,255,255,.18) 14px 20px);
  mix-blend-mode:overlay;
}

/* ---- googly face ---- */
.face{position:absolute;top:26%;left:0;right:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:6px 8px;z-index:2}
.eye{width:13px;height:13px;border-radius:50%;background:#fff;position:relative;
  box-shadow:0 1px 2px rgba(0,0,0,.3)}
.eye::after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:#222;top:4px;left:4px;animation:googly 2.2s ease-in-out infinite}
.candle:nth-child(2) .eye::after{animation-delay:-.7s}
.candle:nth-child(3) .eye::after{animation-delay:-1.4s}
/* cross-eyed candle: pupils pull to the centre */
.face--cross .eye:first-child::after{animation:none;left:7px}
.face--cross .eye:nth-child(2)::after{animation:none;left:1px}

.mouth{width:16px;height:8px;border:2px solid #3a2a1a;border-top:none;
  border-radius:0 0 16px 16px;flex-basis:100%;margin:2px auto 0}
.mouth--o{width:10px;height:10px;border-radius:50%;border:2px solid #3a2a1a;
  animation:gasp 2.6s ease-in-out infinite}
/* cheeky tongue */
.tongue{width:9px;height:12px;border-radius:0 0 6px 6px;background:#ff6b8b;
  position:absolute;top:calc(26% + 20px);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);
  transform-origin:top center;animation:blep 3.4s ease-in-out infinite}
.candle:nth-child(3) .tongue{animation-delay:-1.7s}

/* ---- wax drip ---- */
.drip{position:absolute;top:8px;right:6px;width:8px;height:20px;border-radius:0 0 8px 8px;
  background:var(--drip);box-shadow:0 0 6px var(--drip);animation:ooze 4s ease-in-out infinite}

/* ---- flame ---- */
.flame{
  position:relative;width:26px;height:46px;margin-bottom:6px;
  background:linear-gradient(#fff 2%,#ffd84a 25%,#ff9b2f 60%,#ff5a2f 100%);
  border-radius:50% 50% 50% 50% / 62% 62% 40% 40%;
  transform:rotate(-45deg);
  box-shadow:0 0 22px 6px rgba(255,150,60,.55);
  animation:flicker .11s infinite alternate, puff 3.2s ease-in-out infinite;
  transform-origin:bottom center;
}
.candle:nth-child(2) .flame{animation-delay:0s,-1s}
.candle:nth-child(3) .flame{animation-delay:0s,-2.1s}
.flame .glow{
  position:absolute;inset:auto 0 2px 0;margin:auto;width:12px;height:18px;
  background:#5ab9ff;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  filter:blur(1px);opacity:.9;
}

/* ---- motion ---- */
@keyframes flicker{
  from{transform:rotate(-45deg) scale(1,1)}
  to{transform:rotate(-43deg) scale(1.04,.96)}
}
/* every cycle the flame briefly whooshes up like a surprised gasp */
@keyframes puff{
  0%,82%,100%{height:46px;filter:hue-rotate(0) brightness(1)}
  88%{height:66px;filter:hue-rotate(-10deg) brightness(1.3)}
  92%{height:40px;filter:brightness(.95)}
}
/* candles bounce up with a little squash-and-stretch */
@keyframes hop{
  0%,70%,100%{transform:translateY(0) scaleY(1)}
  78%{transform:translateY(0) scaleY(.88) scaleX(1.06)}
  86%{transform:translateY(-26px) scaleY(1.08) scaleX(.96)}
  94%{transform:translateY(0) scaleY(.94) scaleX(1.03)}
}
/* googly pupils roll around in a little circle */
@keyframes googly{
  0%{transform:translate(0,0)}   20%{transform:translate(4px,-2px)}
  40%{transform:translate(3px,3px)} 60%{transform:translate(-3px,2px)}
  80%{transform:translate(-3px,-3px)} 100%{transform:translate(0,0)}
}
@keyframes blep{0%,72%,100%{transform:scaleY(.15)}80%,92%{transform:scaleY(1)}}
@keyframes gasp{0%,60%,100%{transform:scale(1)}80%{transform:scale(1.5)}}
@keyframes ooze{0%,100%{height:20px}50%{height:26px}}
@keyframes namepop{0%,100%{transform:scale(1) rotate(-1deg)}50%{transform:scale(1.06) rotate(1deg)}}
@keyframes jiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@keyframes sway{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}