/* ============================================
   animations.css — Keyframes, scroll animations,
   stagger delays, and reduced-motion support
   ============================================ */

/* --- Keyframes --- */

@keyframes pulse {
  0%   { transform: scale(1);    opacity: 1; }
  50%  { transform: scale(1.15); opacity: 0.7; }
  100% { transform: scale(1);    opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes glow-pulse {
  0%   { box-shadow: 0 0 4px  var(--color-accent); }
  50%  { box-shadow: 0 0 16px var(--color-accent); }
  100% { box-shadow: 0 0 4px  var(--color-accent); }
}

@keyframes meter-fill {
  from { width: 0; }
  to   { width: var(--fill, 0%); }
}

@keyframes counter-roll {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* --- Scroll-triggered animation --- */

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Card stagger delay --- */

.scandal-card {
  animation: slide-up 400ms ease-out both;
  animation-delay: calc(var(--i, 0) * 80ms);
}

/* --- Theme transition (smooth color/bg switching) --- */

* {
  transition: color 350ms ease, background-color 350ms ease;
}

/* --- Reduced motion preference --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
    transition: none;
  }
}