Timeline
Engine

// Each orbit is a centred ring with its planet pinned to the top edge, so the
// clip animates one rotate() and the planet is carried around. The middle key
// is sparse — only opacity — so the rotation interpolates straight through it.
const orbitFrames = (from, to) => ({
  0:   { opacity: '0', transform: `rotate(${from}deg)` },
  22:  { opacity: '1' },
  100: { opacity: '1', transform: `rotate(${to}deg)` },
});

// One list drives both the timeline and the ruler drawn under the stage.
const heroClips = [
  // Sized so the LAST star lands on the timeline's own end: the 34th element
  // starts at 33 * 26 = 858, so 858 + 1340 ≈ 2200. Three twinkle cycles per star,
  // staggered across 34 of them, means the field never settles — and because it's
  // all keyframed, it scrubs backwards just as happily as forwards.
  { name: 'starfield', target: '.star-dot', at: 0, duration: 1340, easing: 'linear', stagger: 26,
    keyframes: { 0:   { opacity: '0',    transform: 'scale(0.3)' },
                 18:  { opacity: '1',    transform: 'scale(1)' },
                 34:  { opacity: '0.3',  transform: 'scale(0.72)' },
                 50:  { opacity: '0.95', transform: 'scale(1)' },
                 66:  { opacity: '0.35', transform: 'scale(0.78)' },
                 82:  { opacity: '1',    transform: 'scale(1)' },
                 100: { opacity: '0.7',  transform: 'scale(0.92)' } } },

  { name: 'sun', target: '#hero-sun', at: 200, duration: 900, easing: 'back-out',
    keyframes: { 0: { opacity: '0', transform: 'scale(0)' },
                 100: { opacity: '1', transform: 'scale(1)' } } },

  { name: 'orbit i',   target: '#orbit-1', at: 400, duration: 1500, easing: 'ease-out', keyframes: orbitFrames(-40, 185) },
  { name: 'orbit ii',  target: '#orbit-2', at: 550, duration: 1500, easing: 'ease-out', keyframes: orbitFrames(30, -145) },
  { name: 'orbit iii', target: '#orbit-3', at: 700, duration: 1500, easing: 'ease-out', keyframes: orbitFrames(-15, 130) },

  { name: 'comet', target: '#hero-comet', at: 1000, duration: 900, easing: 'ease-in-out',
    keyframes: { 0:   { opacity: '0', transform: 'translate(-320px, -150px) rotate(25deg) scale(0.6)' },
                 18:  { opacity: '1' },
                 72:  { opacity: '1' },
                 100: { opacity: '0', transform: 'translate(320px, 150px) rotate(25deg) scale(1)' } } },

  { name: 'headline', target: '#hero-headline', at: 1400, duration: 700, easing: 'back-out',
    keyframes: { 0: { opacity: '0', transform: 'translateY(26px)' },
                 100: { opacity: '1', transform: 'translateY(0px)' } } },
];

const heroTl = timeline();
// Each config doubles as the opts object — name/target/keyframes are ignored
// by tween(), and `stagger` rides along for free.
heroClips.forEach((c) => heroTl.tween(c.target, c.keyframes, c));

// The playhead line rides the timeline's own 'update' event. Listener first:
// the driver seeks in its constructor, so subscribing after it would miss the
// bootstrap frame and leave the readout blank until the first scroll.
const heroTotal = heroTl.duration;   // 2200ms — the largest clip end
heroTl.on('update', (time) => {
  heroPlayhead.style.left = `${(time / heroTotal) * 100}%`;
  heroTime.textContent = `${Math.round(time)} ms`;
});

// Deliberately NOT the default range. 'top bottom' would put progress 0 at the
// moment the track first pokes above the fold, so most of the timeline would run
// while the stage is still half off-screen. Starting at the viewport's centre
// means nothing moves until you can actually see it, and the whole scrub then
// spans exactly the track's own height.
const heroDriver = scrollDriver(heroTl, {
  trigger: '#hero-track',
  start: 'top center',
  end: 'bottom center',
  onProgress: meter('sec-hero'),
});

// The ruler doubles as a scrub surface: pointer x maps to a time, seek() does
// the rest. Releasing snaps back to wherever scroll left the playhead — the
// driver never stopped tracking, so its progress IS the scroll position.
const heroScrub = (e) => {
  const rect = heroOverlay.getBoundingClientRect();
  const p = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
  heroTl.seek(p * heroTotal);
};
heroRuler.addEventListener('pointermove', heroScrub);
heroRuler.addEventListener('pointerleave', () => heroTl.progress(heroDriver.progress));

const cardsTl = timeline();

cardsTl.tween('.stagger-card', {
  0:   { opacity: '0', transform: 'translateY(70px) rotate(-8deg) scale(0.86)' },
  100: { opacity: '1', transform: 'translateY(0px) rotate(0deg) scale(1)' },
}, { duration: 700, stagger: 150, easing: 'back-out' });

// duration → 700 + 8 × 150 = 1900ms

// The stage is sticky at top:15vh and 62vh tall, so the range is written to
// match: progress 0 the moment it pins, 1 as it unpins.
scrollDriver(cardsTl, {
  trigger: '#stagger-track',
  start: 'top 15%',
  end: 'bottom 77%',
  onProgress: meter('sec-stagger'),
});

// The physics half: a spring burst, built once, replayed on every crossing.
// (Springs are opt-in — registerPhysics(PhysicsEngine) ran once at page setup.)
const burst = scene()
  .stagger(shards, (el, i) => {
    const angle = (i / shards.length) * Math.PI * 2;
    return {
      from: { opacity: '1', transform: 'translate(0px, 0px) scale(0.3)' },
      to: {
        opacity: '1',
        transform: `translate(${Math.cos(angle) * 200}px, ${Math.sin(angle) * 120}px) scale(1)`,
      },
      physics: { attraction: 0.018, friction: 0.12 },
    };
  }, { interval: 14 })
  // Scene steps are sequential: this waits for every spring to settle.
  .stagger(shards, { to: { opacity: '0' }, duration: 320, easing: 'ease-out' }, { interval: 12 });

// The scrubbed half.
const fuseTl = timeline({ defaults: { easing: 'linear' } });

fuseTl
  .tween('#fuse-spark', { 0: { left: '8%' }, 100: { left: '50%' } }, { duration: 1200 })
  .label('ignite')                        // names the current end: 1200ms
  .tween('#fuse-flash', {
    0:   { opacity: '0', transform: 'scale(0.35)' },
    100: { opacity: '1', transform: 'scale(1)' },
  }, { at: 'ignite', duration: 450, easing: 'ease-out' })
  .call((direction) => {
    logCrossing(direction);
    if (direction === 1) burst.play();   // forward crossings only
  }, { at: 'ignite' });                    // once: false — re-arms every pass

// scrollDriver seeks non-silently by default, so scrubbing fires calls.
scrollDriver(fuseTl, { trigger: '#fuse-track', start: 'top 15%', end: 'bottom 77%' });

// A driver is just "pick a time, call seek". This reads clientX;
// nothing in Timeline knows the difference.
function hoverDriver(tl, el, { range = el, smoothing = 20, onOwner } = {}) {
  let target = 0;
  let holding = false;

  el.addEventListener('pointermove', (e) => {
    const rect = range.getBoundingClientRect();
    target = clamp01((e.clientX - rect.left) / rect.width) * tl.duration;
    if (!holding) {
      holding = true;
      tl.pause();
      onOwner?.(true);
    }
  });

  el.addEventListener('pointerleave', () => {
    if (!holding) return;
    holding = false;
    onOwner?.(false);
    tl.play(); // resumes from the current playhead
  });

  ticker.subscribe((delta) => {
    if (!holding) return;
    const k = 1 - Math.exp(-delta / smoothing);
    tl.seek(tl.time() + (target - tl.time()) * k);
  });
}

// One list builds the scrubbed timeline AND draws the strip.
const sigilClips = [
  { name: 'stars', target: '.fw-star', at: 0, duration: 2600, easing: 'linear', stagger: 28, keyframes: {…} },
  { name: 'clouds', target: '.fw-cloud', at: 0, duration: 3000, easing: 'linear', stagger: 90, keyframes: {…} },
];

const shellStarts = [0, 850, 1600];
shellStarts.forEach((at, i) => {
  const shell = `.fw-shell-${i + 1}`;
  const burstAt = at + 620;
  sigilClips.push(
    { name: 'trail', target: `${shell} .fw-trail`, at, duration: 620, easing: 'ease-out', keyframes: {…} },
    { name: 'flash', target: `${shell} .fw-flash`, at: burstAt, duration: 260, easing: 'ease-out', accent: true, keyframes: {…} },
    { name: 'sparks radial', target: `${shell} .fw-spark i`, at: burstAt, duration: 900, easing: 'ease-out', stagger: 7,
      keyframes: { 0: { '--r': '0px', '--spark-scale': '1', '--hue': rand(12, 320) },
                   100: { '--r': rand(96, 154, 'px'), '--spark-scale': '0.4' } } },
    { name: 'sparks fall', target: `${shell} .fw-spark`, at: burstAt, duration: 900, easing: 'ease-in', stagger: 7,
      // 0% is transparent because fill: 'both' holds it before the burst —
      // a lit 0% frame parks the sparks on the pad during the mortar climb.
      keyframes: { 0: { '--g': '0px', opacity: '0' }, 2: { opacity: '1' }, 72: { opacity: '0.82' },
                   100: { '--g': rand(56, 108, 'px'), opacity: '0' } } },
  );
});

const sigilTl = timeline({ defaults: { easing: 'ease-in-out' } });
sigilClips.forEach((c) => sigilTl.tween(c.target, c.keyframes, c));

const burstTimers = [0, 0, 0];
shellStarts.forEach((at, i) => {
  sigilTl.call(() => {
    const flash = $(`.fw-shell-${i + 1} .fw-flash`);
    flash.classList.add('called');
    clearTimeout(burstTimers[i]);
    burstTimers[i] = setTimeout(() => flash.classList.remove('called'), 180);
  }, { at: at + 620, direction: 1 });
});

hoverDriver(sigilTl, $('#studio'), {
  range: $('#studio-range'),
  onOwner: (isCursor) => {
    sigilOwner.textContent = isCursor ? '▮ cursor' : '▶ clock';
    sigilOwner.classList.toggle('is-cursor', isCursor);
  },
});
sigilTl.progress(0);   // paint the start state; nothing is written until this

viewTrigger('#sec-studio', {
  enter: () => sigilTl.play(),
  once: true,
  threshold: 0.35,
});

// Stagger is included in duration: clip duration + (count - 1) × stagger.
const flameClip = {
  name: 'flames', target: '.flame', at: 0, duration: 1580, easing: 'ease-in-out', stagger: 40,
  keyframes: {…},   // 1580 + 3 × 40 = 1700ms
};
const emberClip = {
  name: 'embers', target: '.ember', at: 0, duration: 1530, easing: 'ease-out', stagger: 70,
  keyframes: {…},   // 1530 + 11 × 70 = 2300ms
};
const pineClip = {
  name: 'pines', target: '.pine', at: 0, duration: 5000, easing: 'ease-in-out', stagger: 50,
  keyframes: {…},   // 5000 + 6 × 50 = 5300ms
};
const glowClip = {
  name: 'glow', target: '#camp-glow', at: 0, duration: 1300, easing: 'ease-in-out', stagger: 0,
  keyframes: {…},
};

const loopTimeline = (clip) => {
  const tl = timeline({ loop: true });
  tl.tween(clip.target, clip.keyframes, clip);
  return countTimeline(tl, 1);
};

const fireClips = [flameClip, emberClip, pineClip, glowClip];
const fireTimelines = fireClips.map(loopTimeline);

// One lane per timeline, all on ONE scale: track width is proportional to that
// timeline's own duration, so every playhead moves at the same px/second and
// only the wrap points differ. The drift on screen is the real drift.
const fireLongest = Math.max(...fireTimelines.map((tl) => tl.duration));

fireTimelines.forEach((tl, i) => {
  const { track, fill, head, lapOut } = drawLane(fireClips[i].name, tl.duration);
  track.style.setProperty('--loop-w', `${(tl.duration / fireLongest) * 100}%`);

  // A wrap is the only moment the playhead moves backwards.
  let laps = 0, previous = 0;
  tl.on('update', (time) => {
    if (time < previous) lapOut.textContent = `×${(laps += 1)}`;
    previous = time;
    const percent = `${(time / tl.duration) * 100}%`;
    head.style.left = percent;
    fill.style.width = percent;
  });
});

// The four periods only realign at their least common multiple — 26,939,900ms,
// which is what the countdown above the lanes is counting down.
const gcd = (a, b) => (b ? gcd(b, a % b) : a);
const fireCycle = fireTimelines.reduce((a, tl) => (a * tl.duration) / gcd(a, tl.duration), 1);

fireTimelines.forEach((tl) => tl.progress(0));

const playFire = () => fireTimelines.forEach((tl) => tl.play());
const pauseFire = () => fireTimelines.forEach((tl) => tl.pause());

viewTrigger('#sec-fire', { enter: playFire, leave: pauseFire });

// Same clip, twice — the only difference is the driver.
const dial = (target) =>
  timeline().tween(target, {
    0:   { transform: 'rotate(-62deg)' },
    100: { transform: 'rotate(62deg)' },
  }, { duration: 1000, easing: 'linear' });

const lockedTl = dial('#needle-locked');
const smoothTl = dial('#needle-smooth');

const range = { trigger: '#smooth-track', start: 'top 15%', end: 'bottom 77%' };

scrollDriver(lockedTl, { ...range, smoothing: 0 });     // welded to scroll
scrollDriver(smoothTl, { ...range, smoothing: 150,       // ms time constant
  onProgress: meter('sec-smooth') });                // onProgress reports the raw scroll

// Read the two playheads back out for the numbers under each gauge.
lockedTl.on('update', () => { lockedOut.textContent = lockedTl.progress().toFixed(3); });
smoothTl.on('update', () => { smoothOut.textContent = smoothTl.progress().toFixed(3); });

// scene comes from timeline-engine's bundle — same ticker, one rAF loop.
const { scene, viewTrigger, registerPhysics } = TimelineEngine;

// Springs are opt-in as of animation-engine 0.2.0: register an implementation
// once, or a { physics } step throws. PhysicsEngine is its own script tag.
registerPhysics(PhysicsEngine);

// Physics: no duration, no easing — a spring settles when it settles.
const pop = scene().stagger('.pop-bubble', (el, i) => ({
  from: { opacity: '0', transform: 'translateY(56px) scale(0.35)' },
  to:   { opacity: '1', transform: 'translateY(0px) scale(1)' },
  physics: { attraction: 0.03, friction: 0.09 + i * 0.012 },  // looser on the left
}), { interval: 90 });

viewTrigger('#pop-stage', {
  enter: () => {
    pop.play();
    setPopStatus('entered view → scene playing (observer disconnected)');
  },
  once: true,
  threshold: 0.45,
});

$('#pop-replay').addEventListener('click', () => {
  pop.play();
  setPopStatus('replayed by hand');
});

const playTl = timeline({ defaults: { easing: 'ease-in-out' } });

playTl.tween('.beat', {
  0:   { transform: 'scaleY(0.12)', opacity: '0.3' },
  100: { transform: 'scaleY(1)',    opacity: '1' },
}, { duration: 600, stagger: 80, easing: 'back-out' });

playTl.progress(0);   // paint the 0% frame — a timeline writes nothing until seeked

// One 'update' listener feeds the bar, the readout and the slider.
playTl.on('update', () => {
  const p = playTl.progress();
  playBar.style.transform = `scaleX(${p})`;
  playTime.textContent = `${Math.round(playTl.time())} / ${playTl.duration} ms`;
  playScrub.value = String(p);
});

$('#play-go').addEventListener('click', async () => {
  setPlayStatus('playing', true);
  await playTl.play();          // resolves on complete OR pause
  setPlayStatus(playTl.progress() >= 1 ? 'complete' : 'paused', false);
});

$('#play-pause').addEventListener('click', () => playTl.pause());

playScrub.addEventListener('input', () => {
  if (playTl.playing) playTl.pause();
  playTl.progress(Number(playScrub.value));   // same clips, hand-driven
  setPlayStatus('scrubbing', false);
});

$$('[data-rate]').forEach((btn) => {
  btn.addEventListener('click', () => {
    playTl.timeScale(Number(btn.dataset.rate));
    $$('[data-rate]').forEach((b) => b.classList.toggle('active', b === btn));
  });
});