// Mechanisme: process-horizontal-timeline-editorial
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const dots = gsap.utils.toArray('.ed-dot');
const segs = gsap.utils.toArray('.ed-seg');
const steps = gsap.utils.toArray('.ed-step');
if (reduce) {
  gsap.set([dots, segs, steps], { autoAlpha: 1, scale: 1, scaleX: 1, y: 0 });
} else {
  gsap.set(dots, { scale: 0.4, autoAlpha: 0.25 });
  gsap.set(segs, { scaleX: 0, transformOrigin: 'left center' });
  gsap.set(steps, { autoAlpha: 0.18, y: 24 });
  const tl = gsap.timeline({
    defaults: { ease: 'expo.out', duration: 1.4 },
    scrollTrigger: { trigger: '.ed-pin', start: 'top top', end: '+=2400', pin: true, scrub: 1 }
  });
  dots.forEach((d, i) => {
    tl.to(d, { scale: 1, autoAlpha: 1 }, i * 0.6);
    if (segs[i]) tl.to(segs[i], { scaleX: 1, duration: 1.0 }, i * 0.6 + 0.1);
    if (steps[i]) tl.to(steps[i], { autoAlpha: 1, y: 0 }, i * 0.6 + 0.05);
  });
}

<!-- Skeleton: process-horizontal-timeline-editorial -->
<section class="ed-pin">
  <header class="ed-head">
    <span class="ed-eyebrow">Methode — Vijf bewegingen</span>
    <h2 class="ed-title">Een <em>traag</em> verlopende studio-cadans</h2>
  </header>
  <div class="ed-rail">
    <div class="ed-line"><span class="ed-seg"></span><span class="ed-seg"></span><span class="ed-seg"></span><span class="ed-seg"></span></div>
    <ol class="ed-steps">
      <li class="ed-step"><span class="ed-dot"></span><span class="ed-num">i.</span><h3>Luisteren</h3><p><em>De redactie van het probleem.</em></p></li>
      <li class="ed-step"><span class="ed-dot"></span><span class="ed-num">ii.</span><h3>Schetsen</h3><p><em>Eerste hand op papier.</em></p></li>
      <li class="ed-step"><span class="ed-dot"></span><span class="ed-num">iii.</span><h3>Bouwen</h3><p><em>Compositie wordt code.</em></p></li>
      <li class="ed-step"><span class="ed-dot"></span><span class="ed-num">iv.</span><h3>Verfijnen</h3><p><em>Een laatste, lange blik.</em></p></li>
      <li class="ed-step"><span class="ed-dot"></span><span class="ed-num">v.</span><h3>Loslaten</h3><p><em>Naar de wereld.</em></p></li>
    </ol>
  </div>
</section>

/* Styling: process-horizontal-timeline-editorial — editorial */
.ed-pin { background:#F4F1EB; color:#0A0A0A; padding:8vh 6vw; min-height:100vh; }
.ed-head { max-width:46rem; margin-bottom:6rem; }
.ed-eyebrow { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(10,10,10,.55); }
.ed-title { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2.4rem,5vw,4.2rem); line-height:1.05; margin:1rem 0 0; }
.ed-title em { font-style:italic; font-weight:300; }
.ed-rail { position:relative; }
.ed-line { position:absolute; inset:42% 0 auto 0; display:flex; height:1px; }
.ed-seg { flex:1; height:1px; background:#0A0A0A; }
.ed-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); }
.ed-step { position:relative; padding:0 1.2rem; }
.ed-dot { position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); width:18px; height:18px; border-radius:50%; background:#0A0A0A; }
.ed-num { font-family:'Fraunces',serif; font-style:italic; color:rgba(10,10,10,.45); display:block; margin-top:5rem; }
.ed-step h3 { font-family:'Fraunces',serif; font-weight:300; font-size:1.6rem; margin:.4rem 0 .6rem; }
.ed-step p { font-family:'Fraunces',serif; font-style:italic; color:rgba(10,10,10,.6); margin:0; font-size:.95rem; }