// scene-transitions.jsx — pipeline-slide transition primitive between phases
//
// <PipelineSlide from={ms} duration={800} active={2} next={3} />
//   Renders the pipeline bar overlaid + animates the active node "sliding" forward
//   from `active` → `next`. Background: a small dark scrim wash for ~200ms.
//
// Usage: place inside a Timeline at the END of a scene to act as outgoing
// transition, OR at the START of a scene as incoming transition.

function PipelineSlide({ from = 0, duration = 800, active = 0, next = 1, label }) {
  const t = useT();
  if (t < from || t > from + duration + 200) return null;
  const p = Math.min(1, Math.max(0, (t - from) / duration));
  const eased = p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;
  // Bar appears, slider moves from active to next, bar fades.
  const op = p < 0.15 ? p / 0.15 : (p > 0.85 ? 1 - (p - 0.85) / 0.15 : 1);

  // Use a fractional active by lerp; render two overlay dots
  const lerpedActive = active + (next - active) * eased;

  return (
    <div style={{
      position: 'absolute', top: 36, left: 0, right: 0,
      opacity: op, zIndex: 10,
      pointerEvents: 'none',
    }}>
      <PipelineBar active={Math.round(lerpedActive)} />
      {label && (
        <div style={{
          textAlign: 'center', marginTop: 16,
          fontFamily: 'var(--font-mono)', fontSize: 18,
          color: 'var(--ink-faint)', letterSpacing: '0.18em',
          textTransform: 'uppercase',
          opacity: op,
        }}>{label}</div>
      )}
    </div>
  );
}

window.PipelineSlide = PipelineSlide;