// Mechanisme: sticky stack + scrub scale-down on previous
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 cards = gsap.utils.toArray('.brutstack-card');
cards.forEach((card, i) => {
  if (i === cards.length - 1) return;
  gsap.to(card, {
    scale: 0.92, opacity: 0.55, ease: 'none',
    scrollTrigger: { trigger: cards[i + 1], start: 'top 80%', end: 'top 20%', scrub: true }
  });
});

<!-- Skeleton: brutalist sticky stack -->
<section class="brutstack">
  <article class="brutstack-card" style="top:0">
    <span class="brutstack-card__tag">[ 01 / 04 ]</span>
    <h3>FOUNDATION</h3>
    <p>Brand audit, positionering, voice. Geen design tot dit klopt.</p>
  </article>
  <article class="brutstack-card" style="top:2vh">
    <span class="brutstack-card__tag">[ 02 / 04 ]</span>
    <h3>SYSTEM</h3>
    <p>Tokens, components, motion-rules — allemaal in code.</p>
  </article>
  <article class="brutstack-card" style="top:4vh">
    <span class="brutstack-card__tag">[ 03 / 04 ]</span>
    <h3>SHIP</h3>
    <p>Pagina voor pagina live. Iedere week meetbare progressie.</p>
  </article>
  <article class="brutstack-card" style="top:6vh">
    <span class="brutstack-card__tag">[ 04 / 04 ]</span>
    <h3>OPERATE</h3>
    <p>Quarterly reviews, conversion-experiments, retentie-loops.</p>
  </article>
</section>

/* Styling: brutalist — white bg, hard 2px black borders, mono */
.brutstack { background:#FFFFFF; padding:6vh 0; min-height:70vh; }
.brutstack-card { position:sticky; background:#FFFFFF; color:#0A0A0A; border:2px solid #0A0A0A; padding:3rem; margin:0 auto 1.25rem; max-width:760px; min-height:38vh; display:flex; flex-direction:column; justify-content:space-between; gap:1.2rem; font-family:'JetBrains Mono',monospace; will-change:transform,opacity; transform-origin:50% 0%; }
.brutstack-card__tag { font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#FF4A1C; }
.brutstack-card h3 { font-size:clamp(2.2rem,5vw,3.4rem); margin:0; text-transform:uppercase; letter-spacing:-.02em; line-height:1; }
.brutstack-card p { font-size:.95rem; line-height:1.5; margin:0; text-transform:none; max-width:48ch; }
.brutstack-card:nth-child(2) { background:#0A0A0A; color:#F4F1EB; }
.brutstack-card:nth-child(2) .brutstack-card__tag { color:#FF4A1C; }
.brutstack-card:nth-child(3) { background:#FF4A1C; color:#0A0A0A; border-color:#0A0A0A; }
.brutstack-card:nth-child(3) .brutstack-card__tag { color:#0A0A0A; }
.brutstack-card:nth-child(4) { background:#FFFFFF; }