The Amplify Lab

function initTrack(root, motionOK) {
  const wide = matchMedia("(min-width: 64rem)").matches;
  const viewport = root.querySelector(".cine-viewport");
  const track = root.querySelector(".cine-track");
  if (!viewport || !track || !wide || !motionOK) return null;

  const panels = [...track.querySelectorAll(".cine-panel")];
  const rail = root.querySelector(".cine-rail");
  const railFill = rail?.querySelector("span");

  let target = 0, current = -1, raf = 0, active = false;
  let dragging = false, startX = 0, startTarget = 0, samples = [];
  let snapTimer = 0;

  const max = () => Math.max(0, track.scrollWidth - viewport.clientWidth);
  const clamp = (v) => Math.min(max(), Math.max(0, v));

  function offsets() {
    // normalize to the first panel so the track's centering pad cancels out
    const pad = panels[0].offsetLeft;
    return panels.map((p) => Math.min(p.offsetLeft - pad, max()));
  }
  function nearestPanel(v) {
    const os = offsets();
    let best = 0;
    os.forEach((o, i) => {
      if (Math.abs(o - v) < Math.abs(os[best] - v)) best = i;
    });
    return best;
  }
  function snap() {
    const i = nearestPanel(target);
    target = clamp(offsets()[i]);
    if (rail) rail.setAttribute("aria-valuenow", i);
    wake();
  }
  function seekPanel(i) {
    const os = offsets();
    target = clamp(os[Math.max(0, Math.min(panels.length - 1, i))]);
    if (rail) rail.setAttribute("aria-valuenow", i);
    wake();
  }

  function frame() {
    raf = 0;
    const d = target - current;
    current = Math.abs(d) < 0.4 && !dragging ? target : current + d * 0.09;
    track.style.transform = `translate3d(${(-current).toFixed(2)}px, 0, 0)`;
    // per-panel progress (−1..1) drives parallax + entrance
    const vpc = viewport.clientWidth / 2;
    panels.forEach((p) => {
      const pp = Math.max(-1, Math.min(1, (p.offsetLeft + p.offsetWidth / 2 - current - vpc) / viewport.clientWidth));
      p.style.setProperty("--pp", pp.toFixed(3));
      p.style.setProperty("--ppa", Math.abs(pp).toFixed(3));
    });
    if (railFill) {
      const m = max();
      railFill.style.transform = `scaleX(${(m ? current / m : 0).toFixed(4)})`;
    }
    if (active && (dragging || Math.abs(target - current) >= 0.4)) {
      raf = requestAnimationFrame(frame);
    }
  }
  function wake() {
    if (active && !raf) raf = requestAnimationFrame(frame);
  }

  // Drag with inertial flick — toys win any pointer dispute.
  viewport.addEventListener("pointerdown", (e) => {
    if (e.target.closest("button, input, a, .cine-chips span, .cine-sat-ui, details")) return;
    dragging = true;
    viewport.classList.add("cine-grabbing");
    startX = e.clientX;
    startTarget = target;
    samples = [{ x: e.clientX, t: performance.now() }];
    clearTimeout(snapTimer);
    try { viewport.setPointerCapture(e.pointerId); } catch {}
    wake();
  });
  viewport.addEventListener("pointermove", (e) => {
    if (!dragging) return;
    target = clamp(startTarget - (e.clientX - startX));
    samples.push({ x: e.clientX, t: performance.now() });
    if (samples.length > 6) samples.shift();
  }, { passive: true });
  function release() {
    if (!dragging) return;
    dragging = false;
    viewport.classList.remove("cine-grabbing");
    // velocity over the last ~80ms → coast ~260ms further, then snap
    const now = performance.now();
    const old = samples.find((s) => now - s.t < 90) || samples[0];
    const last = samples[samples.length - 1];
    const dt = last.t - old.t;
    if (dt > 0) {
      const v = (last.x - old.x) / dt; // px per ms
      target = clamp(target - v * 260);
    }
    snapTimer = setTimeout(snap, 60);
    wake();
  }
  viewport.addEventListener("pointerup", release);
  viewport.addEventListener("pointercancel", release);

  // Horizontal wheel / shift+wheel — plain vertical wheel keeps scrolling the page.
  viewport.addEventListener(
    "wheel",
    (e) => {
      const dx = e.shiftKey ? e.deltaY : e.deltaX;
      if (Math.abs(dx) <= Math.abs(e.deltaY) && !e.shiftKey) return;
      e.preventDefault();
      target = clamp(target + dx);
      clearTimeout(snapTimer);
      snapTimer = setTimeout(snap, 160);
      wake();
    },
    { passive: false }
  );

  // Keyboard: arrows page through panels; focus inside a panel brings it into view.
  viewport.addEventListener("keydown", (e) => {
    if (e.key === "ArrowRight") { seekPanel(nearestPanel(target) + 1); e.preventDefault(); }
    else if (e.key === "ArrowLeft") { seekPanel(nearestPanel(target) - 1); e.preventDefault(); }
  });
  track.addEventListener("focusin", (e) => {
    const p = e.target.closest(".cine-panel");
    if (p) seekPanel(panels.indexOf(p));
  });

  // Progress rail: click or drag to seek.
  if (rail) {
    let railDrag = false;
    const seekFromEvent = (e) => {
      const r = rail.getBoundingClientRect();
      target = clamp(((e.clientX - r.left) / r.width) * max());
      wake();
    };
    rail.addEventListener("pointerdown", (e) => {
      railDrag = true;
      try { rail.setPointerCapture(e.pointerId); } catch {}
      seekFromEvent(e);
    });
    rail.addEventListener("pointermove", (e) => railDrag && seekFromEvent(e), { passive: true });
    const railDrop = () => {
      if (!railDrag) return;
      railDrag = false;
      snap();
    };
    rail.addEventListener("pointerup", railDrop);
    rail.addEventListener("pointercancel", railDrop);
    rail.addEventListener("keydown", (e) => {
      if (e.key === "ArrowRight" || e.key === "ArrowUp") { seekPanel(nearestPanel(target) + 1); e.preventDefault(); }
      else if (e.key === "ArrowLeft" || e.key === "ArrowDown") { seekPanel(nearestPanel(target) - 1); e.preventDefault(); }
    });
  }

  addEventListener("resize", () => { target = clamp(target); wake(); }, { passive: true });

  return {
    start() { active = true; wake(); },
    stop() { active = false; cancelAnimationFrame(raf); raf = 0; },
  };
}