/* ============================================
   DOOMSDAY — Animations
   ============================================ */

/* ---- Glitch Effect ---- */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -1px); }
  80% { transform: translate(2px, 1px); }
  100% { transform: translate(0); }
}

/* ---- Scanline Sweep ---- */
@keyframes scanline-sweep {
  0% { top: -10%; }
  100% { top: 110%; }
}

/* ---- Pulse Glow ---- */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 4px var(--toxic-green), 0 0 8px var(--toxic-glow);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 8px var(--toxic-green), 0 0 20px var(--toxic-glow-strong);
    opacity: 0.7;
  }
}

/* ---- Fade In Up ---- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Fade In ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Flicker ---- */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.8; }
  43% { opacity: 1; }
  45% { opacity: 0.3; }
  46% { opacity: 1; }
}

/* ---- Float ---- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Hazard Scroll ---- */
@keyframes hazard-scroll {
  0% { background-position: 0 0; }
  100% { background-position: 28px 0; }
}

/* ---- Bounce ---- */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---- Scroll Reveal System ---- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered delays via CSS variable */
.reveal[style*="--delay:1"] { transition-delay: 0.1s; }
.reveal[style*="--delay:2"] { transition-delay: 0.2s; }
.reveal[style*="--delay:3"] { transition-delay: 0.3s; }
.reveal[style*="--delay:4"] { transition-delay: 0.4s; }
.reveal[style*="--delay:5"] { transition-delay: 0.5s; }
.reveal[style*="--delay:6"] { transition-delay: 0.6s; }

/* ---- Hero Scanline ---- */
.hero-scanline {
  position: absolute;
  top: -10%;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--toxic-green), transparent);
  opacity: 0.4;
  animation: scanline-sweep 4s linear infinite;
  z-index: 3;
}

/* ---- Scroll Chevron ---- */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s ease-in-out infinite;
  z-index: 3;
}

.scroll-indicator svg {
  width: 30px;
  height: 30px;
  stroke: var(--toxic-green);
  opacity: 0.6;
}

/* ---- Glow Text ---- */
.glow-text {
  text-shadow: 0 0 10px var(--toxic-glow),
               0 0 20px var(--toxic-glow),
               0 0 40px var(--toxic-glow);
}

/* ---- Counter Animation ---- */
.counter-value {
  display: inline-block;
  font-family: var(--font-display);
  color: var(--toxic-green);
  font-size: 2.5rem;
}

/* ---- Card hover glow ---- */
@keyframes border-glow {
  0%, 100% { border-color: var(--toxic-green-dim); }
  50% { border-color: var(--toxic-green); }
}

/* ============================================
   REDESIGN v2 (2026-04-17) — extra animations
   ============================================ */

/* Glitch RGB-shift (for .glitch class in components.css) */
@keyframes glitch-shift-x {
  0%, 90%, 100% { transform: translate(-2px, 0); opacity: 0.6; }
  92% { transform: translate(-6px, 1px); opacity: 0.85; }
  94% { transform: translate( 4px, -1px); opacity: 0.7; }
  96% { transform: translate(-2px, 0); opacity: 0.6; }
}
@keyframes glitch-shift-y {
  0%, 90%, 100% { transform: translate(2px, 0); opacity: 0.6; }
  91% { transform: translate( 6px, -1px); opacity: 0.8; }
  93% { transform: translate(-3px, 2px); opacity: 0.75; }
  97% { transform: translate( 2px, 0); opacity: 0.6; }
}

/* Blood-pulse (heartbeat for hero/CTA) */
@keyframes blood-pulse {
  0%, 100% { box-shadow: 0 0 18px var(--blood-glow); }
  50%      { box-shadow: 0 0 36px var(--blood-glow-strong), 0 0 60px var(--blood-glow); }
}
.blood-pulse { animation: blood-pulse 2.5s ease-in-out infinite; }

/* Fog drift (very slow, parallax fog layers) */
@keyframes fog-drift-1 {
  from { transform: translateX(-5%); }
  to   { transform: translateX( 5%); }
}
@keyframes fog-drift-2 {
  from { transform: translateX( 5%); }
  to   { transform: translateX(-5%); }
}

/* Radar dot blink */
@keyframes radar-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.35; }
}
.radar-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--blood-bright);
  box-shadow: 0 0 10px var(--blood-glow-strong);
  animation: radar-blink 1s steps(1) infinite;
}
.radar-dot.off {
  background: var(--ash);
  box-shadow: none;
  animation: none;
}