/* ============================================================
   ANIMATIONS.CSS — All keyframes and motion utilities
   ============================================================ */

@keyframes bounce {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50%       { transform: translateY(-0.875rem) rotate(5deg); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-0.625rem); }
  40%       { transform: translateX(0.625rem); }
  60%       { transform: translateX(-0.375rem); }
  80%       { transform: translateX(0.375rem); }
}

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50%       { opacity: .6; }
}

@keyframes current-pulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 12px var(--electric-blue); }
  50%       { transform: scale(1.2); box-shadow: 0 0 22px var(--electric-blue); }
}

@keyframes runner-bounce {
  from { transform: translateY(-58%); }
  to   { transform: translateY(-42%); }
}

@keyframes card-appear {
  from { transform: scale(.7); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

@keyframes slide-in {
  from { transform: translateY(-1.125rem); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@keyframes particle-fly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Utility: staggered fade */
.fade-in { animation: fade-in .4s ease-out forwards; }

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