Gesture & Hover

// Hover enter / leave
el.addEventListener('mouseenter', () =>
    Motion.animate(el, { scale:1.04, y:-2 }, { duration:0.2, easing:'ease-out' }))
el.addEventListener('mouseleave', () =>
    Motion.animate(el, { scale:1, y:0 }, { duration:0.3, easing:'ease-out' }))

// Magnetic pull — track mouse relative to element center
el.addEventListener('mousemove', e => {
    var rect = el.getBoundingClientRect()
    var dx = (e.clientX - rect.left - rect.width/2) * 0.3
    var dy = (e.clientY - rect.top  - rect.height/2) * 0.3
    Motion.animate(el, { x:dx, y:dy }, { duration:0.3, easing:'ease-out' })
})

// Click ripple
el.addEventListener('click', e => {
    var dot = document.createElement('span')
    dot.style.cssText = 'position:absolute;width:8px;height:8px;border-radius:50%;background:var(--primary);pointer-events:none'
    dot.style.left = (e.offsetX - 4) + 'px'
    dot.style.top  = (e.offsetY - 4) + 'px'
    el.appendChild(dot)
    Motion.animate(dot, { scale:[0,10], opacity:[0.6,0] }, { duration:0.5 })
        .then(() => dot.remove())
})