js / script.js

document.addEventListener('DOMContentLoaded', () => {
  const targets = document.querySelectorAll('.card, .hero');
  const setPos = (el, x, y) => {
    const r = el.getBoundingClientRect();
    const px = ((x - r.left) / r.width) * 100;
    const py = ((y - r.top) / r.height) * 100;
    el.style.setProperty('--mx', px + '%');
    el.style.setProperty('--my', py + '%');
  };
  targets.forEach(el => {
    el.addEventListener('pointermove', e => setPos(el, e.clientX, e.clientY));
    el.addEventListener('mousemove',   e => setPos(el, e.clientX, e.clientY));
    el.addEventListener('touchmove', e => {
      if (e.touches && e.touches[0]) setPos(el, e.touches[0].clientX, e.touches[0].clientY);
    }, { passive: true });
  });

  const underline = document.querySelector('.nav-underline');
  const links = document.querySelectorAll('.links a');
  const active = document.querySelector('.links a.active');

  function moveUnderline(el, noTransition = false) {
    if (!underline || !el) return;
    if (noTransition) underline.classList.add('no-transition');
    const rect = el.getBoundingClientRect();
    const navRect = el.closest('.links').getBoundingClientRect();
    underline.style.width = rect.width + 'px';
    underline.style.transform = `translateX(${rect.left - navRect.left}px)`;
    if (noTransition) requestAnimationFrame(() => underline.classList.remove('no-transition'));
  }

  if (active) moveUnderline(active, true);

  links.forEach(link => {
    link.addEventListener('mouseenter', () => moveUnderline(link));
    link.addEventListener('mouseleave', () => moveUnderline(active));
  });

  window.addEventListener('resize', () => moveUnderline(document.querySelector('.links a.active'), true));
});