/* ============================================================
   ANIMATIONS — ZohnStats
   All @keyframes centralised. Referenced by main/components.
   ============================================================ */

/* ── Entrance animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* ── Progress bar fill ── */
@keyframes barGrow {
    from { width: 0; }
}

/* ── Skeleton shimmer ── */
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Spinner ── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Pulse (live badge) ── */
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.68); }
}

/* ── Ticker scroll ── */
@keyframes tickerScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* ── Ticker live badge pulse ── */
@keyframes tickerLivePulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ── Toast notifications ── */
@keyframes toastIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

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

/* ── Stat value count-up effect (CSS-only pulse) ── */
@keyframes statPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* ── Glow pulse for live elements ── */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 166, 35, 0.35); }
    50%      { box-shadow: 0 0 0 6px rgba(245, 166, 35, 0); }
}

/* ── Stagger utility classes ── */
/* Apply animation-delay as inline style, or use nth-child */
.anim-fade-up      { animation: fadeUp    0.3s var(--ease-out) both; }
.anim-fade-in      { animation: fadeIn    0.25s var(--ease-out) both; }
.anim-slide-right  { animation: slideInRight 0.3s var(--ease-out) both; }
.anim-scale-in     { animation: scaleIn   0.25s var(--ease-spring) both; }

/* Stagger helpers — use these on parent elements */
.stagger-children > * { animation-fill-mode: both; }
.stagger-children > *:nth-child(1) { animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { animation-delay: 40ms; }
.stagger-children > *:nth-child(3) { animation-delay: 80ms; }
.stagger-children > *:nth-child(4) { animation-delay: 120ms; }
.stagger-children > *:nth-child(5) { animation-delay: 160ms; }
.stagger-children > *:nth-child(6) { animation-delay: 200ms; }
.stagger-children > *:nth-child(7) { animation-delay: 240ms; }
.stagger-children > *:nth-child(8) { animation-delay: 280ms; }
.stagger-children > *:nth-child(n+9) { animation-delay: 320ms; }