/* animations.css — keyframes and motion states */

@keyframes crt-sweep {
  from { transform: translateY(0); }
  to { transform: translateY(150vh); }
}

@keyframes frame-scan {
  0% { top: 2%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { top: 98%; opacity: 0; }
}

@keyframes ticker-roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes reveal-up {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glitch-shift {
  0%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  20% { transform: translate(-3px, 1px); }
  40% { transform: translate(3px, -1px); }
  60% { transform: translate(-2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-8px, 4px); }
  20% { transform: translate(7px, -5px); }
  30% { transform: translate(-6px, -6px); }
  40% { transform: translate(6px, 5px); }
  50% { transform: translate(-5px, 3px); }
  60% { transform: translate(5px, -3px); }
  70% { transform: translate(-4px, 4px); }
  80% { transform: translate(3px, -2px); }
  90% { transform: translate(-2px, 1px); }
}

@keyframes red-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 47, 47, 0); }
  50% { box-shadow: 0 0 24px 4px rgba(255, 47, 47, 0.35); }
}

@keyframes text-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.4; }
  94% { opacity: 1; }
  96% { opacity: 0.6; }
  97% { opacity: 1; }
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
}

.reveal.is-visible {
  animation: reveal-up 0.5s steps(6) forwards;
}

/* ---------- glitch text ---------- */

[data-glitch] {
  position: relative;
  display: inline-block;
}

[data-glitch].is-glitching {
  animation: glitch-shift 0.4s steps(2) 2;
  text-shadow: 3px 0 var(--red), -3px 0 var(--orange);
}

/* ---------- utility motion states ---------- */

.is-shaking {
  animation: screen-shake 0.5s steps(4) 1;
}

.is-pulsing {
  animation: red-pulse 1.6s ease-in-out infinite;
}

.is-flickering {
  animation: text-flicker 4s steps(1) infinite;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .ticker__track,
  .stage-frame__scan,
  .is-pulsing,
  .is-flickering,
  [data-glitch].is-glitching,
  .is-shaking {
    animation: none !important;
  }

  .btn:hover,
  .move-card:hover,
  .power-card:hover {
    transform: none;
  }
}