/* ═══════════════════════════════════════
   CSS Custom Properties & Keyframes
   Brand design tokens — V2 navy/teal palette
═══════════════════════════════════════ */

:root {
  /* Color palette — pure black space + teal accent */
  --black: #000000;
  --off-black: #050508;
  --dark: #0a0a0e;
  --steel-dark: #2a2d32;
  --steel: #6b7480;
  --steel-mid: #8c96a0;
  --steel-light: #b4bfc9;
  --white: #f2f2f0;

  /* Accent (teal green) */
  --accent: #00C896;
  --accent-hover: #00A37A;
  --accent-light: #E8F4F0;
  --accent-glow: rgba(0, 200, 150, 0.18);

  /* Glass morphism */
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --glow: rgba(0, 200, 150, 0.12);

  /* Card surfaces */
  --card-bg: #0a0a0e;

  /* Typography */
  --font-display: 'Syne', 'DM Serif Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

/* ── Keyframe Animations ── */

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

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

@keyframes float-idle-mid {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 12px)); }
}

@keyframes scroll-move {
  0% { left: -100%; }
  100% { left: 100%; }
}

@keyframes sweep {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(300%) skewX(-15deg); }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  30% { opacity: 0.2; }
  60% { opacity: 0.9; }
}

@keyframes sw-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* Hero-specific animations */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes accent-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 150, 0.25); }
  50% { box-shadow: 0 0 0 12px rgba(0, 200, 150, 0); }
}

@keyframes logo-fade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 0.45; transform: translateY(0); }
}

@keyframes metric-count-in {
  from { opacity: 0; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}