// Mechanisme: sticky-stacking cards (laag A)
// Cards met position:sticky; top groeit per card → ze stacken op elkaar.
// GSAP voegt scale-decrease + fade van vorige card toe terwijl nieuwe binnenkomt.
import gsap from 'https://esm.sh/[email protected]';
import { ScrollTrigger } from 'https://esm.sh/[email protected]/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

const cards = gsap.utils.toArray('.stack-card');

if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  gsap.set(cards, { autoAlpha: 1, scale: 1 });
} else {
  cards.forEach((card, i) => {
    if (i === cards.length - 1) return;
    gsap.to(card, {
      scale: 0.92,
      autoAlpha: 0.55,
      ease: 'expo.out',
      scrollTrigger: {
        trigger: cards[i + 1],
        scroller: '.stack-scroller',
        start: 'top 80%',
        end: 'top 20%',
        scrub: 1.4,
      },
    });
  });
}

<!-- Skeleton: editorial sticky-stacking (laag B — asymmetric magazine grid) -->
<section class="ed-frame">
  <aside class="ed-eyebrow">
    <span class="ed-rule"></span>
    <span class="ed-tag">Issue 04</span>
    <span>Process</span>
  </aside>
  <div class="stack-scroller">
    <header class="ed-essay-head">
      <p class="ed-kicker">Notes on craft</p>
      <h2 class="ed-deck">A short essay, in <em>four movements</em>.</h2>
    </header>
    <div class="stack-stage">
      <article class="stack-card">
        <span class="stack-folio">i.</span>
        <div>
          <h3 class="stack-kicker">Premise</h3>
          <p class="stack-lede">A page is not a brochure — <em>it is an argument</em>.</p>
        </div>
      </article>
      <article class="stack-card">
        <span class="stack-folio">ii.</span>
        <div>
          <h3 class="stack-kicker">Tension</h3>
          <p class="stack-lede">Hold the eye. <em>Refuse</em> the obvious turn.</p>
        </div>
      </article>
      <article class="stack-card">
        <span class="stack-folio">iii.</span>
        <div>
          <h3 class="stack-kicker">Release</h3>
          <p class="stack-lede">Let the line break <em>before</em> the breath does.</p>
        </div>
      </article>
      <article class="stack-card">
        <span class="stack-folio">iv.</span>
        <div>
          <h3 class="stack-kicker">Coda</h3>
          <p class="stack-lede"><em>Style</em> is what survives the rewrite.</p>
        </div>
      </article>
    </div>
  </div>
</section>

/* Styling: editorial (laag C — magazine-feel) */
.ed-frame {
  --paper: #F4F1EB; --ink: #0A0A0A; --rule: rgba(10,10,10,0.22); --accent: #B83A2D;
  background: var(--paper); color: var(--ink);
  font-family: 'Fraunces', 'Times New Roman', serif;
  display: grid; grid-template-columns: 7ch 1fr; gap: clamp(1.5rem, 4vw, 4rem);
}
.ed-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.ed-eyebrow span[class$="tag"] { color: var(--accent); }
.ed-deck { font-size: clamp(2rem, 5vw, 4rem); font-style: italic; font-weight: 300; line-height: 1; max-width: 18ch; }
.ed-deck em { color: var(--accent); }
.stack-card {
  position: sticky; top: 0;
  background: var(--paper); border-top: 1px solid var(--rule);
  padding: clamp(2rem, 4vw, 3rem) 0;
  display: grid; grid-template-columns: 5ch 1fr; gap: 1.5rem; align-items: baseline;
  min-height: 50vh;
}
.stack-folio { font-style: italic; font-size: 1.4rem; color: var(--accent); }
.stack-kicker {
  font-family: 'JetBrains Mono', monospace; font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
  margin: 0 0 1rem; color: rgba(10,10,10,0.6);
}
.stack-lede { font-size: clamp(1.5rem, 3.2vw, 2.6rem); line-height: 1.12; font-weight: 300; max-width: 28ch; margin: 0; }
.stack-lede em { color: var(--accent); font-style: italic; }
.stack-scroller { height: 70vh; overflow-y: scroll; padding-right: 1rem; }