/* ═══════════════════════════════════════════════════════
   ANIMATIONS — All CSS @keyframes
═══════════════════════════════════════════════════════ */

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

@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.75); }
}

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

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

@keyframes grain {
  0%  { transform: translate(0, 0) }
  10% { transform: translate(-4%, -3%) }
  20% { transform: translate(3%, -8%) }
  30% { transform: translate(-8%,  4%) }
  40% { transform: translate( 4%,  7%) }
  50% { transform: translate(-3%,  3%) }
  60% { transform: translate( 8%, -4%) }
  70% { transform: translate( 4%, -8%) }
  80% { transform: translate(-8%,  8%) }
  90% { transform: translate(-3%, -4%) }
  100%{ transform: translate(0, 0) }
}

@keyframes shimmerAccent {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes shimmerChar {
  0%, 60%, 100% {
    color: var(--text);
    text-shadow: none;
  }
  30% {
    color: #ffffff;
    text-shadow:
      0 0 6px  rgba(255,255,255,1),
      0 0 20px rgba(180,255,240,0.8),
      0 0 50px rgba(100,255,218,0.5),
      0 0 90px rgba(100,255,218,0.25);
  }
}

@keyframes glowAccent {
  0%, 60%, 100% {
    color: var(--accent);
    text-shadow: 0 0 10px rgba(100,255,218,0.4);
  }
  30% {
    color: #ffffff;
    text-shadow:
      0 0 6px  #ffffff,
      0 0 16px #64ffda,
      0 0 40px rgba(100,255,218,0.9),
      0 0 80px rgba(100,255,218,0.6),
      0 0 140px rgba(100,255,218,0.3);
  }
}