/* --- Rocket launch animation (Predict Winners payoff) --- */
/* A vetted Lottie rocket loops while we crunch the prediction, then 3-2-1 + confetti liftoff. */

.rk-overlay {
  position: fixed; inset: 0; z-index: 9997; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 18%, #1b2740 0%, #0a0f1a 58%, #05080f 100%);
}
.rk-overlay.rk-fade { animation: rkFade .5s ease forwards }
@keyframes rkFade { to { opacity: 0 } }

/* Full-screen starfield (our own, stays put) — drifts while idle, warps on liftoff */
.rk-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none }

.rk-stage { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center }
.rk-lottie { width: min(78vw, 440px); height: min(62vh, 440px) }

/* Takeoff: a tiny crouch, then the whole scene ZOOMS toward the viewer and dissolves into the
   hyperspace warp behind it (no upward travel — avoids dragging the baked mountains/scene). */
.rk-lottie.rk-launch { animation: rkLaunch 2.6s cubic-bezier(.4,0,.7,.2) forwards }
@keyframes rkLaunch {
  0%   { transform: scale(1) translateY(0); opacity: 1 }
  14%  { transform: scale(.96) translateY(8px); opacity: 1 }   /* crouch */
  55%  { opacity: 1 }
  100% { transform: scale(2.4) translateY(-30px); opacity: 0 } /* zoom in + dissolve into the warp */
}

/* Countdown number + status caption */
.rk-count {
  position: absolute; z-index: 4; top: 20%; left: 0; right: 0; text-align: center; color: #fff; font-weight: 900;
  font-size: clamp(64px, 14vw, 150px); letter-spacing: -.02em;
  text-shadow: 0 4px 30px rgba(91,163,245,.6), 0 0 14px rgba(0,0,0,.5); pointer-events: none;
}
.rk-count-pop { animation: rkCount .72s cubic-bezier(.2,.8,.3,1) }
@keyframes rkCount { 0% { opacity: 0; transform: scale(.3) } 24% { opacity: 1; transform: scale(1.18) } 70% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(.9) } }
.rk-status { position: absolute; z-index: 4; bottom: 14%; left: 0; right: 0; text-align: center; color: #aab6c8; font-size: 16px; font-weight: 600; letter-spacing: .02em }

/* Ignition flash */
.rk-flash { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255,240,200,.9), rgba(255,170,60,.28) 32%, rgba(255,120,40,0) 62%) }
.rk-flash-on { animation: rkFlash .7s ease forwards }
@keyframes rkFlash { 0% { opacity: 0 } 14% { opacity: 1 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .rk-count-pop { animation: none }
  .rk-lottie.rk-launch { animation: rkFadeOut 1.2s ease forwards }
}
@keyframes rkFadeOut { to { opacity: 0 } }