// Mechanisme: form-success-burst-playful
// Submit triggert form-fade-out -> success-state-fade-in + 12-stuks confetti-burst.
// Auto-demo: elke 5s opnieuw zonder user-interactie.
import gsap from 'https://esm.sh/[email protected]';
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
  document.querySelector('.fsb-form').style.opacity = '0';
  document.querySelector('.fsb-success').style.opacity = '1';
  return;
}
const form = document.querySelector('.fsb-form');
const success = document.querySelector('.fsb-success');
const particles = document.querySelectorAll('.fsb-particle');

function play() {
  gsap.set(success, { autoAlpha: 0, scale: 0.6 });
  gsap.set(form, { autoAlpha: 1, scale: 1 });
  gsap.set(particles, { x: 0, y: 0, scale: 0, autoAlpha: 1 });
  const tl = gsap.timeline();
  tl.to(form, { autoAlpha: 0, scale: 0.92, duration: 0.35, ease: 'power2.in' })
    .to(success, { autoAlpha: 1, scale: 1, duration: 0.6, ease: 'back.out(2)' }, '-=0.05')
    .to(particles, {
      x: (i) => Math.cos((i / 12) * Math.PI * 2) * 140,
      y: (i) => Math.sin((i / 12) * Math.PI * 2) * 140,
      scale: 1, duration: 0.7, ease: 'back.out(2)', stagger: 0.015
    }, '-=0.4')
    .to(particles, { autoAlpha: 0, duration: 0.4, ease: 'power2.in' }, '-=0.1');
}

form.addEventListener('submit', (e) => { e.preventDefault(); play(); });
play();
setInterval(play, 5000);

<!-- Skeleton: form-success-burst-playful -->
<div class="fsb-stage">
  <form class="fsb-form">
    <label>Email <input type="email" placeholder="[email protected]"/></label>
    <button type="submit">Aanmelden</button>
  </form>
  <div class="fsb-success">
    <div class="fsb-check">v</div>
    <p>Yes! Je staat op de lijst.</p>
  </div>
  <div class="fsb-burst" aria-hidden="true">
    <span class="fsb-particle"></span><!-- x12, kleuren via :nth-child -->
  </div>
</div>

/* Styling-template: form-success-burst-playful */
:root {
  --fsb-bg: #FFE3EE;
  --fsb-cream: #FFF8F0;
  --fsb-ink: #2A1A22;
  --fsb-accent-1: #B5E3FF;
  --fsb-accent-2: #C9F2D3;
  --fsb-accent-3: #FFD6A5;
  --fsb-radius: 999px;
  --fsb-font: 'Quicksand', system-ui, sans-serif;
}