/* assets/css/animations.css
 * Keyframes and motion. Anything that moves on the page is
 * declared here so the rest of the styles stay readable.
 */

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--gold_glow); }
  50% { box-shadow: 0 0 24px 6px var(--gold_glow); }
}

@keyframes fade_in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fade_in_slow {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

.fade_in { animation: fade_in 600ms var(--ease_out) backwards; }
.fade_in_slow { animation: fade_in_slow 1200ms var(--ease_out) backwards; }

.stagger > * { animation: fade_in 600ms var(--ease_out) backwards; }
.stagger > *:nth-child(1) { animation-delay: 60ms; }
.stagger > *:nth-child(2) { animation-delay: 120ms; }
.stagger > *:nth-child(3) { animation-delay: 180ms; }
.stagger > *:nth-child(4) { animation-delay: 240ms; }
.stagger > *:nth-child(5) { animation-delay: 300ms; }
.stagger > *:nth-child(6) { animation-delay: 360ms; }
.stagger > *:nth-child(7) { animation-delay: 420ms; }
.stagger > *:nth-child(8) { animation-delay: 480ms; }
.stagger > *:nth-child(9) { animation-delay: 540ms; }

.score_number { animation: count_up 1000ms var(--ease_out) backwards; }

.shimmering {
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--gold_glow) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s linear infinite;
}

@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;
  }
}