// Mechanisme: testimonial-stacking-quotes-quiet
import gsap from 'https://esm.sh/[email protected]';
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const cards = gsap.utils.toArray('.qq-card');
if (reduce) {
  cards.forEach(c => gsap.set(c, { autoAlpha: 0.7 }));
  gsap.set(cards[0], { autoAlpha: 1 });
} else {
  gsap.set(cards, { y: 60, autoAlpha: 0 });
  gsap.set(cards[0], { y: 0, autoAlpha: 0.7 });
  let i = 0;
  const advance = () => {
    const next = (i + 1) % cards.length;
    gsap.to(cards[i], { autoAlpha: 0.4, duration: 1.6, ease: 'power1.out' });
    gsap.fromTo(cards[next], { y: 60, autoAlpha: 0 }, { y: 0, autoAlpha: 0.7, duration: 1.6, ease: 'power1.out' });
    i = next;
  };
  setInterval(advance, 3500);
}

<!-- Skeleton: testimonial-stacking-quotes-quiet -->
<section class="qq-wrap">
  <span class="qq-eyebrow">— stemmen —</span>
  <div class="qq-stack">
    <article class="qq-card"><p class="qq-text">Het werk voelt alsof er nauwelijks aan getrokken is. Precies wat we zochten.</p><p class="qq-attr">Sanne — studio van Loon</p></article>
    <article class="qq-card"><p class="qq-text">Klein, rustig, en heel precies. Alles wat we niet konden formuleren.</p><p class="qq-attr">Joris — atelier hertog</p></article>
    <article class="qq-card"><p class="qq-text">Het is geen schreeuw, het is een kamer. Mensen blijven langer.</p><p class="qq-attr">Iris — uitgeverij elst</p></article>
    <article class="qq-card"><p class="qq-text">Niets in de weg, alles op zijn plaats.</p><p class="qq-attr">Marit — kade 11</p></article>
  </div>
</section>

/* Styling: testimonial-stacking-quotes-quiet — quiet */
.qq-wrap { background:#F4F1EB; color:#0A0A0A; min-height:100vh; padding:14vh 8vw; font-family:'Inter',system-ui,sans-serif; font-weight:300; }
.qq-eyebrow { font-size:.74rem; letter-spacing:.2em; color:rgba(10,10,10,.45); text-transform:lowercase; }
.qq-stack { position:relative; max-width:48rem; margin:6rem auto 0; min-height:46vh; }
.qq-card { position:absolute; inset:0; padding:2rem 0; }
.qq-text { font-family:'Fraunces',serif; font-weight:300; font-style:italic; font-size:clamp(1.4rem,2.8vw,2.2rem); line-height:1.35; margin:0 0 1.2rem; color:rgba(10,10,10,.7); letter-spacing:-.005em; }
.qq-attr { margin:0; font-size:.82rem; letter-spacing:.04em; color:rgba(10,10,10,.45); }