// Scene 00 — COLD OPEN
// Paper appears. Crosshair draws in. Wordmark slides from left.
// Thesis line fades in on the firm left margin.

function SceneOpen() {
  const { progress, localTime, duration } = useSprite();

  // Crosshair lines draw 0.0 -> 0.6, center dot pops at 0.55
  const drawT = Math.min(1, localTime / 0.7);
  const dotT = clamp((localTime - 0.55) / 0.25, 0, 1);
  const ringT = clamp((localTime - 0.75) / 0.5, 0, 1);

  // Wordmark appears at t=0.9, thesis at t=1.4
  const wordT = clamp((localTime - 0.9) / 0.6, 0, 1);
  const thesisT = clamp((localTime - 1.4) / 0.8, 0, 1);
  const stampT = clamp((localTime - 2.0) / 0.6, 0, 1);

  // Exit fade on final 0.4s
  const exit = clamp((localTime - (duration - 0.4)) / 0.4, 0, 1);

  const ease = Easing.easeOutCubic;

  // Crosshair at right side of frame (hero motif placement)
  const cx = 1520, cy = 540;
  const armLen = 280;

  const verticalH = armLen * 2 * ease(drawT);
  const horizontalW = armLen * 2 * ease(drawT);

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: 1 - exit }}>
      {/* Big display headline, firm left */}
      <div style={{
        position: 'absolute',
        left: 80, top: 300,
        width: 1180,
        fontFamily: O8.fontSans,
        fontSize: 124, lineHeight: 0.96,
        letterSpacing: '-0.04em',
        fontWeight: 500, color: O8.ink,
        opacity: ease(thesisT),
        transform: `translateY(${(1 - ease(thesisT)) * 18}px)`,
      }}>
        <div>An orchestrator</div>
        <div style={{color: O8.inkMuted}}>that dispatches</div>
        <div>against itself.</div>
      </div>

      {/* Giant mono scene numeral — replaces redundant eyebrow */}
      <div style={{
        position: 'absolute',
        left: 80, top: 220,
        fontFamily: O8.fontMono,
        fontSize: 18, color: O8.inkMuted,
        letterSpacing: '0.04em',
        opacity: ease(wordT),
      }}>
        (SCENE 00 &mdash; 15s COLD OPEN)
      </div>

      {/* Crosshair — the one ornament */}
      <svg style={{position:'absolute', left: 0, top: 0, width: 1920, height: 1080}} aria-hidden>
        {/* Vertical */}
        <line
          x1={cx} y1={cy - verticalH/2}
          x2={cx} y2={cy + verticalH/2}
          stroke={O8.accent} strokeWidth="1"
        />
        {/* Horizontal */}
        <line
          x1={cx - horizontalW/2} y1={cy}
          x2={cx + horizontalW/2} y2={cy}
          stroke={O8.accent} strokeWidth="1"
        />
        {/* Center dot */}
        <circle cx={cx} cy={cy} r={6 * ease(dotT)} fill={O8.accent}/>
        {/* Inner ring */}
        <circle cx={cx} cy={cy} r={22 * ease(ringT)} stroke={O8.accent} strokeWidth="1" fill="none" opacity="0.5"/>
        {/* Outer structure ring */}
        <circle cx={cx} cy={cy} r={84 * ease(ringT)} stroke={O8.structure} strokeWidth="1" fill="none" opacity="0.8"/>
      </svg>

      {/* Bottom stamp line — appears last */}
      <div style={{
        position: 'absolute',
        left: 80, top: 760,
        fontFamily: O8.fontMono, fontSize: 16,
        color: O8.inkMuted,
        opacity: ease(stampT),
        letterSpacing: '0.04em',
      }}>
        (A FIFTEEN-SECOND DEMONSTRATION)
      </div>
    </div>
  );
}

window.SceneOpen = SceneOpen;