// Mechanisme: pricing-hover-tilt-brutalist — 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*16,rotateY:x*16,duration:0.25,ease:'power2.out',transformPerspective:900});
  });
  c.addEventListener('mouseleave',()=>gsap.to(c,{rotateX:0,rotateY:0,duration:0.4,ease:'power4.out'}));
});
// AUTO-DEMO: cycle een fake-hover om de 2.5s zodat techniek zichtbaar is zonder cursor
let i=0;
setInterval(()=>{
  const c=cards[i%cards.length];
  gsap.to(c,{rotateX:gsap.utils.random(-14,14),rotateY:gsap.utils.random(-14,14),duration:0.6,ease:'power3.out',transformPerspective:900,onComplete:()=>{
    gsap.to(c,{rotateX:0,rotateY:0,duration:0.6,ease:'power4.out',delay:0.4});
  }});
  i++;
},2500);

<!-- Skeleton: pricing-hover-tilt-brutalist — 3 brutalist pricing cards -->
<div class="tilt-grid">
  <article class="tilt-card">
    <p class="tier">START</p>
    <p class="price">€499</p>
    <ul><li>5 projecten</li><li>Basis support</li><li>1 gebruiker</li></ul>
    <a class="cta" href="#">SELECT →</a>
  </article>
  <!-- repeat 3x -->
</div>

/* Styling: pricing-hover-tilt-brutalist */
.tilt-card { background:#fff; border:2px solid #0A0A0A; border-radius:0; box-shadow:8px 8px 0 0 #0A0A0A; font-family:'JetBrains Mono',monospace; text-transform:uppercase; }
.tilt-card.hot { box-shadow:8px 8px 0 0 #FF4A1C; }
.tilt-card .price { font-size:3.5rem; font-weight:700; }