/* ── Keyframe definitions ───────────────────────────────────────────────────── */

/* Start-button pulsing ring */
@keyframes ring-pulse {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* Countdown number pop-in */
@keyframes number-pop {
  0%   { transform: scale(1.6);  opacity: 0; }
  40%  { transform: scale(0.92); opacity: 1; }
  65%  { transform: scale(1.04); }
  100% { transform: scale(1);    opacity: 1; }
}

/* Camera flash — quick white burst then fade */
@keyframes flash-burst {
  0%   { opacity: 0.95; }
  100% { opacity: 0;    }
}

/* Spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Screen fade-in */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Thumbnail slide-in from right */
@keyframes thumb-slide-in {
  from { opacity: 0; transform: translateX(24px) scale(0.9); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Strip canvas reveal */
@keyframes strip-reveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Glitch displacement — used on glitch-static background */
@keyframes glitch-shift-h {
  0%, 89%, 100% { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateX(0); }
  90%  { clip-path: inset(10% 0 60% 0); opacity: 1; transform: translateX(-8px); }
  92%  { clip-path: inset(40% 0 30% 0); transform: translateX(6px); }
  94%  { clip-path: inset(70% 0 10% 0); transform: translateX(-4px); }
  96%  { clip-path: inset(20% 0 50% 0); opacity: 1; }
  98%  { clip-path: inset(0 0 100% 0); opacity: 0; }
}

@keyframes glitch-shift-v {
  0%, 84%, 100% { opacity: 0; transform: translateY(0); }
  85%  { opacity: 0.6; transform: translateY(-6px); clip-path: inset(5% 0 80% 0); }
  87%  { transform: translateY(4px); clip-path: inset(60% 0 15% 0); }
  89%  { opacity: 0; }
}

/* Holographic hue shift */
@keyframes holo-rotate {
  from { transform: rotate(0deg)   scale(2.5); }
  to   { transform: rotate(360deg) scale(2.5); }
}

/* Synthwave grid scroll — background-position moves to create perspective movement */
@keyframes grid-scroll {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 60px, 0 60px; }
}

/* Horizon glow pulse */
@keyframes horizon-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1;   }
}

/* Stars twinkle */
@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 1;   }
}

/* Countdown number gets the pop animation class applied by JS */
.countdown-number.pop {
  animation: number-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Flash fires when the class is added by JS */
.flash-overlay.firing {
  animation: flash-burst 0.4s ease-out forwards;
}

/* Screens fade in when made .active */
.screen.active {
  animation: fade-in 0.35s ease both;
}

/* Strip canvas animates in on screen 3 */
#strip-canvas {
  animation: none; /* applied by JS after render: strip-reveal */
}
#strip-canvas.revealed {
  animation: strip-reveal 0.5s ease both;
}

/* Thumbnail appears */
.thumbnail-img.visible {
  animation: thumb-slide-in 0.35s ease both;
}