/* ==========================================================================
   finale.css — §4.11 wish / cake, §4.12 replay
   ========================================================================== */

.wish {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(64px, 12vh, 104px) var(--sp-3) clamp(72px, 14vh, 120px);
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--burgundy-deep) 0%,
    var(--burgundy) 46%,
    var(--wine) 100%);
}

/* --------------------------------------------------------------------------
   Star field
   -------------------------------------------------------------------------- */
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--gold-light);
  opacity: 0;
  will-change: transform, opacity;
  animation: star-twinkle var(--ease-soft) infinite;
}
@keyframes star-twinkle {
  0%, 100% { opacity: .08; transform: scale(.7); }
  50%      { opacity: .9;  transform: scale(1.5); }
}

.wish__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
  max-width: 560px;
}

/* --------------------------------------------------------------------------
   Cake
   Flames' first paint state is unlit — they only appear once .is-lit lands,
   which happens on IntersectionObserver arrival, never on load. (§4.11)
   -------------------------------------------------------------------------- */
.cake {
  width: min(300px, 74vw);
  margin: 0 auto var(--sp-4);
}
.cake__svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(48, 13, 25, .55));
}

.flame {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
}

.cake.is-lit .flame {
  animation: flame-up 500ms var(--ease-bounce) forwards,
             flicker 220ms var(--ease-soft) 500ms infinite alternate;
}
.cake.is-lit .candle[data-i="0"] .flame { animation-delay: 0ms,   500ms; }
.cake.is-lit .candle[data-i="1"] .flame { animation-delay: 180ms, 680ms; }
.cake.is-lit .candle[data-i="2"] .flame { animation-delay: 360ms, 860ms; }

@keyframes flame-up {
  from { opacity: 0; transform: scaleY(0)   scaleX(.6); }
  to   { opacity: 1; transform: scaleY(1)   scaleX(1); }
}
@keyframes flicker {
  from { transform: scaleY(1)    scaleX(1)    translateX(0); }
  to   { transform: scaleY(1.16) scaleX(.92)  translateX(.6px); }
}

/* blow-out — quick stagger, right to left (§4.11) */
.cake.is-blown .flame {
  animation: flame-out 340ms var(--ease-soft) forwards;
}
.cake.is-blown .candle[data-i="2"] .flame { animation-delay: 0ms; }
.cake.is-blown .candle[data-i="1"] .flame { animation-delay: 110ms; }
.cake.is-blown .candle[data-i="0"] .flame { animation-delay: 220ms; }

@keyframes flame-out {
  0%   { opacity: 1;  transform: scaleY(1)  scaleX(1)   translateX(0); }
  55%  { opacity: .8; transform: scaleY(.5) scaleX(1.5) translateX(5px); }
  100% { opacity: 0;  transform: scaleY(0)  scaleX(2)   translateX(12px); }
}

/* --------------------------------------------------------------------------
   The button, and its disappearance
   -------------------------------------------------------------------------- */
#wish-btn {
  transition:
    opacity   var(--dur-medium) var(--ease-soft),
    transform var(--dur-medium) var(--ease-premium);
}
#wish-btn.is-spent {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.94);
}

/* --------------------------------------------------------------------------
   Closing message — line by line, staggered
   -------------------------------------------------------------------------- */
.wish__message {
  margin-top: var(--sp-3);
  min-height: 190px;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
}
.wish__message p {
  font-family: var(--font-display);
  font-size: clamp(21px, 5.6vw, 30px);
  line-height: 1.34;
  color: var(--gold-light);
  margin: 0;
  opacity: 0;
  transform: translateY(18px);
}
.wish__message.is-on p {
  animation: line-in 1.2s var(--ease-premium) forwards;
  animation-delay: calc(var(--i) * 700ms);
}
@keyframes line-in {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Replay — appears several seconds later, not immediately (§4.11)
   -------------------------------------------------------------------------- */
#replay-btn {
  margin-top: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity    var(--dur-slow) var(--ease-soft),
    transform  var(--dur-slow) var(--ease-premium),
    visibility 0s linear var(--dur-slow);
}
#replay-btn.is-ready {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity    var(--dur-slow) var(--ease-soft),
    transform  var(--dur-slow) var(--ease-premium),
    visibility 0s linear 0s;
}