// reel-tokens.jsx — local copy of SiteAuditor brand tokens so the reel is
// self-contained (no dependency on the design canvas).
const SA = {
  bg:          '#0d1117',
  bgCard:      '#161b22',
  bgCardHover: '#1c2128',
  bgInput:     '#0d1117',
  border:      '#30363d',
  borderLight: '#21262d',
  text:        '#e6edf3',
  textDim:     '#8d96a0',
  textMuted:   '#808890',
  accent:      '#58a6ff',
  accent2:     '#79c0ff',
  pass:        '#3fb950',
  warning:     '#d29922',
  fail:        '#f85149',
  info:        '#58a6ff',
  passBg:      'rgba(63,185,80,0.12)',
  warnBg:      'rgba(210,153,34,0.12)',
  failBg:      'rgba(248,81,73,0.12)',
  accentBg:    'rgba(88,166,255,0.12)',
};

// Tiny helpers used by the scenes.
function lerp(a, b, t) { return a + (b - a) * t; }

// Easy "typing" — turn a target string into a substring at progress t (0..1).
// Pauses briefly at the end so the cursor visible-blinks before submit.
function typeAt(str, t, hold = 0.0) {
  const u = Math.min(1, t / (1 - hold));
  const eased = Easing.easeOutQuad(u);
  return str.slice(0, Math.round(str.length * eased));
}

// Console "blink" cursor — visible on even half-seconds.
function blinkCursor(time, color = SA.text) {
  return Math.floor(time * 2) % 2 === 0
    ? <span style={{ color, fontWeight: 400 }}>▌</span>
    : <span style={{ opacity: 0 }}>▌</span>;
}

Object.assign(window, { SA, lerp, typeAt, blinkCursor });