// Mechanisme: pin + horizontal scrub — editorial cadence
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const track = document.querySelector('.edi-track');
const pin = document.querySelector('.edi-pin');
const dist = track.scrollWidth - pin.clientWidth;
gsap.to(track, {
  x: -dist, ease: 'none',
  scrollTrigger: { trigger: pin, start: 'top top', end: () => '+=' + dist, pin: true, scrub: 1.2, invalidateOnRefresh: true }
});

<!-- Skeleton: editorial horizontal chapters -->
<section class="edi-pin">
  <div class="edi-track">
    <article class="edi-panel">
      <span class="edi-panel__chap">Hoofdstuk I</span>
      <h3 class="edi-panel__h">De stilte <em>vóór</em> de campagne.</h3>
      <p class="edi-panel__body">We luisteren eerst. Naar wat de cijfers fluisteren, naar wat de klanten al weten.</p>
    </article>
    <article class="edi-panel edi-panel--alt">
      <span class="edi-panel__chap">Hoofdstuk II</span>
      <h3 class="edi-panel__h">Een <em>scherpe</em> these.</h3>
      <p class="edi-panel__body">Geen brainstormen. Eén these die het halve werk al doet.</p>
    </article>
    <article class="edi-panel">
      <span class="edi-panel__chap">Hoofdstuk III</span>
      <h3 class="edi-panel__h">Vakwerk in <em>de uitvoering</em>.</h3>
      <p class="edi-panel__body">Ambacht zit in details die niemand benoemt, maar iedereen voelt.</p>
    </article>
    <article class="edi-panel edi-panel--alt">
      <span class="edi-panel__chap">Hoofdstuk IV</span>
      <h3 class="edi-panel__h">De <em>zachte</em> opschaling.</h3>
      <p class="edi-panel__body">We groeien zonder de stem van het merk te verliezen.</p>
    </article>
  </div>
</section>

/* Styling: editorial — paper cream, Fraunces serif, asymmetric */
.edi-pin { background:#F4F1EB; color:#0A0A0A; height:70vh; min-height:520px; overflow:hidden; position:relative; }
.edi-track { display:flex; height:100%; will-change:transform; }
.edi-panel { flex:0 0 75vw; max-width:760px; height:100%; padding:6vh 5vw; display:grid; grid-template-rows:auto 1fr auto; gap:2rem; border-right:1px solid rgba(10,10,10,.12); }
.edi-panel--alt { background:rgba(10,10,10,.04); padding-top:14vh; }
.edi-panel__chap { font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(10,10,10,.5); }
.edi-panel__h { font-family:'Fraunces',serif; font-weight:300; font-size:clamp(2rem,4.5vw,4rem); line-height:1.05; margin:0; letter-spacing:-.02em; }
.edi-panel__h em { font-style:italic; font-weight:300; color:rgba(10,10,10,.6); }
.edi-panel__body { font-family:'Fraunces',serif; font-weight:300; font-size:1.05rem; line-height:1.65; max-width:36ch; margin:0; color:rgba(10,10,10,.72); }