Como o filhote passou a olhar para o cursor.

/* ============================================================
   Sprite Hero — vídeo em loop + personagem que acompanha o cursor
   Vanilla JS, sem dependências. Programa IMERSO (/pipoca-cia/).

   Modos
   - 'static' : poster fixo (prefers-reduced-motion, saveData ou sem mídia).
   - 'video'  : o clipe original toca em loop no fundo (canvas oculto).
   - 'follow' : o ponteiro se move → o vídeo pausa no frame exato, o canvas
                da sprite assume desse mesmo frame e o personagem persegue
                o alvo definido pelo mapa de olhar.
   - 'resume' : o ponteiro parou (ou saiu) → o vídeo é posicionado na pose
                em que a sprite ficou e volta a tocar; o canvas some em fade.
   - 'sprite-play' : fallback quando o vídeo não pode tocar (autoplay
                bloqueado, erro de mídia): a própria sprite toca em loop.

   Sprite e vídeo compartilham a mesma linha do tempo (0–10 s), então o
   handoff entre eles é só uma troca de fonte no mesmo instante.
   ============================================================ */
import { asset } from './lib/asset.js';

export function mountSpriteHero(hero) {
  // ---------- Configuração da sprite sheet ----------
  // Todos os 240 frames do clipe (24 fps), em grade de 60 colunas x 4 linhas.
  const SPRITE = {
    src: asset('/media/puppy-sprite.jpg'),
    frames: 240,
    fps: 24,
    cols: 60,
    frameW: 384,
    frameH: 216,
  };
  const VIDEO_SRC = asset('/media/puppy-loop.mp4');
  const CLIP_DURATION = SPRITE.frames / SPRITE.fps; // 10 s
  const SPRITE_MAX_T = (SPRITE.frames - 1) / SPRITE.fps;
  const ASPECT = SPRITE.frameW / SPRITE.frameH;     // 16:9

  // ---------- Mapa de olhar (cursor → tempo no clipe) ----------
  const REST_T = 4.0; // pose frontal (fallback sem vídeo)
  const SWEEP = [
    [0.00, 1.05], // cabeça virada para a esquerda da tela
    [0.18, 1.70],
    [0.32, 2.35],
    [0.50, 4.00], // de frente
    [0.70, 5.00], // cabeça virada para a direita da tela
    [1.00, 5.70],
  ];
  const UP_ZONE   = { maxY: 0.12, tFrom: 6.65, tTo: 6.00 };
  const BONE_ZONE = { x0: 0.37, x1: 0.63, y0: 0.50, y1: 0.84, tFrom: 8.00, tTo: 8.62 };

  // ---------- Dinâmica ----------
  const FOLLOW_RATE = 9.0;      // 1/s — resposta ao cursor
  const MAX_SPEED   = 6.0;      // s de clipe por s real (evita strobing)
  const IDLE_MS     = 900;      // ponteiro parado por este tempo → vídeo retoma
  const SEEK_TIMEOUT_MS = 600;  // espera máxima pelo 'seeked' antes de tocar
  const PLAYBACK_CAP_S = 120;   // teto de reprodução contínua sem interação

  // ---------- Utilidades ----------
  const clamp = (v, a, b) => (v < a ? a : v > b ? b : v);
  const lerp = (a, b, t) => a + (b - a) * t;

  function piecewise(points, x) {
    if (x <= points[0][0]) return points[0][1];
    for (let i = 1; i < points.length; i++) {
      const x1 = points[i][0], y1 = points[i][1];
      if (x <= x1) {
        const x0 = points[i - 1][0], y0 = points[i - 1][1];
        const u = (x - x0) / (x1 - x0);
        const s = u * u * (3 - 2 * u); // smoothstep
        return lerp(y0, y1, s);
      }
    }
    return points[points.length - 1][1];
  }

  function gazeTime(cx, cy) {
    const x = clamp(cx, 0, 1);
    const y = clamp(cy, 0, 1);
    if (x >= BONE_ZONE.x0 && x <= BONE_ZONE.x1 && y >= BONE_ZONE.y0 && y <= BONE_ZONE.y1) {
      const u = (y - BONE_ZONE.y0) / (BONE_ZONE.y1 - BONE_ZONE.y0);
      return lerp(BONE_ZONE.tFrom, BONE_ZONE.tTo, u);
    }
    if (y <= UP_ZONE.maxY) return lerp(UP_ZONE.tFrom, UP_ZONE.tTo, x);
    return piecewise(SWEEP, x);
  }

  // ---------- DOM ----------
  const canvas = hero.querySelector('canvas');
  const video = hero.querySelector('video');
  const hint = hero.querySelector('[data-hint]');
  const glow = hero.querySelector('[data-glow]');
  if (!canvas) return null;
  const ctx = canvas.getContext('2d', { alpha: false });

  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  const saveData = !!(navigator.connection && navigator.connection.saveData);
  const isStatic = reduceMotion || saveData || !video;
  const BG_COLOR = (getComputedStyle(document.documentElement).getPropertyValue('--bg') || '#17100a').trim();

  // ---------- Estado ----------
  const state = {
    mode: isStatic ? 'static' : 'video',
    current: REST_T,
    target: REST_T,
    videoOk: false,
    spriteReady: false,
    lastDraw: { a: -1, b: -1, f: -1 },
    dpr: 1,
    w: 0, h: 0,
    dest: { x: 0, y: 0, w: 0, h: 0 },
    portrait: false,
    idleTimer: 0,
    resumeToken: 0,
    playedSeconds: 0,
    inView: true,
    capped: false,
  };

  if (isStatic) {
    hero.classList.add('is-static', 'is-ready');
    if (hint) hint.hidden = true;
    return { state, gazeTime, SPRITE };
  }

  // ---------- Layout ----------
  function layout() {
    const rect = hero.getBoundingClientRect();
    state.w = Math.max(1, Math.round(rect.width));
    state.h = Math.max(1, Math.round(rect.height));
    state.dpr = Math.min(window.devicePixelRatio || 1, 2);
    canvas.width = Math.round(state.w * state.dpr);
    canvas.height = Math.round(state.h * state.dpr);
    canvas.style.width = state.w + 'px';
    canvas.style.height = state.h + 'px';

    const portrait = state.h > state.w * 1.05;
    let dw, dh, dy;
    if (portrait) {
      // Retrato: composição ancorada no topo (66% da altura); texto abaixo.
      dh = state.h * 0.66; dw = dh * ASPECT;
      if (dw < state.w) { dw = state.w; dh = dw / ASPECT; }
      dy = 0;
    } else {
      // Paisagem (cover): 16:9 preenchendo a seção, personagem centralizado.
      dw = state.w; dh = state.w / ASPECT;
      if (dh < state.h) { dh = state.h; dw = state.h * ASPECT; }
      dy = (state.h - dh) / 2;
    }
    state.portrait = portrait;
    state.dest = { x: (state.w - dw) / 2, y: dy, w: dw, h: dh };
    hero.classList.toggle('is-portrait', portrait);

    // O vídeo ocupa exatamente o mesmo retângulo da composição
    video.style.left = state.dest.x + 'px';
    video.style.top = state.dest.y + 'px';
    video.style.width = state.dest.w + 'px';
    video.style.height = state.dest.h + 'px';

    ctx.setTransform(state.dpr, 0, 0, state.dpr, 0, 0);
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = 'high';
    state.lastDraw.a = -1;
  }

  // ---------- Desenho ----------
  const img = new Image();
  img.decoding = 'async';

  function blit(i, d) {
    const sx = (i % SPRITE.cols) * SPRITE.frameW;
    const sy = Math.floor(i / SPRITE.cols) * SPRITE.frameH;
    ctx.drawImage(img, sx, sy, SPRITE.frameW, SPRITE.frameH, d.x, d.y, d.w, d.h);
  }

  function draw(time, force) {
    if (!state.spriteReady) return;
    const idx = clamp(time * SPRITE.fps, 0, SPRITE.frames - 1);
    const a = Math.floor(idx);
    const b = Math.min(a + 1, SPRITE.frames - 1);
    const f = idx - a;

    const ld = state.lastDraw;
    if (!force && ld.a === a && ld.b === b && Math.abs(ld.f - f) < 0.004) return;
    ld.a = a; ld.b = b; ld.f = f;

    const d = state.dest;
    ctx.globalAlpha = 1;
    if (state.portrait) {
      ctx.fillStyle = BG_COLOR;
      ctx.fillRect(0, 0, state.w, state.h);
    }
    blit(a, d);
    if (f > 0.004 && b !== a) {
      ctx.globalAlpha = f; // cross-fade → interpolação entre frames vizinhos
      blit(b, d);
      ctx.globalAlpha = 1;
    }
  }

  // ---------- Vídeo ----------
  function showCanvas(show) { hero.classList.toggle('is-scrubbing', show); }

  function videoTime() {
    if (!isFinite(video.currentTime)) return state.current;
    return clamp(video.currentTime, 0, SPRITE_MAX_T);
  }

  function enterFollow() {
    state.resumeToken++; // cancela qualquer retomada em andamento
    clearTimeout(state.idleTimer);
    state.playedSeconds = 0;
    if (state.capped) { state.capped = false; hero.classList.remove('is-capped'); }

    if (state.mode === 'video' || state.mode === 'resume') {
      if (state.mode === 'video') state.current = videoTime();
      video.pause();
      // Quantiza ao frame exato que o vídeo exibe: o canvas entra com a mesma imagem.
      state.current = Math.round(state.current * SPRITE.fps) / SPRITE.fps;
      state.target = state.current;
      draw(state.current, true);
      showCanvas(true);
    }
    state.mode = 'follow';
  }

  function scheduleResume() {
    clearTimeout(state.idleTimer);
    state.idleTimer = setTimeout(resumePlayback, IDLE_MS);
  }

  function resumePlayback() {
    if (state.mode !== 'follow') return;
    if (!state.videoOk) { state.mode = 'sprite-play'; return; }

    state.mode = 'resume';
    state.target = state.current; // congela a pose durante o handoff
    const token = ++state.resumeToken;
    const t = clamp(state.current, 0, Math.max(0, (video.duration || CLIP_DURATION) - 0.05));

    let done = false;
    const go = () => {
      if (done || token !== state.resumeToken) return;
      done = true;
      video.removeEventListener('seeked', go);
      video.play().then(() => {
        if (token !== state.resumeToken) return;
        state.mode = 'video';
        showCanvas(false);
        if (glow) glow.style.opacity = '0';
      }).catch(() => {
        if (token !== state.resumeToken) return;
        state.mode = 'sprite-play';
      });
    };
    video.addEventListener('seeked', go);
    try { video.currentTime = t; } catch (e) { /* metadata ainda não carregada */ }
    setTimeout(go, SEEK_TIMEOUT_MS);
  }

  function startVideo() {
    video.muted = true;
    video.src = VIDEO_SRC;
    video.play().then(() => {
      state.videoOk = true;
      hero.classList.add('is-ready');
      if (state.mode === 'sprite-play') {
        try { video.currentTime = clamp(state.current, 0, SPRITE_MAX_T); } catch (e) { /* ignore */ }
        state.mode = 'video';
        showCanvas(false);
      }
    }).catch(() => {
      // Autoplay bloqueado → a sprite toca em loop; tenta o vídeo no primeiro gesto
      state.mode = 'sprite-play';
      hero.classList.add('is-ready');
      loadSprite();
      showCanvas(true);
      const retry = () => {
        video.play().then(() => {
          state.videoOk = true;
          hero.removeEventListener('pointerdown', retry);
        }).catch(() => {});
      };
      hero.addEventListener('pointerdown', retry);
    });
  }

  video.addEventListener('playing', () => { state.videoOk = true; });
  video.addEventListener('error', () => {
    state.videoOk = false;
    if (state.mode === 'video' || state.mode === 'resume') { state.mode = 'sprite-play'; loadSprite(); showCanvas(true); }
  });
  video.addEventListener('timeupdate', () => {
    // Teto de reprodução: depois de PLAYBACK_CAP_S sem interação, pausa no frame.
    if (state.mode !== 'video' || state.capped) return;
    state.playedSeconds += 0.25;
    if (state.playedSeconds >= PLAYBACK_CAP_S) {
      state.capped = true;
      hero.classList.add('is-capped');
      video.pause();
    }
  });

  // Fora da tela: pausa o loop; de volta: retoma
  if ('IntersectionObserver' in window) {
    new IntersectionObserver((entries) => {
      for (const e of entries) {
        state.inView = e.isIntersecting && e.intersectionRatio >= 0.2;
        if (state.mode !== 'video') continue;
        if (!state.inView) video.pause();
        else if (!state.capped && video.paused) video.play().catch(() => {});
      }
    }, { threshold: [0, 0.2, 0.5] }).observe(hero);
  }

  // ---------- Sprite (carregada depois da primeira dobra) ----------
  let spriteRequested = false;
  function loadSprite() {
    if (spriteRequested) return;
    spriteRequested = true;
    const ready = () => {
      if (state.spriteReady) return;
      state.spriteReady = true;
      layout();
      if (state.mode !== 'video') draw(state.current, true);
      hero.classList.add('has-sprite');
    };
    img.src = SPRITE.src;
    if (img.decode) img.decode().then(ready).catch(() => { img.onload = ready; });
    else img.onload = ready;
  }

  // ---------- Loop ----------
  let lastTs = 0;
  function tick(ts) {
    requestAnimationFrame(tick);
    const dt = lastTs ? Math.min((ts - lastTs) / 1000, 0.1) : 0.016;
    lastTs = ts;

    if (state.mode === 'video' || !state.spriteReady) return;

    if (state.mode === 'sprite-play') {
      state.current += dt;
      if (state.current >= CLIP_DURATION) state.current -= CLIP_DURATION;
      state.target = state.current;
      draw(clamp(state.current, 0, SPRITE_MAX_T));
      return;
    }

    // 'follow' e 'resume'
    const k = 1 - Math.exp(-FOLLOW_RATE * dt);
    let step = (state.target - state.current) * k;
    const maxStep = MAX_SPEED * dt;
    if (step > maxStep) step = maxStep;
    if (step < -maxStep) step = -maxStep;
    state.current += step;
    draw(clamp(state.current, 0, SPRITE_MAX_T));
  }

  // ---------- Interação ----------
  function toComposition(clientX, clientY) {
    const rect = hero.getBoundingClientRect();
    const px = clientX - rect.left;
    const py = clientY - rect.top;
    const d = state.dest;
    // Em retrato só o centro da composição é visível: x cobre a largura visível.
    const x = state.portrait ? px / state.w : (px - d.x) / d.w;
    return { x, y: (py - d.y) / d.h, px, py };
  }

  function onPointerMove(e) {
    const c = toComposition(e.clientX, e.clientY);
    if (glow) {
      glow.style.transform = 'translate3d(' + c.px + 'px, ' + c.py + 'px, 0)';
      glow.style.opacity = '1';
    }
    if (hint && !hint.classList.contains('is-hidden')) hint.classList.add('is-hidden');

    if (!state.spriteReady) { loadSprite(); return; } // vídeo segue tocando até a sprite chegar
    enterFollow();
    state.target = gazeTime(c.x, c.y);
    scheduleResume();
  }

  function onPointerLeave() {
    if (glow) glow.style.opacity = '0';
    if (state.mode === 'follow') {
      clearTimeout(state.idleTimer);
      resumePlayback();
    }
  }

  hero.addEventListener('pointerenter', () => loadSprite(), { passive: true });
  hero.addEventListener('pointermove', onPointerMove, { passive: true });
  hero.addEventListener('pointerdown', onPointerMove, { passive: true });
  hero.addEventListener('pointerleave', onPointerLeave);
  hero.addEventListener('pointercancel', onPointerLeave);
  hero.addEventListener('pointerup', (e) => { if (e.pointerType !== 'mouse') onPointerLeave(); });
  window.addEventListener('blur', onPointerLeave);
  document.addEventListener('visibilitychange', () => { if (document.hidden) onPointerLeave(); });

  // ---------- Resize ----------
  let resizeRaf = 0;
  const onResize = () => {
    cancelAnimationFrame(resizeRaf);
    resizeRaf = requestAnimationFrame(() => {
      layout();
      if (state.mode !== 'video') draw(state.current, true);
    });
  };
  window.addEventListener('resize', onResize);
  if ('ResizeObserver' in window) new ResizeObserver(onResize).observe(hero);

  // ---------- Arranque ----------
  layout();
  startVideo();
  requestAnimationFrame(tick);
  // A sprite (2,8 MB) fica fora da primeira dobra: entra quando a página está ociosa
  // ou no primeiro gesto do ponteiro, o que vier antes.
  const idle = window.requestIdleCallback || ((fn) => setTimeout(fn, 1200));
  window.addEventListener('load', () => idle(() => loadSprite(), { timeout: 3000 }), { once: true });
  if (document.readyState === 'complete') idle(() => loadSprite(), { timeout: 3000 });

  const api = { state, gazeTime, SPRITE, video };
  window.__spriteHero = api; // depuração / QA
  return api;
}