// Mechanisme: pricing-hover-tilt-minimal — 3D tilt naar cursor + auto-demo cycle
import gsap from 'https://esm.sh/[email protected]';
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const cards = document.querySelectorAll('.tilt-card');
cards.forEach(c => {
  c.addEventListener('mousemove', e => {
    const r = c.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width - 0.5;
    const y = (e.clientY - r.top) / r.height - 0.5;
    gsap.to(c, { rotateX: -y*10, rotateY: x*10, duration: 0.35, ease: 'power2.out', transformPerspective: 900 });
  });
  c.addEventListener('mouseleave', () => gsap.to(c, { rotateX:0, rotateY:0, duration: 0.9, ease: 'power2.out' }));
});
// AUTO-DEMO: cycle een fake-hover om de 3s zodat techniek zichtbaar is zonder cursor
let i = 0;
setInterval(() => {
  const c = cards[i % cards.length];
  gsap.to(c, {
    rotateX: gsap.utils.random(-10, 10),
    rotateY: gsap.utils.random(-10, 10),
    duration: 1.0, ease: 'power2.out', transformPerspective: 900,
    onComplete: () => gsap.to(c, { rotateX:0, rotateY:0, duration: 1.2, ease: 'power2.out', delay: 0.5 })
  });
  i++;
}, 3000);

<!-- Skeleton: pricing-hover-tilt-minimal — 3 minimal pricing cards -->
<div class="tilt-grid">
  <article class="tilt-card">
    <span class="plan-label">Starter</span>
    <p class="plan-price">€499<span>/mo</span></p>
    <ul class="plan-features">
      <li>5 projecten</li>
      <li>Basis support</li>
      <li>1 gebruiker</li>
    </ul>
    <a class="plan-cta" href="#">Begin nu</a>
  </article>
  <!-- repeat 3x -->
</div>

/* Styling: pricing-hover-tilt-minimal */
:root {
  --block-bg: #F4F1EB;
  --block-card-bg: #ffffff;
  --block-ink: #0A0A0A;
  --block-muted: rgba(10,10,10,.45);
}
.tilt-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; perspective: 1100px; }
.tilt-card { background: var(--block-card-bg); border: 1px solid rgba(10,10,10,.18); border-radius: 2px; box-shadow: 0 2px 12px rgba(10,10,10,.06); padding: 2.5rem 2rem; font-family: 'Archivo', sans-serif; transform-style: preserve-3d; will-change: transform; }
.plan-label { font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--block-muted); }
.plan-price { font-size: 3rem; font-weight: 300; letter-spacing: -.04em; margin: 1.25rem 0 1.5rem; line-height: 1; }
.plan-price span { font-size: .9rem; font-weight: 400; color: var(--block-muted); letter-spacing: 0; }
.plan-features { list-style: none; padding: 0; margin: 0 0 2rem; border-top: 1px solid rgba(10,10,10,.12); }
.plan-features li { font-size: .85rem; font-weight: 300; color: var(--block-muted); padding: .65rem 0; border-bottom: 1px solid rgba(10,10,10,.07); }
.plan-cta { display: block; text-align: center; padding: .85rem; background: transparent; color: var(--block-ink); text-decoration: none; font-size: .8rem; font-weight: 400; letter-spacing: .1em; border: 1px solid rgba(10,10,10,.35); transition: background .2s, color .2s; }