/* ============================================================
   Bao.buzz — Fun animations (v2)
   - Bao rain on Reserve click
   - Fireworks / confetti on form success
   ============================================================ */

/* ---------- BAO RAIN ---------- */
.bao-rain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 90;
  overflow: hidden;
}
.bao-stack {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 0;          /* used as a logical baseline; actual buns are positioned by JS */
  pointer-events: none;
  z-index: 89;
}
.bao-rain .bun,
.bao-stack .bun {
  position: absolute;
  width: 64px; height: 60px;
  filter: drop-shadow(0 6px 18px rgba(20, 20, 28, 0.18));
  will-change: transform;
}
.bao-rain .bun img,
.bao-stack .bun img { width: 100%; height: 100%; display: block; }

/* Falling bun: dropped into DOM with --x (px from left), --rot (deg), --delay (ms), --dur (ms), --end (px from bottom) */
.bao-rain .bun {
  left: var(--x);
  top: -90px;
  transform: rotate(var(--rot));
  animation:
    baoFall var(--dur) cubic-bezier(0.34, 0.72, 0.42, 1) var(--delay) forwards,
    baoSpin var(--dur) linear var(--delay) forwards;
}
@keyframes baoFall {
  0% { transform: translateY(0) rotate(var(--rot)); }
  85% { transform: translateY(calc(100vh - var(--end) - 60px)) rotate(calc(var(--rot) + var(--spin)));
        animation-timing-function: cubic-bezier(0.5, 0, 0.6, 1); }
  92% { transform: translateY(calc(100vh - var(--end) - 30px)) rotate(calc(var(--rot) + var(--spin))) scaleY(0.85) scaleX(1.1); }
  100% { transform: translateY(calc(100vh - var(--end) - 60px)) rotate(calc(var(--rot) + var(--spin))) scaleY(1) scaleX(1); }
}
@keyframes baoSpin { 0% {} 100% {} } /* spin is folded into baoFall */

/* Persistent stack at bottom */
.bao-stack .bun {
  bottom: var(--y, 0);
  left: var(--x, 0);
  transform: rotate(var(--rot, 0deg));
  animation: baoSettle 600ms var(--ease-out) both;
}
@keyframes baoSettle {
  0% { transform: rotate(var(--rot, 0deg)) translateY(-30px) scaleY(0.85) scaleX(1.1); }
  60% { transform: rotate(var(--rot, 0deg)) translateY(0) scaleY(1.05) scaleX(0.95); }
  100% { transform: rotate(var(--rot, 0deg)) translateY(0) scaleY(1) scaleX(1); }
}

/* Reduced motion: no rain — show a quick toast instead */
@media (prefers-reduced-motion: reduce) {
  .bao-rain, .bao-stack { display: none; }
}

/* ---------- FIREWORKS / CONFETTI ---------- */
.fireworks {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 95;
  display: none;
}
.fireworks.is-show { display: block; }
.fireworks canvas {
  width: 100%; height: 100%; display: block;
}

/* Sparkle ring around the success checkmark */
.success-screen.is-show .sparkle-ring {
  position: absolute; inset: 0;
  pointer-events: none;
  display: block;
}
.success-screen .sparkle-ring { display: none; }
.sparkle-ring i {
  position: absolute;
  left: 50%; top: 130px;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform-origin: 0 0;
  opacity: 0;
  animation: sparkleBurst 1500ms var(--ease-out) forwards;
}
.sparkle-ring i:nth-child(1) { background: var(--pastel-blue); --ang: 0deg; --d: 110px; --del: 0ms; }
.sparkle-ring i:nth-child(2) { background: var(--pastel-yellow); --ang: 36deg; --d: 130px; --del: 60ms; }
.sparkle-ring i:nth-child(3) { background: var(--pastel-orange); --ang: 72deg; --d: 100px; --del: 120ms; }
.sparkle-ring i:nth-child(4) { background: var(--pastel-blue); --ang: 108deg; --d: 140px; --del: 180ms; }
.sparkle-ring i:nth-child(5) { background: var(--pastel-yellow); --ang: 144deg; --d: 110px; --del: 240ms; }
.sparkle-ring i:nth-child(6) { background: var(--pastel-orange); --ang: 180deg; --d: 130px; --del: 300ms; }
.sparkle-ring i:nth-child(7) { background: var(--pastel-blue); --ang: 216deg; --d: 100px; --del: 360ms; }
.sparkle-ring i:nth-child(8) { background: var(--pastel-yellow); --ang: 252deg; --d: 140px; --del: 420ms; }
.sparkle-ring i:nth-child(9) { background: var(--pastel-orange); --ang: 288deg; --d: 110px; --del: 480ms; }
.sparkle-ring i:nth-child(10){ background: var(--pastel-blue); --ang: 324deg; --d: 130px; --del: 540ms; }

@keyframes sparkleBurst {
  0% { opacity: 1; transform: rotate(var(--ang)) translateX(0) scale(0.4); animation-delay: var(--del); }
  60% { opacity: 1; transform: rotate(var(--ang)) translateX(var(--d)) scale(1.2); }
  100% { opacity: 0; transform: rotate(var(--ang)) translateX(calc(var(--d) + 20px)) scale(0); }
}

/* Marquee live strip */
.live-strip {
  border-top: 1px solid var(--stroke);
  border-bottom: 1px solid var(--stroke);
  padding-block: 12px !important;
  background: var(--bg-1);
  overflow: hidden;
}
.marquee {
  display: flex; gap: var(--space-7); align-items: center;
  font-family: var(--font-mono); font-size: 12px; color: var(--ink-1);
  font-weight: 600;
  animation: scroll 50s linear infinite;
  white-space: nowrap; width: max-content;
}
.marquee span { display: inline-flex; align-items: center; gap: var(--space-3); }
.marquee .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(79, 182, 122, 0.5);
  animation: pulse 1.6s ease-out infinite;
}
@keyframes scroll { to { transform: translateX(-50%); } }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(79, 182, 122, 0.5); }
  100% { box-shadow: 0 0 0 14px rgba(79, 182, 122, 0); }
}

/* Gradient shift */
@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}