// scenes.jsx — Yohann Escher Motion 30s — v2 (cinematic)

const ASSETS = {
  homem: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/4107162a-97fa-4750-fcd6-b664090fd600/public',
  emaranhado: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/d3218d34-0d91-4586-dab5-b2664d041700/public',
  cubo: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/6895dfab-4fdb-4898-f8d8-0dbc8586ee00/public',
  cerebroPress: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/41b16920-7e66-4aa9-f3a2-6789a7beda00/public',
  cerebro: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/b653b8f9-354a-4901-3f85-daa03c10f800/public',
  cabecaProgresso: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/511ab5bf-2760-4610-4b62-b27717353e00/public',
  cabecaCaos: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/a3ef3c98-1613-4b2a-fe3f-deba90023d00/public',
  nucleo: 'https://imagedelivery.net/mYdfeAeRRdkIXG5w7XJhtQ/9fd367fc-ecdd-424e-930b-1867b4095700/public',
};

const COLORS = {
  graphite: '#101214',
  graphiteDeep: '#0A0C0D',
  graphiteCard: '#191C1E',
  graphiteCard2: '#202325',
  offwhite: '#F7EFE6',
  cream: '#FFF8F0',
  orange: '#FF6B1A',
  orangeDeep: '#E9580C',
  orangeBright: '#FF8540',
  textLight: '#F7EFE6',
  textDark: '#1E2224',
  borderLight: 'rgba(255,255,255,0.12)',
  borderDark: '#E6D9C7',
};

const FONT_SANS = '"Manrope", "Inter", system-ui, sans-serif';
const FONT_SERIF = '"Instrument Serif", "Cormorant Garamond", Georgia, serif';
const FONT_MONO = '"JetBrains Mono", ui-monospace, monospace';

// ═══════════════════════════════════════════════════════════════════════════
// BACKGROUND — animated, with grain & vignette
// ═══════════════════════════════════════════════════════════════════════════
function SceneBackground() {
  const t = useTime();
  let bg = COLORS.graphite;
  let dark = true;
  if (t >= 7 && t < 13) { bg = COLORS.offwhite; dark = false; }
  else if (t >= 13 && t < 16) { bg = COLORS.graphiteDeep; dark = true; }
  else if (t >= 16 && t < 20) { bg = COLORS.offwhite; dark = false; }
  else if (t >= 20 && t < 24) { bg = COLORS.graphite; dark = true; }
  else if (t >= 24 && t < 27) { bg = COLORS.cream; dark = false; }

  if (t >= 27) {
    const splitProgress = clamp((t - 27) / 0.6, 0, 1);
    const splitX = Easing.easeOutCubic(splitProgress) * 100;
    return (
      <div style={{ position: 'absolute', inset: 0 }}>
        <div style={{ position: 'absolute', inset: 0, background: COLORS.graphite }} />
        <div style={{
          position: 'absolute', inset: 0, background: COLORS.cream,
          clipPath: `polygon(${splitX}% 0, 100% 0, 100% 100%, ${splitX}% 100%)`,
        }} />
        <Vignette dark={false} />
      </div>
    );
  }

  return (
    <>
      <div style={{ position: 'absolute', inset: 0, background: bg, transition: 'background 500ms ease' }} />
      <Vignette dark={dark} />
    </>
  );
}

function Vignette({ dark }) {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: dark
        ? 'radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.5) 100%)'
        : 'radial-gradient(ellipse at center, transparent 60%, rgba(30,34,36,0.08) 100%)',
    }} />
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TRANSITIONS — dramatic
// ═══════════════════════════════════════════════════════════════════════════
function CircularWipe({ start, fillColor = COLORS.orange, duration = 0.7 }) {
  const t = useTime();
  if (t < start - 0.2 || t > start + duration + 0.4) return null;
  const phase1 = clamp((t - start) / duration, 0, 1); // expand
  const phase2 = clamp((t - start - duration) / 0.4, 0, 1); // shrink reveal
  const e1 = Easing.easeInOutCubic(phase1);
  const e2 = Easing.easeInOutCubic(phase2);
  const r1 = e1 * 2400;
  const r2 = e2 * 2400;
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: fillColor,
      clipPath: `circle(${r1 - r2}px at 50% 50%)`,
    }} />
  );
}

function FlashCut({ start, color = '#fff', duration = 0.18 }) {
  const t = useTime();
  if (t < start || t > start + duration) return null;
  const local = (t - start) / duration;
  const opacity = local < 0.3 ? local / 0.3 : 1 - (local - 0.3) / 0.7;
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: color, opacity: opacity * 0.9,
      mixBlendMode: 'screen',
    }} />
  );
}

function ScreenShake({ start, end, intensity = 8, children }) {
  const t = useTime();
  const active = t >= start && t <= end;
  const shake = active
    ? { x: (Math.random() - 0.5) * intensity, y: (Math.random() - 0.5) * intensity }
    : { x: 0, y: 0 };
  return (
    <div style={{
      position: 'absolute', inset: 0,
      transform: `translate(${shake.x}px, ${shake.y}px)`,
    }}>
      {children}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// KINETIC TYPOGRAPHY — words ripping across screen
// ═══════════════════════════════════════════════════════════════════════════
function MarqueeText({ start, end, text, y, speed = 600, size = 120, color = COLORS.orange, italic = true, opacity = 1 }) {
  const t = useTime();
  if (t < start || t > end) return null;
  const local = t - start;
  const x = 1920 - (local * speed);
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      fontFamily: italic ? FONT_SERIF : FONT_SANS,
      fontStyle: italic ? 'italic' : 'normal',
      fontSize: size,
      fontWeight: italic ? 400 : 700,
      color,
      letterSpacing: '-0.03em',
      whiteSpace: 'nowrap',
      opacity,
      mixBlendMode: 'difference',
      pointerEvents: 'none',
    }}>
      {text}
    </div>
  );
}

// SplitText: word reveal with stagger and serif italic on accent
function SplitHeadline({ words, x = 960, y = 540, size = 64, dark = true, align = 'center', accentColor = COLORS.orange }) {
  const { localTime, duration } = useSprite();
  const exitDur = 0.4;
  const exitStart = duration - exitDur;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(${align === 'center' ? '-50%' : '0'}, 0)`,
      fontFamily: FONT_SANS,
      fontSize: size,
      fontWeight: 600,
      letterSpacing: '-0.025em',
      color: dark ? COLORS.textLight : COLORS.textDark,
      lineHeight: 1.05,
      textAlign: align,
      whiteSpace: 'nowrap',
      pointerEvents: 'none',
    }}>
      {words.map((w, i) => {
        const delay = i * 0.07;
        const entryT = clamp((localTime - delay) / 0.5, 0, 1);
        const e = Easing.easeOutCubic(entryT);
        let opacity = e;
        let ty = (1 - e) * 24;
        if (localTime > exitStart) {
          const ex = Easing.easeInCubic(clamp((localTime - exitStart) / exitDur, 0, 1));
          opacity *= 1 - ex;
          ty -= ex * 12;
        }
        const isAccent = w.italic;
        return (
          <span key={i} style={{ display: 'inline-block', marginRight: w.text === ',' || w.text === '.' ? 0 : '0.25em' }}>
            <span style={{
              display: 'inline-block',
              opacity,
              transform: `translateY(${ty}px)`,
              fontFamily: isAccent ? FONT_SERIF : FONT_SANS,
              fontStyle: isAccent ? 'italic' : 'normal',
              fontWeight: isAccent ? 400 : 600,
              color: isAccent ? accentColor : 'inherit',
            }}>
              {w.text}
            </span>
          </span>
        );
      })}
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CHIPS & CARDS
// ═══════════════════════════════════════════════════════════════════════════
function Chip({ label, x, y, dark = true, rot = 0, delay = 0, accent = false, size = 'md', icon, exitAt }) {
  const { localTime, duration } = useSprite();
  const t = clamp((localTime - delay) / 0.45, 0, 1);
  const e = Easing.easeOutBack(t);
  let opacity = clamp(t * 1.4, 0, 1);
  let extraY = 0;
  let extraScale = 1;

  // Optional collapse-on-exit
  if (exitAt != null && localTime >= exitAt) {
    const ex = clamp((localTime - exitAt) / 0.5, 0, 1);
    const exE = Easing.easeInQuad(ex);
    opacity *= 1 - exE;
    extraScale = 1 - exE * 0.4;
    // suck toward center
    const cx = 960, cy = 540;
    extraY = 0;
    return (
      <div style={{
        position: 'absolute',
        left: x + (cx - x) * exE,
        top: y + (cy - y) * exE,
        transform: `translate(-50%, -50%) scale(${(0.7 + 0.3 * e) * extraScale}) rotate(${rot + ex * 180}deg)`,
        opacity, padding: size === 'sm' ? '7px 12px' : size === 'lg' ? '12px 18px' : '9px 14px',
        borderRadius: 999,
        background: dark ? COLORS.graphiteCard : COLORS.cream,
        color: dark ? COLORS.textLight : COLORS.textDark,
        border: `1px solid ${accent ? COLORS.orange : (dark ? COLORS.borderLight : COLORS.borderDark)}`,
        fontFamily: FONT_SANS,
        fontSize: size === 'sm' ? 13 : size === 'lg' ? 17 : 14,
        fontWeight: 500,
        whiteSpace: 'nowrap',
        boxShadow: dark ? '0 8px 24px rgba(0,0,0,0.4)' : '0 4px 16px rgba(30,34,36,0.08)',
      }}>
        {icon && <span style={{ marginRight: 6 }}>{icon}</span>}
        {label}
      </div>
    );
  }

  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      transform: `translate(-50%, -50%) scale(${0.6 + 0.4 * e}) rotate(${rot}deg)`,
      opacity,
      padding: size === 'sm' ? '7px 12px' : size === 'lg' ? '12px 18px' : '9px 14px',
      borderRadius: 999,
      background: dark ? COLORS.graphiteCard : COLORS.cream,
      color: dark ? COLORS.textLight : COLORS.textDark,
      border: `1px solid ${accent ? COLORS.orange : (dark ? COLORS.borderLight : COLORS.borderDark)}`,
      fontFamily: FONT_SANS,
      fontSize: size === 'sm' ? 13 : size === 'lg' ? 17 : 14,
      fontWeight: 500,
      letterSpacing: '-0.01em',
      whiteSpace: 'nowrap',
      boxShadow: dark ? '0 8px 24px rgba(0,0,0,0.4)' : '0 4px 16px rgba(30,34,36,0.08)',
      willChange: 'transform, opacity',
    }}>
      {icon && <span style={{ marginRight: 6, color: COLORS.orange }}>{icon}</span>}
      {label}
    </div>
  );
}

function HeroAsset({ src, x = 960, y = 540, size = 480, dark = true, rotate = 0, drift = 0, breathe = 0, kenBurns = 0 }) {
  const { localTime, progress } = useSprite();
  const entry = clamp(localTime / 0.7, 0, 1);
  const e = Easing.easeOutCubic(entry);
  const breatheS = breathe ? 1 + Math.sin(localTime * 1.2) * breathe : 1;
  const kbS = kenBurns ? 1 + progress * kenBurns : 1;
  const scale = (0.92 + 0.08 * e) * breatheS * kbS;
  const opacity = e;
  const driftY = Math.sin(localTime * 1.0) * drift;
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: size, height: size,
      transform: `translate(-50%, calc(-50% + ${driftY}px)) scale(${scale}) rotate(${rotate}deg)`,
      opacity,
      filter: dark
        ? 'drop-shadow(0 0 80px rgba(255,107,26,0.3)) drop-shadow(0 30px 50px rgba(0,0,0,0.6))'
        : 'drop-shadow(0 16px 40px rgba(30,34,36,0.18))',
      willChange: 'transform, opacity',
    }}>
      <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }} />
    </div>
  );
}

// Subtle moving grid background
function TechGrid({ dark = true, opacity = 0.08 }) {
  const t = useTime();
  const offset = (t * 30) % 80;
  return (
    <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity }} width="1920" height="1080">
      <defs>
        <pattern id="grid" x={offset} y={offset} width="80" height="80" patternUnits="userSpaceOnUse">
          <path d="M 80 0 L 0 0 0 80" fill="none" stroke={dark ? '#fff' : '#000'} strokeWidth="1" />
        </pattern>
      </defs>
      <rect width="1920" height="1080" fill="url(#grid)" />
    </svg>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 1 — 0–4s — Information overload — heavy chaos buildup
// ═══════════════════════════════════════════════════════════════════════════
function Scene1() {
  const { localTime } = useSprite();
  const chips = [
    { label: 'ChatGPT', x: 360, y: 220, rot: -4, delay: 0.05 },
    { label: 'Claude', x: 1560, y: 200, rot: 3, delay: 0.1 },
    { label: 'Prompts', x: 240, y: 460, rot: 5, delay: 0.15, accent: true },
    { label: 'Agentes', x: 1680, y: 480, rot: -3, delay: 0.2 },
    { label: 'n8n', x: 320, y: 720, rot: 4, delay: 0.25 },
    { label: 'APIs', x: 1620, y: 740, rot: -4, delay: 0.3 },
    { label: 'RAG', x: 460, y: 880, rot: 2, delay: 0.35 },
    { label: 'Embeddings', x: 1480, y: 900, rot: -3, delay: 0.4 },
    { label: 'Tutoriais', x: 200, y: 600, rot: -3, delay: 0.45 },
    { label: '+1 vídeo salvo', x: 1700, y: 620, rot: 4, delay: 0.5, accent: true },
    { label: '+1 prompt', x: 540, y: 120, rot: -3, delay: 0.55 },
    { label: '+1 ferramenta', x: 1380, y: 100, rot: 3, delay: 0.6, accent: true },
    { label: 'MCP', x: 720, y: 940, rot: -2, delay: 0.65 },
    { label: 'Cursor', x: 1240, y: 940, rot: 3, delay: 0.7 },
    { label: 'LangChain', x: 180, y: 320, rot: -5, delay: 0.75 },
    { label: 'Make', x: 1740, y: 340, rot: 4, delay: 0.8 },
  ];
  const camShake = localTime > 2.8 ? Math.sin(localTime * 60) * 3 : 0;

  return (
    <ScreenShake start={2.8} end={3.6} intensity={3}>
      <TechGrid dark={true} opacity={0.05} />

      {/* Broken connector mess */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {[
          'M 360 220 L 700 380 L 540 500 L 800 600',
          'M 1560 200 L 1300 400 L 1480 540 L 1200 660',
          'M 240 460 L 600 600 L 380 780',
          'M 1680 480 L 1320 620 L 1500 800',
          'M 200 600 L 540 720 L 320 880',
          'M 1740 340 L 1380 480',
        ].map((d, i) => {
          const t = clamp((localTime - 0.4 - i * 0.06) / 0.7, 0, 1);
          return (
            <path key={i} d={d}
              stroke={COLORS.orange} strokeWidth="1.5" fill="none"
              strokeDasharray="6 8"
              strokeDashoffset={(1 - t) * 300}
              opacity={t * 0.35} />
          );
        })}
      </svg>

      <HeroAsset src={ASSETS.homem} x={960} y={540} size={540} dark={true} drift={6} breathe={0.015} />

      {/* Pulsing chromatic aberration as chaos peaks */}
      {localTime > 2.5 && (
        <div style={{
          position: 'absolute', left: 960, top: 540, width: 540, height: 540,
          transform: `translate(-50%, -50%)`,
          mixBlendMode: 'screen', opacity: 0.4,
        }}>
          <img src={ASSETS.homem} style={{
            width: '100%', height: '100%', objectFit: 'contain',
            transform: `translate(${camShake}px, 0)`,
            filter: 'hue-rotate(20deg)',
          }} />
        </div>
      )}

      {chips.map((c, i) => <Chip key={i} {...c} exitAt={3.5} />)}

      {/* Marquee word "INFORMAÇÃO" passing through */}
      <MarqueeText start={0.5} end={2.5} text="INFORMAÇÃO  •  INFORMAÇÃO  •  INFORMAÇÃO" y={60} size={90} color="rgba(255,107,26,0.18)" italic={false} />
      <MarqueeText start={1.0} end={3.0} text="ferramentas  •  prompts  •  agentes  •  APIs  •  tutoriais" y={1000} size={64} color="rgba(247,239,230,0.15)" italic={true} />

      <Sprite start={0.3} end={4}>
        <SplitHeadline
          words={[
            { text: 'Você' }, { text: 'não' }, { text: 'está' },
            { text: 'sem' }, { text: 'informação.' },
          ]}
          x={960} y={870} size={56} dark={true} />
      </Sprite>
      <Sprite start={1.6} end={4}>
        <SplitHeadline
          words={[
            { text: 'Você' }, { text: 'está' },
            { text: 'soterrado', italic: true },
            { text: 'por' }, { text: 'ela.' },
          ]}
          x={960} y={950} size={64} dark={true} />
      </Sprite>
    </ScreenShake>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 2 — 4–7s — Brain under pressure — orbit + glitch
// ═══════════════════════════════════════════════════════════════════════════
function Scene2() {
  const { localTime } = useSprite();
  const dots = Array.from({ length: 18 }, (_, i) => {
    const angle = (i / 18) * Math.PI * 2 + localTime * 0.7;
    const r = 320 + Math.sin(localTime * 2.5 + i) * 40;
    const x = 960 + Math.cos(angle) * r;
    const y = 480 + Math.sin(angle) * r * 0.7;
    const blink = (Math.sin(localTime * 5 + i * 1.3) + 1) / 2;
    return { x, y, blink, key: i };
  });

  const orbiters = [
    { label: 'notif', x: 380, y: 260, rot: -3, delay: 0.15, icon: '●' },
    { label: 'inbox', x: 1540, y: 280, rot: 3, delay: 0.3, icon: '●' },
    { label: 'task', x: 360, y: 700, rot: 2, delay: 0.45, icon: '●' },
    { label: 'TODO', x: 1560, y: 720, rot: -2, delay: 0.55, icon: '●' },
    { label: 'pendente', x: 240, y: 480, rot: -4, delay: 0.65, accent: true },
    { label: 'urgente', x: 1700, y: 500, rot: 4, delay: 0.75, accent: true },
  ];

  return (
    <>
      <TechGrid dark={true} opacity={0.04} />
      <HeroAsset src={ASSETS.cerebroPress} x={960} y={460} size={580} dark={true} drift={4} breathe={0.025} />

      {dots.map(d => (
        <div key={d.key} style={{
          position: 'absolute', left: d.x, top: d.y,
          width: 8, height: 8, borderRadius: 4,
          background: COLORS.orange,
          transform: 'translate(-50%, -50%)',
          opacity: 0.3 + d.blink * 0.7,
          boxShadow: `0 0 ${14 + d.blink * 12}px ${COLORS.orange}`,
        }} />
      ))}

      {/* Lines feeding INTO brain (input) but never out */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {[
          { from: [80, 200], to: [800, 460] },
          { from: [1840, 200], to: [1120, 460] },
          { from: [80, 760], to: [800, 480] },
          { from: [1840, 760], to: [1120, 480] },
          { from: [60, 480], to: [780, 480] },
          { from: [1860, 480], to: [1140, 480] },
        ].map((l, i) => {
          const dashOffset = -localTime * 60;
          return (
            <line key={i} x1={l.from[0]} y1={l.from[1]} x2={l.to[0]} y2={l.to[1]}
              stroke={COLORS.orange} strokeWidth="1.5"
              strokeDasharray="4 8" strokeDashoffset={dashOffset}
              opacity={0.5} />
          );
        })}
      </svg>

      {orbiters.map((c, i) => <Chip key={i} {...c} />)}

      <Sprite start={0.2} end={3}>
        <SplitHeadline
          words={[
            { text: 'O' }, { text: 'problema' }, { text: 'não' }, { text: 'é' },
            { text: 'aprender' }, { text: 'mais.' },
          ]}
          x={960} y={870} size={52} />
      </Sprite>
      <Sprite start={1.5} end={3}>
        <SplitHeadline
          words={[
            { text: 'É' }, { text: 'não' }, { text: 'saber' }, { text: 'onde' },
            { text: 'encaixar.', italic: true },
          ]}
          x={960} y={950} size={60} />
      </Sprite>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 3 — 7–10s — Inner chaos — head opens, fragments fly out
// ═══════════════════════════════════════════════════════════════════════════
function Scene3() {
  const { localTime } = useSprite();
  const items = ['Clareza', 'Método', 'Stack', 'Execução', 'Projeto'];
  // Floating fragments coming OUT of head
  const fragments = Array.from({ length: 14 }, (_, i) => {
    const baseAngle = -Math.PI / 2 + (i / 14 - 0.5) * Math.PI * 0.8;
    const dist = 80 + (i % 4) * 60 + localTime * 30;
    const x = 620 + Math.cos(baseAngle) * dist;
    const y = 380 + Math.sin(baseAngle) * dist - localTime * 40;
    const opacity = clamp(1 - (localTime - 0.5) * 0.2 - (i % 5) * 0.1, 0, 1);
    return { x, y, opacity, key: i, label: ['{}', '[]', '01', '<>', '⌘', '#'][i % 6] };
  });

  return (
    <>
      <HeroAsset src={ASSETS.cabecaCaos} x={620} y={500} size={640} dark={false} drift={5} breathe={0.018} />

      {fragments.map(f => (
        <div key={f.key} style={{
          position: 'absolute', left: f.x, top: f.y,
          transform: 'translate(-50%, -50%)',
          fontFamily: FONT_MONO, fontSize: 16,
          color: COLORS.orange,
          opacity: f.opacity * 0.7,
        }}>
          {f.label}
        </div>
      ))}

      {/* Right column — cards lighting up sequentially */}
      {items.map((label, i) => {
        const delay = 0.4 + i * 0.18;
        const t = clamp((localTime - delay) / 0.6, 0, 1);
        const e = Easing.easeOutCubic(t);
        const lit = localTime >= delay + 0.4;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: 1200, top: 280 + i * 92,
            width: 380, padding: '20px 26px',
            borderRadius: 22,
            background: lit ? COLORS.cream : 'rgba(255,248,240,0.4)',
            border: `1px solid ${lit ? COLORS.orange : COLORS.borderDark}`,
            opacity: 0.3 + e * 0.7,
            transform: `translateX(${(1 - e) * 30}px)`,
            fontFamily: FONT_SANS,
            fontSize: 24, fontWeight: 600,
            color: COLORS.textDark,
            letterSpacing: '-0.015em',
            display: 'flex', alignItems: 'center', gap: 14,
            boxShadow: lit ? `0 8px 24px rgba(255,107,26,0.18)` : '0 4px 16px rgba(30,34,36,0.06)',
            transition: 'background 250ms, border-color 250ms',
          }}>
            <div style={{
              width: 10, height: 10, borderRadius: 5,
              background: lit ? COLORS.orange : 'rgba(30,34,36,0.2)',
              boxShadow: lit ? `0 0 14px ${COLORS.orange}` : 'none',
            }} />
            {label}
            <span style={{
              marginLeft: 'auto', fontFamily: FONT_MONO, fontSize: 14,
              color: lit ? COLORS.orange : 'rgba(30,34,36,0.3)',
            }}>
              {String(i + 1).padStart(2, '0')}
            </span>
          </div>
        );
      })}

      {/* Failed line trying to connect */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        <path
          d={`M 880 480 Q ${1040 + Math.sin(localTime * 4) * 30} ${380 + Math.cos(localTime * 3) * 20} 1180 320`}
          stroke={COLORS.orange} strokeWidth="2" fill="none"
          strokeDasharray="4 8"
          opacity={0.6} />
      </svg>

      <Sprite start={0.3} end={3}>
        <SplitHeadline
          words={[
            { text: 'Você' }, { text: 'sabe' }, { text: 'que' },
            { text: 'existe' }, { text: 'potencial.' },
          ]}
          x={960} y={880} size={50} dark={false} />
      </Sprite>
      <Sprite start={1.6} end={3}>
        <SplitHeadline
          words={[
            { text: 'Mas' }, { text: 'ainda' }, { text: 'falta' },
            { text: 'método.', italic: true },
          ]}
          x={960} y={960} size={60} dark={false} />
      </Sprite>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 4 — 10–13s — The reset cycle
// ═══════════════════════════════════════════════════════════════════════════
function Scene4() {
  const { localTime } = useSprite();
  const cycle = (localTime % 1.3) / 1.3;
  const progress = cycle < 0.85 ? Easing.easeOutQuad(cycle / 0.85) * 0.95 : (1 - (cycle - 0.85) / 0.15) * 0.12;
  const pct = Math.floor(progress * 100);
  const resetting = cycle >= 0.85;

  const microTexts = [
    { text: 'vou estudar mais um pouco', x: 360, y: 300, delay: 0.2 },
    { text: 'só falta entender essa ferramenta', x: 1500, y: 260, delay: 0.5 },
    { text: 'depois eu começo', x: 320, y: 720, delay: 0.9 },
    { text: 'preciso ver mais um tutorial', x: 1520, y: 760, delay: 1.3 },
    { text: 'amanhã eu foco de verdade', x: 960, y: 200, delay: 1.7 },
  ];

  return (
    <>
      <HeroAsset src={ASSETS.cabecaProgresso} x={960} y={480} size={520} dark={false} drift={3} />

      {/* Progress bar with reset flash */}
      <div style={{
        position: 'absolute', left: 660, top: 760,
        width: 600, height: 12, borderRadius: 6,
        background: 'rgba(30,34,36,0.1)',
        overflow: 'hidden',
        boxShadow: resetting ? `0 0 16px ${COLORS.orange}` : 'none',
        transition: 'box-shadow 100ms',
      }}>
        <div style={{
          width: `${progress * 100}%`,
          height: '100%',
          background: `linear-gradient(90deg, ${COLORS.orangeDeep}, ${COLORS.orange})`,
          borderRadius: 6,
          transition: resetting ? 'none' : 'width 100ms linear',
        }} />
      </div>
      <div style={{
        position: 'absolute', left: 660, top: 710,
        fontFamily: FONT_MONO,
        fontSize: 22, color: resetting ? COLORS.orange : COLORS.textDark,
        fontWeight: 500,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <span style={{
          width: 10, height: 10, borderRadius: 5,
          background: resetting ? COLORS.orange : 'rgba(30,34,36,0.3)',
        }} />
        {pct.toString().padStart(2, '0')}%
        {resetting && <span style={{ fontSize: 14, opacity: 0.7 }}>↺ reset</span>}
      </div>
      <div style={{
        position: 'absolute', left: 1200, top: 710,
        fontFamily: FONT_MONO, fontSize: 14,
        color: 'rgba(30,34,36,0.5)',
        textAlign: 'right', width: 60,
      }}>
        100%
      </div>

      {microTexts.map((m, i) => {
        const t = clamp((localTime - m.delay) / 0.4, 0, 1);
        const fadeOut = clamp((localTime - m.delay - 1.2) / 0.4, 0, 1);
        return (
          <div key={i} style={{
            position: 'absolute', left: m.x, top: m.y,
            transform: `translate(-50%, ${(1 - t) * 8}px)`,
            opacity: t * 0.85 * (1 - fadeOut * 0.6),
            fontFamily: FONT_SANS,
            fontSize: 18, fontStyle: 'italic',
            color: COLORS.textDark,
            background: COLORS.cream,
            padding: '12px 18px',
            borderRadius: 16,
            border: `1px solid ${COLORS.borderDark}`,
            whiteSpace: 'nowrap',
            boxShadow: '0 4px 12px rgba(30,34,36,0.06)',
          }}>
            "{m.text}"
          </div>
        );
      })}

      <Sprite start={0.3} end={3}>
        <SplitHeadline
          words={[{ text: 'Você' }, { text: 'quase' }, { text: 'começa.' }]}
          x={960} y={870} size={52} dark={false} />
      </Sprite>
      <Sprite start={1.5} end={3}>
        <SplitHeadline
          words={[
            { text: 'Mas' }, { text: 'reinicia' }, { text: 'o' },
            { text: 'ciclo.', italic: true },
          ]}
          x={960} y={950} size={60} dark={false} />
      </Sprite>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 5 — 13–16s — TANGLE — climax. tools trapped, dramatic
// ═══════════════════════════════════════════════════════════════════════════
function Scene5() {
  const { localTime } = useSprite();
  const rot = localTime * 6;

  const trapped = [
    { label: 'IA', x: 540, y: 360, delay: 0.3 },
    { label: 'Conteúdo', x: 1380, y: 340, delay: 0.4 },
    { label: 'Automação', x: 500, y: 720, delay: 0.5 },
    { label: 'Código', x: 1420, y: 700, delay: 0.6 },
    { label: 'Dados', x: 720, y: 200, delay: 0.7 },
    { label: 'Vendas', x: 1200, y: 880, delay: 0.8 },
  ];

  // Stuck dot trying to escape
  const dotAngle = localTime * 1.2;
  const dotR = 220 + Math.sin(localTime * 3) * 50;
  const dotX = 960 + Math.cos(dotAngle * 1.3) * dotR;
  const dotY = 540 + Math.sin(dotAngle * 2.1) * dotR * 0.7;

  // Big background word
  const bgWordOpacity = clamp((localTime - 0.2) / 0.5, 0, 1) * 0.06;

  return (
    <>
      {/* Massive background word */}
      <div style={{
        position: 'absolute', left: 960, top: 540,
        transform: `translate(-50%, -50%) scale(${1 + localTime * 0.04})`,
        fontFamily: FONT_SANS,
        fontSize: 380, fontWeight: 800,
        color: COLORS.orange,
        opacity: bgWordOpacity,
        letterSpacing: '-0.05em',
        whiteSpace: 'nowrap',
        pointerEvents: 'none',
      }}>
        CAOS
      </div>

      {/* Spotlight on tangle */}
      <div style={{
        position: 'absolute', left: 960, top: 540,
        width: 900, height: 900,
        transform: 'translate(-50%, -50%)',
        background: 'radial-gradient(circle, rgba(255,107,26,0.15) 0%, transparent 60%)',
        opacity: 0.7,
      }} />

      <HeroAsset src={ASSETS.emaranhado} x={960} y={540} size={720} dark={true} rotate={rot * 0.4} drift={5} breathe={0.02} />

      {/* Stuck dot with trail */}
      <div style={{
        position: 'absolute', left: dotX, top: dotY,
        width: 18, height: 18, borderRadius: 9,
        background: COLORS.orangeBright,
        transform: 'translate(-50%, -50%)',
        boxShadow: `0 0 32px ${COLORS.orange}, 0 0 64px ${COLORS.orange}`,
      }} />

      {trapped.map((c, i) => <Chip key={i} {...c} dark={true} accent={true} size="lg" />)}

      {/* Text 1: "Não é falta de ferramenta." appears, then gets struck through */}
      <Sprite start={0.4} end={1.9}>
        <StrikethroughLine />
      </Sprite>

      {/* Text 2: huge dramatic "É falta de ESTRUTURA" */}
      <Sprite start={1.9} end={3}>
        <BigImpactText />
      </Sprite>

      <FlashCut start={1.85} duration={0.2} color={COLORS.orange} />
    </>
  );
}

function StrikethroughLine() {
  const { localTime, duration } = useSprite();
  const e = Easing.easeOutCubic(clamp(localTime / 0.4, 0, 1));
  const strike = clamp((localTime - 0.9) / 0.3, 0, 1);
  const exit = clamp((localTime - duration + 0.4) / 0.4, 0, 1);
  return (
    <div style={{
      position: 'absolute', left: 960, top: 920,
      transform: `translate(-50%, ${(1 - e) * 12 - exit * 8}px)`,
      opacity: e * (1 - exit),
      fontFamily: FONT_SANS,
      fontSize: 56, fontWeight: 600,
      color: COLORS.textLight,
      letterSpacing: '-0.025em',
      whiteSpace: 'nowrap',
      position: 'absolute',
    }}>
      <span style={{ position: 'relative', display: 'inline-block' }}>
        Não é falta de <span style={{ fontFamily: FONT_SERIF, fontStyle: 'italic', fontWeight: 400 }}>ferramenta</span>.
        <span style={{
          position: 'absolute',
          left: 0, right: 0, top: '50%',
          height: 4, background: COLORS.orange,
          width: `${strike * 100}%`,
          boxShadow: `0 0 12px ${COLORS.orange}`,
        }} />
      </span>
    </div>
  );
}

function BigImpactText() {
  const { localTime } = useSprite();
  const e = Easing.easeOutBack(clamp(localTime / 0.5, 0, 1));
  return (
    <div style={{
      position: 'absolute', left: 960, top: 540,
      transform: `translate(-50%, -50%) scale(${0.8 + e * 0.2})`,
      opacity: clamp(localTime / 0.3, 0, 1),
      fontFamily: FONT_SANS,
      fontSize: 88, fontWeight: 700,
      color: COLORS.textLight,
      letterSpacing: '-0.03em',
      lineHeight: 1.0,
      textAlign: 'center',
      textShadow: `0 0 40px rgba(0,0,0,0.8)`,
      whiteSpace: 'nowrap',
    }}>
      É falta de{' '}
      <span style={{
        fontFamily: FONT_SERIF, fontStyle: 'italic',
        fontWeight: 400, color: COLORS.orange,
        fontSize: 140,
      }}>
        estrutura
      </span>.
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 6 — 16–20s — Architecture forms
// ═══════════════════════════════════════════════════════════════════════════
function Scene6() {
  const { localTime } = useSprite();

  const labels = [
    { label: 'Fundamentos', angle: 0 },
    { label: 'Prompting', angle: 36 },
    { label: 'Claude Code', angle: 72 },
    { label: 'Automações', angle: 108 },
    { label: 'Agentes', angle: 144 },
    { label: 'APIs', angle: 180 },
    { label: 'Sistemas', angle: 216 },
    { label: 'Conteúdo', angle: 252 },
    { label: 'Produto', angle: 288 },
    { label: 'Execução', angle: 324 },
  ];

  return (
    <>
      {/* Animated grid drawing in */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {Array.from({ length: 20 }).map((_, i) => {
          const t = clamp((localTime - 0.1 - i * 0.02) / 0.5, 0, 1);
          return (
            <line key={`v${i}`} x1={i * 100} y1="0" x2={i * 100} y2={t * 1080}
              stroke={COLORS.borderDark} strokeWidth="1" opacity={0.6} />
          );
        })}
        {Array.from({ length: 12 }).map((_, i) => {
          const t = clamp((localTime - 0.2 - i * 0.025) / 0.5, 0, 1);
          return (
            <line key={`h${i}`} x1="0" y1={i * 100} x2={t * 1920} y2={i * 100}
              stroke={COLORS.borderDark} strokeWidth="1" opacity={0.6} />
          );
        })}
      </svg>

      <HeroAsset src={ASSETS.cubo} x={960} y={500} size={580} dark={false} drift={4} kenBurns={0.05} />

      {labels.map((l, i) => {
        const delay = 0.5 + i * 0.09;
        const t = clamp((localTime - delay) / 0.5, 0, 1);
        const e = Easing.easeOutBack(t);
        const rad = (l.angle * Math.PI) / 180;
        const r = 400;
        const x = 960 + Math.cos(rad) * r;
        const y = 500 + Math.sin(rad) * r * 0.85;
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            transform: `translate(-50%, -50%) scale(${0.6 + e * 0.4})`,
            opacity: clamp(t * 1.4, 0, 1),
            padding: '10px 16px',
            borderRadius: 999,
            background: COLORS.cream,
            border: `1px solid ${COLORS.orange}`,
            fontFamily: FONT_SANS,
            fontSize: 15, fontWeight: 600,
            color: COLORS.textDark,
            whiteSpace: 'nowrap',
            boxShadow: '0 6px 18px rgba(255,107,26,0.15)',
          }}>
            <span style={{
              display: 'inline-block', width: 6, height: 6, borderRadius: 3,
              background: COLORS.orange, marginRight: 8, verticalAlign: 'middle',
              boxShadow: `0 0 8px ${COLORS.orange}`,
            }} />
            {l.label}
          </div>
        );
      })}

      {/* Lines from cube to each label */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {labels.map((l, i) => {
          const delay = 0.5 + i * 0.09 + 0.3;
          const t = clamp((localTime - delay) / 0.4, 0, 1);
          const rad = (l.angle * Math.PI) / 180;
          const r = 400;
          const x = 960 + Math.cos(rad) * r;
          const y = 500 + Math.sin(rad) * r * 0.85;
          const cx = 960 + Math.cos(rad) * 220;
          const cy = 500 + Math.sin(rad) * 220 * 0.85;
          const tx = cx + (x - cx) * t;
          const ty = cy + (y - cy) * t;
          return (
            <line key={i} x1={cx} y1={cy} x2={tx} y2={ty}
              stroke={COLORS.orange} strokeWidth="1.5" opacity={t * 0.6}
              strokeDasharray="3 5" />
          );
        })}
      </svg>

      <Sprite start={0.4} end={2.3}>
        <SplitHeadline
          words={[
            { text: 'A' }, { text: 'mentoria' }, { text: 'não' },
            { text: 'te' }, { text: 'entrega' }, { text: 'só' }, { text: 'ferramentas.' },
          ]}
          x={960} y={920} size={42} dark={false} />
      </Sprite>
      <Sprite start={2.4} end={4}>
        <SplitHeadline
          words={[
            { text: 'Ela' }, { text: 'te' }, { text: 'dá' },
            { text: 'arquitetura', italic: true },
            { text: 'para' }, { text: 'construir.' },
          ]}
          x={960} y={920} size={50} dark={false} />
      </Sprite>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 7 — 20–24s — Steps lighting + flow
// ═══════════════════════════════════════════════════════════════════════════
function Scene7() {
  const { localTime } = useSprite();

  const steps = [
    'Entender IA',
    'Prompts com intenção',
    'Usar Claude Code',
    'Automatizar fluxos',
    'Criar agentes',
    'Construir sistemas',
    'Aplicar em marketing',
    'Transformar em oportunidade',
  ];

  return (
    <>
      <TechGrid dark={true} opacity={0.04} />

      {/* Side brain (organized, lateral) */}
      <div style={{
        position: 'absolute', left: 1500, top: 240,
        width: 380, height: 380,
        opacity: clamp(localTime / 0.8, 0, 1) * 0.85,
        filter: 'drop-shadow(0 0 60px rgba(255,107,26,0.3))',
      }}>
        <img src={ASSETS.cerebro} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>

      {/* Steps stack with active sweep */}
      <div style={{
        position: 'absolute', left: 180, top: 160,
        width: 720,
        display: 'flex', flexDirection: 'column', gap: 10,
      }}>
        {steps.map((s, i) => {
          const delay = 0.2 + i * 0.16;
          const t = clamp((localTime - delay) / 0.45, 0, 1);
          const e = Easing.easeOutCubic(t);
          const active = localTime >= delay && localTime <= delay + 0.9;
          const done = localTime > delay + 0.9;
          return (
            <div key={i} style={{
              padding: '16px 22px',
              borderRadius: 18,
              background: active ? 'rgba(255,107,26,0.18)' : (done ? 'rgba(255,107,26,0.06)' : COLORS.graphiteCard),
              border: `1px solid ${active ? COLORS.orange : (done ? 'rgba(255,107,26,0.4)' : COLORS.borderLight)}`,
              opacity: e,
              transform: `translateX(${(1 - e) * 24}px)`,
              fontFamily: FONT_SANS,
              fontSize: 21, fontWeight: 500,
              color: COLORS.textLight,
              letterSpacing: '-0.015em',
              display: 'flex', alignItems: 'center', gap: 14,
              boxShadow: active ? `0 0 28px rgba(255,107,26,0.35)` : '0 4px 16px rgba(0,0,0,0.3)',
              transition: 'all 200ms',
            }}>
              <span style={{
                fontFamily: FONT_MONO, fontSize: 13,
                color: active ? COLORS.orange : (done ? COLORS.orange : 'rgba(247,239,230,0.5)'),
                width: 24,
              }}>
                {String(i + 1).padStart(2, '0')}
              </span>
              <div style={{
                width: 8, height: 8, borderRadius: 4,
                background: active ? COLORS.orange : (done ? COLORS.orange : 'rgba(247,239,230,0.3)'),
                boxShadow: active ? `0 0 14px ${COLORS.orange}` : 'none',
              }} />
              {s}
              {done && (
                <svg width="18" height="18" viewBox="0 0 24 24" style={{ marginLeft: 'auto' }}>
                  <path d="M5 12l5 5L20 7" stroke={COLORS.orange} strokeWidth="3" fill="none" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              )}
            </div>
          );
        })}
      </div>

      <Sprite start={1.8} end={4}>
        <MiniFlow />
      </Sprite>

      <Sprite start={0.3} end={2.0}>
        <SplitHeadline
          words={[{ text: 'Você' }, { text: 'deixa' }, { text: 'de' }, { text: 'consumir' }, { text: 'IA.' }]}
          x={960} y={970} size={40} />
      </Sprite>
      <Sprite start={2.1} end={4}>
        <SplitHeadline
          words={[
            { text: 'E' }, { text: 'começa' }, { text: 'a' },
            { text: 'construir', italic: true },
            { text: 'com' }, { text: 'ela.' },
          ]}
          x={960} y={970} size={46} />
      </Sprite>
    </>
  );
}

function MiniFlow() {
  const { localTime } = useSprite();
  const steps = ['Ideia', 'Prompt', 'Código', 'Automação', 'Sistema', 'Resultado'];
  const W = 1300;
  const stepW = W / (steps.length - 1);
  const startX = (1920 - W) / 2;

  const dotProgress = clamp(localTime / 1.6, 0, 1);
  const dotE = Easing.easeInOutCubic(dotProgress);
  const dotX = startX + dotE * W;

  return (
    <>
      <svg style={{ position: 'absolute', left: 0, top: 880, pointerEvents: 'none' }} width="1920" height="40">
        <line x1={startX} y1="20" x2={startX + W} y2="20" stroke={COLORS.orange} strokeWidth="1.5" strokeDasharray="4 6" opacity="0.5" />
        <line x1={startX} y1="20" x2={dotX} y2="20" stroke={COLORS.orange} strokeWidth="2.5" opacity="0.9" />
      </svg>
      {steps.map((s, i) => {
        const x = startX + i * stepW;
        const reached = dotX >= x - 5;
        return (
          <div key={i} style={{
            position: 'absolute',
            left: x, top: 880,
            transform: 'translate(-50%, -50%)',
            padding: '8px 14px',
            borderRadius: 999,
            background: reached ? COLORS.orange : COLORS.graphiteCard,
            border: `1px solid ${reached ? COLORS.orange : COLORS.borderLight}`,
            fontFamily: FONT_MONO,
            fontSize: 13,
            color: reached ? '#fff' : COLORS.textLight,
            fontWeight: 600,
            whiteSpace: 'nowrap',
            transition: 'background 200ms',
          }}>
            {s}
          </div>
        );
      })}
      <div style={{
        position: 'absolute', left: dotX, top: 880,
        transform: 'translate(-50%, -50%)',
        width: 16, height: 16, borderRadius: 8,
        background: COLORS.orangeBright,
        boxShadow: `0 0 24px ${COLORS.orange}, 0 0 48px ${COLORS.orange}`,
      }} />
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 8 — 24–27s — Nucleus
// ═══════════════════════════════════════════════════════════════════════════
function Scene8() {
  const { localTime } = useSprite();
  const pulse = 1 + Math.sin(localTime * 3) * 0.04;

  const modules = [
    { label: 'Estratégia', angle: -90 },
    { label: 'IA', angle: -30 },
    { label: 'Automação', angle: 30 },
    { label: 'Software', angle: 90 },
    { label: 'Marketing', angle: 150 },
    { label: 'Dados', angle: 210 },
  ];

  return (
    <>
      {/* Soft radial gradient glow */}
      <div style={{
        position: 'absolute', left: 960, top: 480,
        width: 900, height: 900,
        transform: 'translate(-50%, -50%)',
        background: `radial-gradient(circle, rgba(255,107,26,0.25) 0%, transparent 60%)`,
        opacity: 0.5 + Math.sin(localTime * 3) * 0.2,
      }} />

      {/* Concentric pulse rings */}
      {[0, 0.4, 0.8].map((offset, i) => {
        const phase = ((localTime + offset) % 1.2) / 1.2;
        const r = 200 + phase * 320;
        const op = (1 - phase) * 0.4;
        return (
          <div key={i} style={{
            position: 'absolute', left: 960, top: 480,
            width: r * 2, height: r * 2, borderRadius: '50%',
            transform: 'translate(-50%, -50%)',
            border: `1.5px solid ${COLORS.orange}`,
            opacity: op,
          }} />
        );
      })}

      <HeroAsset src={ASSETS.nucleo} x={960} y={480} size={520 * pulse} dark={false} />

      {modules.map((m, i) => {
        const delay = 0.3 + i * 0.12;
        const t = clamp((localTime - delay) / 0.6, 0, 1);
        const e = Easing.easeOutBack(t);
        const rad = (m.angle * Math.PI) / 180;
        const r = 380;
        const x = 960 + Math.cos(rad) * r;
        const y = 480 + Math.sin(rad) * r * 0.85;
        return (
          <div key={i} style={{
            position: 'absolute', left: x, top: y,
            transform: `translate(-50%, -50%) scale(${0.6 + e * 0.4})`,
            opacity: clamp(t * 1.4, 0, 1),
            padding: '12px 22px',
            borderRadius: 22,
            background: COLORS.cream,
            border: `1.5px solid ${COLORS.orange}`,
            fontFamily: FONT_SANS,
            fontSize: 19, fontWeight: 600,
            color: COLORS.textDark,
            letterSpacing: '-0.015em',
            whiteSpace: 'nowrap',
            boxShadow: `0 8px 28px rgba(255,107,26,0.2)`,
          }}>
            {m.label}
          </div>
        );
      })}

      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {modules.map((m, i) => {
          const delay = 0.3 + i * 0.12;
          const t = clamp((localTime - delay - 0.4) / 0.5, 0, 1);
          const rad = (m.angle * Math.PI) / 180;
          const r = 380;
          const x = 960 + Math.cos(rad) * r;
          const y = 480 + Math.sin(rad) * r * 0.85;
          const dashPos = -localTime * 30;
          return (
            <line key={i} x1="960" y1="480" x2={x} y2={y}
              stroke={COLORS.orange} strokeWidth="1.5"
              opacity={t * 0.55}
              strokeDasharray="3 6" strokeDashoffset={dashPos} />
          );
        })}
      </svg>

      <Sprite start={0.3} end={2.0}>
        <SplitHeadline
          words={[
            { text: 'Quando' }, { text: 'você' }, { text: 'entende' },
            { text: 'a' }, { text: 'lógica,' },
          ]}
          x={960} y={920} size={42} dark={false} />
      </Sprite>
      <Sprite start={2.0} end={3}>
        <SplitHeadline
          words={[
            { text: 'cada' }, { text: 'ferramenta' }, { text: 'vira' },
            { text: 'extensão' }, { text: 'da' }, { text: 'sua' },
            { text: 'execução.', italic: true },
          ]}
          x={960} y={920} size={42} dark={false} />
      </Sprite>
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// SCENE 9 — 27–30s — Final
// ═══════════════════════════════════════════════════════════════════════════
function Scene9() {
  const { localTime } = useSprite();
  const pulse = 1 + Math.sin(localTime * 2.5) * 0.03;

  const results = [
    { label: 'clareza', x: 360, y: 280, delay: 0.3, side: 'dark' },
    { label: 'projetos', x: 1560, y: 260, delay: 0.4, side: 'light' },
    { label: 'automações', x: 300, y: 540, delay: 0.5, side: 'dark' },
    { label: 'agentes', x: 1620, y: 540, delay: 0.6, side: 'light' },
    { label: 'sistemas', x: 360, y: 800, delay: 0.7, side: 'dark' },
    { label: 'execução', x: 1560, y: 800, delay: 0.8, side: 'light' },
  ];

  return (
    <>
      {/* Cube faded behind */}
      <div style={{
        position: 'absolute', left: 960, top: 480,
        width: 620, height: 620,
        transform: `translate(-50%, -50%) rotate(${localTime * 8}deg)`,
        opacity: 0.18,
        filter: 'blur(2px)',
      }}>
        <img src={ASSETS.cubo} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>

      {/* Nucleus */}
      <div style={{
        position: 'absolute', left: 960, top: 480,
        width: 480 * pulse, height: 480 * pulse,
        transform: 'translate(-50%, -50%)',
        filter: 'drop-shadow(0 0 80px rgba(255,107,26,0.5))',
      }}>
        <img src={ASSETS.nucleo} alt="" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>

      {/* Connector lines */}
      <svg style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }} width="1920" height="1080">
        {results.map((r, i) => {
          const t = clamp((localTime - r.delay - 0.3) / 0.6, 0, 1);
          return (
            <line key={i} x1="960" y1="480" x2={r.x} y2={r.y}
              stroke={COLORS.orange} strokeWidth="1.5"
              opacity={t * 0.6}
              strokeDasharray="3 5" />
          );
        })}
      </svg>

      {results.map((r, i) => {
        const t = clamp((localTime - r.delay) / 0.5, 0, 1);
        const e = Easing.easeOutBack(t);
        const onDark = r.side === 'dark';
        return (
          <div key={i} style={{
            position: 'absolute', left: r.x, top: r.y,
            transform: `translate(-50%, -50%) scale(${0.7 + e * 0.3})`,
            opacity: clamp(t * 1.3, 0, 1),
            padding: '12px 22px',
            borderRadius: 999,
            background: onDark ? COLORS.graphiteCard : COLORS.cream,
            border: `1.5px solid ${COLORS.orange}`,
            fontFamily: FONT_SERIF, fontStyle: 'italic',
            fontSize: 26, fontWeight: 400,
            color: COLORS.orange,
            whiteSpace: 'nowrap',
            boxShadow: onDark ? '0 8px 28px rgba(0,0,0,0.5)' : '0 8px 28px rgba(255,107,26,0.2)',
          }}>
            {r.label}
          </div>
        );
      })}

      <Sprite start={0.5} end={1.7}>
        <FinalText text="Pare de testar ferramentas." />
      </Sprite>
      <Sprite start={1.8} end={3}>
        <FinalText text="Comece a " accent="construir" post=" com IA." />
      </Sprite>

      <Sprite start={2.3} end={3}>
        <CTA />
      </Sprite>
    </>
  );
}

function FinalText({ text, accent, post }) {
  const { localTime } = useSprite();
  const t = clamp(localTime / 0.4, 0, 1);
  const e = Easing.easeOutCubic(t);
  return (
    <div style={{
      position: 'absolute', left: 960, top: 110,
      transform: `translate(-50%, ${(1 - e) * 14}px)`,
      opacity: e,
      fontFamily: FONT_SANS,
      fontSize: 64, fontWeight: 700,
      letterSpacing: '-0.025em',
      lineHeight: 1.1,
      textAlign: 'center',
      color: COLORS.textLight,
      mixBlendMode: 'difference',
      whiteSpace: 'nowrap',
      pointerEvents: 'none',
    }}>
      {text}
      {accent && (
        <span style={{
          fontFamily: FONT_SERIF, fontStyle: 'italic',
          color: COLORS.orange, fontWeight: 400,
          mixBlendMode: 'normal',
        }}>{accent}</span>
      )}
      {post}
    </div>
  );
}

function CTA() {
  const { localTime } = useSprite();
  const t = clamp(localTime / 0.5, 0, 1);
  const e = Easing.easeOutBack(t);
  const glow = 0.5 + Math.sin(localTime * 4) * 0.3;
  const tweaks = (typeof window !== 'undefined' && window.__tweaks) || {};
  const label = tweaks.ctaLabel || 'Entrar na mentoria';
  const accent = tweaks.accentColor || COLORS.orange;
  return (
    <div style={{
      position: 'absolute', left: 960, top: 940,
      transform: `translate(-50%, -50%) scale(${0.8 + e * 0.2})`,
      opacity: clamp(t * 1.4, 0, 1),
      padding: '22px 44px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      fontFamily: FONT_SANS,
      fontSize: 24, fontWeight: 700,
      letterSpacing: '-0.01em',
      boxShadow: `0 0 ${30 + glow * 40}px ${accent}, 0 16px 32px rgba(0,0,0,0.5)`,
      display: 'flex', alignItems: 'center', gap: 14,
    }}>
      {label}
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
        <path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </div>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// CROSS-SCENE KINETIC OVERLAY — Words sweeping the entire timeline
// ═══════════════════════════════════════════════════════════════════════════
function KineticOverlay() {
  return (
    <>
      {/* SCENE 5 lead-in — big tension words flying */}
      <MarqueeText start={12.6} end={13.6} text="STOP" y={120} size={300} color="rgba(255,107,26,0.9)" italic={false} speed={2400} />

      {/* SCENE 6 reveal word */}
      <MarqueeText start={15.7} end={16.7} text="estrutura" y={420} size={260} color={COLORS.orange} italic={true} speed={1800} />

      {/* SCENE 7 momentum */}
      <MarqueeText start={19.7} end={20.7} text="construir  •  construir  •  construir" y={60} size={68} color="rgba(255,107,26,0.5)" italic={true} speed={1400} />

      {/* SCENE 8 build */}
      <MarqueeText start={23.7} end={24.7} text="sistema" y={80} size={140} color="rgba(255,107,26,0.6)" italic={true} speed={1600} />

      {/* SCENE 9 finale ribbon */}
      <MarqueeText start={26.8} end={28.0} text="execução  •  clareza  •  método  •  estrutura" y={40} size={56} color="rgba(255,107,26,0.7)" italic={true} speed={900} />
    </>
  );
}

// ═══════════════════════════════════════════════════════════════════════════
// TIME LABEL
// ═══════════════════════════════════════════════════════════════════════════
function TimeLabel() {
  const t = useTime();
  React.useEffect(() => {
    const sec = Math.floor(t);
    const stage = document.querySelector('[data-screen-label]');
    if (stage) stage.setAttribute('data-screen-label', `${sec}s`);
  }, [Math.floor(t)]);
  return null;
}

// ═══════════════════════════════════════════════════════════════════════════
// MAIN
// ═══════════════════════════════════════════════════════════════════════════
function MotionVideo({ tweaks }) {
  return (
    <div data-screen-label="0s" style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      <SceneBackground />

      {/* Dramatic transitions */}
      <CircularWipe start={6.7} fillColor={COLORS.orange} duration={0.5} />
      <FlashCut start={10.0} duration={0.15} color="#fff" />
      <CircularWipe start={12.7} fillColor={COLORS.graphiteDeep} duration={0.4} />
      <FlashCut start={13.0} duration={0.18} color={COLORS.orange} />
      <CircularWipe start={15.7} fillColor={COLORS.offwhite} duration={0.5} />
      <CircularWipe start={19.7} fillColor={COLORS.graphite} duration={0.5} />
      <FlashCut start={23.85} duration={0.15} color="#fff" />
      <CircularWipe start={23.7} fillColor={COLORS.cream} duration={0.5} />
      <FlashCut start={27.0} duration={0.2} color={COLORS.orange} />

      <Sprite start={0} end={4}><Scene1 /></Sprite>
      <Sprite start={4} end={7}><Scene2 /></Sprite>
      <Sprite start={7} end={10}><Scene3 /></Sprite>
      <Sprite start={10} end={13}><Scene4 /></Sprite>
      <Sprite start={13} end={16}><Scene5 /></Sprite>
      <Sprite start={16} end={20}><Scene6 /></Sprite>
      <Sprite start={20} end={24}><Scene7 /></Sprite>
      <Sprite start={24} end={27}><Scene8 /></Sprite>
      <Sprite start={27} end={30}><Scene9 /></Sprite>

      <KineticOverlay />

      <TimeLabel />

      {/* Brand mark */}
      <div style={{
        position: 'absolute', left: 48, top: 48,
        fontFamily: FONT_SANS,
        fontSize: 13, fontWeight: 700,
        letterSpacing: '0.18em',
        textTransform: 'uppercase',
        color: 'rgba(255,255,255,0.5)',
        mixBlendMode: 'difference',
        zIndex: 10,
      }}>
        YOHANN&nbsp;ESCHER · MENTORIA
      </div>

      {/* Time code badge */}
      <TimeCode />

      {/* Grain overlay */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        opacity: 0.04, mixBlendMode: 'overlay',
        backgroundImage: 'url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' width=\'100\' height=\'100\'%3E%3Cfilter id=\'n\'%3E%3CfeTurbulence baseFrequency=\'0.9\' numOctaves=\'2\'/%3E%3C/filter%3E%3Crect width=\'100\' height=\'100\' filter=\'url(%23n)\'/%3E%3C/svg%3E")',
        zIndex: 20,
      }} />
    </div>
  );
}

function TimeCode() {
  const t = useTime();
  return (
    <div style={{
      position: 'absolute', right: 48, top: 48,
      fontFamily: FONT_MONO,
      fontSize: 13, fontWeight: 500,
      color: 'rgba(255,255,255,0.5)',
      mixBlendMode: 'difference',
      letterSpacing: '0.05em',
      zIndex: 10,
    }}>
      <span style={{ color: COLORS.orange }}>●</span> REC&nbsp;&nbsp;{t.toFixed(2).padStart(5, '0')}s / 30.00s
    </div>
  );
}

Object.assign(window, { MotionVideo, COLORS, ASSETS, FONT_SANS, FONT_SERIF });