// Mouse-only effects: border glow that follows the cursor and buttons that lean towards it
export function initPointerEffects() {
  if (!matchMedia('(hover: hover) and (pointer: fine)').matches) return;

  document.addEventListener(
    'pointermove',
    (event) => {
      const element = event.target.closest?.('[data-glow]');
      if (!element) return;
      const rect = element.getBoundingClientRect();
      element.style.setProperty('--mx', `${event.clientX - rect.left}px`);
      element.style.setProperty('--my', `${event.clientY - rect.top}px`);
    },
    { passive: true },
  );

  if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;

  for (const element of document.querySelectorAll('[data-magnetic]')) {
    element.addEventListener('pointermove', (event) => {
      const rect = element.getBoundingClientRect();
      const x = (event.clientX - rect.left - rect.width / 2) * 0.2;
      const y = (event.clientY - rect.top - rect.height / 2) * 0.35;
      element.style.translate = `${x.toFixed(1)}px ${y.toFixed(1)}px`;
    });
    element.addEventListener('pointerleave', () => {
      element.style.translate = '';
    });
  }
}