// Mechanisme: cta-audio-cue-kinetic
import gsap from 'https://esm.sh/gsap@3.12.5';
// WebAudio synthesized click + whoosh — kinetic = snappy, korte decay 50-80ms.
const reduce=window.matchMedia('(prefers-reduced-motion: reduce)').matches;
const ac=new(window.AudioContext||window.webkitAudioContext)();
const tick=(f=1200)=>{const o=ac.createOscillator(),g=ac.createGain();o.type='square';o.connect(g);g.connect(ac.destination);o.frequency.value=f;g.gain.setValueAtTime(0.18,ac.currentTime);g.gain.exponentialRampToValueAtTime(0.001,ac.currentTime+0.06);o.start();o.stop(ac.currentTime+0.07);};
const whoosh=()=>{const o=ac.createOscillator(),g=ac.createGain();o.type='sawtooth';o.connect(g);g.connect(ac.destination);o.frequency.setValueAtTime(180,ac.currentTime);o.frequency.exponentialRampToValueAtTime(720,ac.currentTime+0.07);g.gain.setValueAtTime(0.10,ac.currentTime);g.gain.exponentialRampToValueAtTime(0.001,ac.currentTime+0.08);o.start();o.stop(ac.currentTime+0.08);};
let on=false;
const tgl=document.querySelector('.audio-toggle');const cta=document.querySelector('.audio-cta');
tgl?.addEventListener('click',()=>{on=!on;tgl.textContent='AUDIO: '+(on?'AAN':'UIT');tgl.classList.toggle('on',on);if(ac.state==='suspended')ac.resume();});
cta?.addEventListener('mouseenter',()=>{if(on&&!reduce){whoosh();gsap.to(cta,{scale:1.04,duration:0.18,ease:'power4.out'});}});
cta?.addEventListener('mouseleave',()=>{if(!reduce)gsap.to(cta,{scale:1,duration:0.25,ease:'power4.out'});});
cta?.addEventListener('click',()=>{if(on&&!reduce){tick();gsap.fromTo(cta,{scale:0.94},{scale:1,duration:0.6,ease:'power4.out'});}});

<!-- Skeleton: cta-audio-cue-kinetic -->
<div class="demo-block">
  <button class="audio-toggle">AUDIO: UIT</button>
  <button class="audio-cta">Klik (audio aan)</button>
</div>

/* Styling: cta-audio-cue-kinetic */
:root {
  --block-bg: #0A0A0A;
  --block-fg: #F4F1EB;
  --block-accent: #FF4A1C;
}