/* =========================================================
   ANIMATIONS.CSS — Keyframes and animation classes
   ========================================================= */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 10px); }
}

@keyframes scanline-flicker {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.9; }
  52% { opacity: 0.4; }
  54% { opacity: 0.9; }
}

@keyframes glitch-anim-1 {
  0% { clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%); transform: translate(0); }
  10% { clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%); transform: translate(-2px, 0); }
  20% { clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%); transform: translate(2px, 0); }
  30% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); transform: translate(-2px, 0); }
  40% { clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); transform: translate(0); }
  50% { clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); transform: translate(2px, 0); }
  60% { clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); transform: translate(-2px, 0); }
  70% { clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); transform: translate(0); }
  80% { clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); transform: translate(-2px, 0); }
  90% { clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); transform: translate(2px, 0); }
  100% { clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); transform: translate(0); }
}

@keyframes glitch-anim-2 {
  0% { clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%); transform: translate(0); }
  15% { clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%); transform: translate(2px, 0); }
  22% { clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%); transform: translate(-2px, 0); }
  31% { clip-path: polygon(0 10%, 100% 10%, 100% 15%, 0 15%); transform: translate(2px, 0); }
  45% { clip-path: polygon(0 33%, 100% 33%, 100% 43%, 0 43%); transform: translate(0); }
  53% { clip-path: polygon(0 44%, 100% 44%, 100% 45%, 0 45%); transform: translate(2px, 0); }
  64% { clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%); transform: translate(-2px, 0); }
  77% { clip-path: polygon(0 70%, 100% 70%, 100% 75%, 0 75%); transform: translate(0); }
  88% { clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%); transform: translate(2px, 0); }
  100% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%); transform: translate(-2px, 0); }
}

@keyframes glitch-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-2px, 1px); }
  20% { transform: translate(2px, -1px); }
  30% { transform: translate(-1px, 2px); }
  40% { transform: translate(1px, -2px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -1px); }
  90% { transform: translate(-2px, 0); }
}

@keyframes vhs-sweep {
  0% { top: -10px; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes boot-line-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes boot-out {
  from { opacity: 1; }
  to { opacity: 0; transform: scale(1.02); visibility: hidden; }
}

@keyframes arrow-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 8px var(--neon-primary), 0 0 16px rgba(0, 240, 255, 0.3); }
  50% { box-shadow: 0 0 16px var(--neon-primary), 0 0 32px rgba(0, 240, 255, 0.5); }
}

@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@keyframes ticker {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Animation utility classes ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.float { animation: float 4s ease-in-out infinite; }
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

/* Glitch shake utility */
.shake { animation: glitch-shake 0.3s; }