/* ============================================================
   ANIMATIONS — Keyframes and scroll-reveal utilities
   ============================================================ */

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

@keyframes drift {
  0%,100% { transform: translate(0, 0); }
  33%     { transform: translate(20px, -15px); }
  66%     { transform: translate(-10px, 20px); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0); }
}

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

@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ─── FLOATING BACKGROUND DOTS ───────────────────────────── */
.bg-dots-wrap {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden; z-index: 0;
}
.bg-dot {
  position: absolute; border-radius: 50%;
  background: var(--blue); opacity: 0;
  animation: dotFloat linear infinite;
}
@keyframes dotFloat {
  0%        { opacity: 0;    transform: translateY(0)    scale(1);   }
  12%       { opacity: 0.28; }
  88%       { opacity: 0.08; }
  100%      { opacity: 0;    transform: translateY(-90px) scale(0.4); }
}

/* ─── TRACKER SCAN LINE ──────────────────────────────────── */
@keyframes scanLine {
  0%   { top: 42px; opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 0.7; }
  100% { top: 96%; opacity: 0; }
}

@keyframes textPulse {
  0%, 100% { color: var(--blue); }
  50%       { color: var(--cyan); }
}

@keyframes shimmer {
  0%       { left: -80%; }
  60%,100% { left: 150%; }
}

@keyframes numberGlow {
  0%, 100% { text-shadow: none; }
  50%       { text-shadow: 0 0 30px rgba(37,99,235,0.25); }
}

/* ─── SCROLL REVEAL ──────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── PREFERS REDUCED MOTION ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .reveal { opacity: 1; transform: none; transition: none; }
}