/* ============================================================
   shared/animations.css — linqIQ Animation Utilities
   Complements shared/styles.css (which owns scroll-reveal base
   classes, component hover states, and core keyframes like
   fadeInUp / fadeIn / fadeInScale / fadeInSlide / formSpin).
   This file adds additional keyframes, stagger delays,
   animation utility classes, and chart/viz helpers.
   ============================================================ */

/* ── ADDITIONAL KEYFRAMES ── */

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

@keyframes barGrow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

/* ── STAGGER DELAY UTILITIES ── */
.delay-1 { transition-delay: 100ms; animation-delay: 100ms; }
.delay-2 { transition-delay: 200ms; animation-delay: 200ms; }
.delay-3 { transition-delay: 300ms; animation-delay: 300ms; }
.delay-4 { transition-delay: 400ms; animation-delay: 400ms; }
.delay-5 { transition-delay: 500ms; animation-delay: 500ms; }
.delay-6 { transition-delay: 600ms; animation-delay: 600ms; }

/* ── ANIMATION UTILITY CLASSES ── */

/* Continuous float — apply to elements that should gently bob */
.float {
  animation: float 6s ease-in-out infinite;
}

/* Continuous pulse — apply to elements that should throb */
.pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* ── CHART / VIZ ANIMATION CLASSES ── */

/* Bar chart grow-up animation */
.bar-animate {
  transform: scaleY(0);
  transform-origin: bottom;
  animation: barGrow 0.8s ease-out forwards;
}

/* SVG line-draw animation — set stroke-dasharray & dashoffset on the element */
.line-draw {
  animation: drawLine 1.5s ease-in-out forwards;
}

/* Gauge / progress bar fill — animates width from 0 */
.gauge-fill {
  width: 0;
  transition: width 1.2s ease-out;
}

/* Counter number styling — use on elements with [data-target] */
.count-up {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--color-primary);
}