/* ─────────────────────────────────────────────
   VALKOR SMP — animations.css
   All keyframes and reusable transition helpers
───────────────────────────────────────────── */

/* ── Glitch Effect ───────────────────────── */
@keyframes glitch {
  0%   { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
  15%  { text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00; }
  16%  { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
  49%  { text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00; }
  50%  { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
  99%  { text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00; }
  100% { text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00; }
}

/* ── Pulse Glow ───────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(0,255,135,0.4), 0 0 30px rgba(0,255,135,0.2); }
  50%       { box-shadow: 0 0 20px rgba(0,255,135,0.7), 0 0 60px rgba(0,255,135,0.35); }
}

/* ── Pulse Ring ───────────────────────────── */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Float ────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}

/* ── Float Slow ───────────────────────────── */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) translateX(0); }
  33%       { transform: translateY(-25px) translateX(10px); }
  66%       { transform: translateY(-10px) translateX(-8px); }
}

/* ── Orb Drift ────────────────────────────── */
@keyframes orbDrift {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.5; }
  50%  { transform: translate(40px, -30px) scale(1.1); opacity: 0.7; }
  100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
}

/* ── Rotate Slow ──────────────────────────── */
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

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

/* ── Preloader Fill ───────────────────────── */
@keyframes preloaderFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* ── Preloader Text Flash ─────────────────── */
@keyframes textFlash {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Fade In Up ───────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Fade In ──────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Scale In ─────────────────────────────── */
@keyframes scaleIn {
  from { transform: scale(0.8); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ── Slide In Left ────────────────────────── */
@keyframes slideInLeft {
  from { transform: translateX(-60px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Gradient Shift ───────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Grid Move ────────────────────────────── */
@keyframes gridMove {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}

/* ── Scroll Arrow ─────────────────────────── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; }
  50%       { transform: translateY(8px) rotate(45deg); opacity: 0.4; }
}

/* ── Counter Count Up ─────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Status Dot Pulse ─────────────────────── */
@keyframes statusPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.5); opacity: 0.6; }
}

/* ── Toast Slide ──────────────────────────── */
@keyframes toastSlide {
  0%   { transform: translateX(120%); opacity: 0; }
  15%  { transform: translateX(0); opacity: 1; }
  85%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* ── Modal Scale In ───────────────────────── */
@keyframes modalScaleIn {
  from { transform: scale(0.85) translateY(30px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ── Shimmer ──────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Step Number Bounce ───────────────────── */
@keyframes stepBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* ────────────────────────────────────────────
   Reveal on Scroll (controlled by JS)
─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Delay helpers ────────────────────────── */
.reveal[data-delay="100"] { transition-delay: 0.1s; }
.reveal[data-delay="150"] { transition-delay: 0.15s; }
.reveal[data-delay="200"] { transition-delay: 0.2s; }
.reveal[data-delay="300"] { transition-delay: 0.3s; }
.reveal[data-delay="400"] { transition-delay: 0.4s; }
.reveal[data-delay="450"] { transition-delay: 0.45s; }
.reveal[data-delay="500"] { transition-delay: 0.5s; }