/* ── Title logo ───────────────────────────────────────────────────────────── */
@keyframes shimmer {
  to { background-position: 220% 0; }
}

@keyframes titlePulse {
  0%, 100% { filter: drop-shadow(0 0 22px rgba(0,170,255,0.50)); }
  50%       { filter: drop-shadow(0 0 65px rgba(0,229,255,0.90)); }
}

/* ── Glitch — fires periodically on the FLAPPY WAR title ─────────────────── */
@keyframes glitch {
  0%, 88%, 100% {
    text-shadow: none;
    transform: translate(0, 0);
    clip-path: none;
  }
  89% {
    text-shadow: -3px 0 var(--glitch-red), 3px 0 var(--glitch-cyan);
    transform: translate(-2px, 0) skewX(-0.5deg);
  }
  90% {
    text-shadow: 3px 0 var(--glitch-red), -3px 0 var(--glitch-cyan);
    transform: translate(2px, 0) skewX(0.5deg);
    clip-path: polygon(0 15%, 100% 15%, 100% 50%, 0 50%);
  }
  91% {
    text-shadow: -2px 0 var(--glitch-red), 2px 0 var(--glitch-cyan);
    transform: translate(-1px, 0);
    clip-path: polygon(0 55%, 100% 55%, 100% 80%, 0 80%);
  }
  92% {
    text-shadow: none;
    transform: translate(0, 0);
    clip-path: none;
  }
}

/* ── Cyber scan line sweep ────────────────────────────────────────────────── */
@keyframes scanSweep {
  0%   { transform: translateY(-100%); opacity: 0.0; }
  10%  { opacity: 0.06; }
  90%  { opacity: 0.06; }
  100% { transform: translateY(100vh); opacity: 0.0; }
}

/* ── Moving scan beam (single bright line across screen) ─────────────────── */
@keyframes scanBeam {
  0%   { top: -2px; opacity: 0; }
  3%   { opacity: 1; }
  97%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ── Data node pulse ─────────────────────────────────────────────────────── */
@keyframes nodePulse {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%       { transform: scale(1.5); opacity: 1.0; }
}

/* ── Owl float ───────────────────────────────────────────────────────────── */
@keyframes owlFloat {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-12px); }
}

/* ── Countdown number pop ────────────────────────────────────────────────── */
@keyframes cdPop {
  from { transform: scale(1.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Data particle rise (title screen CSS particles) ─────────────────────── */
@keyframes rise {
  0%   { opacity: 0;   transform: translateY(0)    scale(1);   }
  15%  { opacity: 0.9;                                          }
  80%  { opacity: 0.5; transform: translateY(-55vh) scale(0.7); }
  100% { opacity: 0;   transform: translateY(-70vh) scale(0.2); }
}

/* ── Screen fade ─────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Card appear ─────────────────────────────────────────────────────────── */
@keyframes cardUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── HUD feedback ────────────────────────────────────────────────────────── */
@keyframes fbPop {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.8); }
  15%  { opacity: 1; transform: translateX(-50%) scale(1.08); }
  80%  { opacity: 1; transform: translateX(-50%) scale(1);   }
  100% { opacity: 0; transform: translateX(-50%) scale(1);   }
}

/* ── Level up flash ──────────────────────────────────────────────────────── */
@keyframes levelFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ── Result title glow pulse ─────────────────────────────────────────────── */
@keyframes resultGlow {
  0%, 100% { text-shadow: 0 0 20px currentColor; }
  50%       { text-shadow: 0 0 50px currentColor, 0 0 90px currentColor; }
}

/* ── Corner bracket pulse ────────────────────────────────────────────────── */
@keyframes bracketPulse {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 0.90; }
}

/* ── Border segment march (tech border animation) ────────────────────────── */
@keyframes borderMarch {
  0%   { stroke-dashoffset: 1000; }
  100% { stroke-dashoffset: 0; }
}

/* ── Animated entrance for mode cards ────────────────────────────────────── */
.mode-card:nth-child(1) { animation: cardUp 0.4s 0.1s ease both; }
.mode-card:nth-child(2) { animation: cardUp 0.4s 0.22s ease both; }
.mode-card:nth-child(3) { animation: cardUp 0.4s 0.34s ease both; }
.mode-card:nth-child(4) { animation: cardUp 0.4s 0.46s ease both; }

.diff-card:nth-child(1) { animation: cardUp 0.35s 0.05s ease both; }
.diff-card:nth-child(2) { animation: cardUp 0.35s 0.14s ease both; }
.diff-card:nth-child(3) { animation: cardUp 0.35s 0.23s ease both; }