// Mechanisme: per-section theme cycle on enter — back.out bounce
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 root = document.querySelector('.play-theme');
gsap.utils.toArray('.play-theme__section').forEach(sec => {
  ScrollTrigger.create({
    trigger: sec, start: 'top 60%', end: 'bottom 60%',
    onEnter: () => apply(sec), onEnterBack: () => apply(sec)
  });
});
function apply(sec) {
  gsap.to(root, { backgroundColor: sec.dataset.bg, color: sec.dataset.fg, duration: 0.8, ease: 'back.out(1.7)' });
  gsap.to('.play-theme__pill', { backgroundColor: sec.dataset.accent, duration: 0.8, ease: 'back.out(1.7)' });
}

<!-- Skeleton: 3 themed sections + cycling pill -->
<div class="play-theme">
  <span class="play-theme__pill">scroll ↓</span>
  <section class="play-theme__section" data-bg="#FFF8EE" data-fg="#0A0A0A" data-accent="#FFE3EE">
    <h3>Cream begin.</h3>
    <p>We starten zacht. Alles is op zijn rustigst hier — het oog mag bijkomen.</p>
  </section>
  <section class="play-theme__section" data-bg="#FFE3EE" data-fg="#3A0F22" data-accent="#A8E6CF">
    <h3>Pink playground.</h3>
    <p>Het tempo gaat omhoog. We voegen kleur toe en spelen met het ritme.</p>
  </section>
  <section class="play-theme__section" data-bg="#A8E6CF" data-fg="#0F3A24" data-accent="#FFE3EE">
    <h3>Mint resolve.</h3>
    <p>Een rustige landing in een fris veld. Het gesprek gaat hier door.</p>
  </section>
</div>

/* Styling: playful — pastel cycle, Quicksand rounded */
.play-theme { background:#FFF8EE; color:#0A0A0A; font-family:'Quicksand',sans-serif; min-height:70vh; position:relative; }
.play-theme__pill { position:sticky; top:1.5rem; left:calc(100% - 12rem); display:inline-block; background:#FFE3EE; color:#0A0A0A; padding:.6rem 1.2rem; border-radius:9999px; font-size:.85rem; font-weight:500; z-index:5; box-shadow:0 4px 18px rgba(0,0,0,.06); }
.play-theme__section { padding:18vh 8vw; max-width:780px; }
.play-theme__section h3 { font-family:'Quicksand',sans-serif; font-weight:700; font-size:clamp(2rem,5vw,4rem); margin:0 0 1rem; letter-spacing:-.02em; }
.play-theme__section p { font-size:1.05rem; line-height:1.65; max-width:36ch; margin:0; }