document.addEventListener('DOMContentLoaded', () => {
  const cards = Array.from(document.querySelectorAll('[data-drift]'));
  const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

  if (!cards.length || reduceMotion) {
    return;
  }

  const updateCard = (card, xRatio, yRatio) => {
    const depth = Number(card.dataset.drift || 10);
    const offsetX = xRatio * depth;
    const offsetY = yRatio * depth;
    card.style.transform = `translate3d(${offsetX.toFixed(2)}px, ${offsetY.toFixed(2)}px, 0)`;
  };

  const resetCard = (card) => {
    card.style.transform = '';
  };

  cards.forEach((card, index) => {
    card.style.animation = `floaty ${9 + (index % 4)}s ease-in-out ${index * -0.8}s infinite`;
  });

  window.addEventListener('mousemove', (event) => {
    const xRatio = (event.clientX / window.innerWidth - 0.5) * 1.2;
    const yRatio = (event.clientY / window.innerHeight - 0.5) * 1.2;
    cards.forEach((card) => updateCard(card, xRatio, yRatio));
  }, { passive: true });

  window.addEventListener('mouseleave', () => {
    cards.forEach(resetCard);
  });
});
