logo.js

const nameEl = document.getElementById('siteName');

// Split the text into individual letter spans
const text = nameEl.textContent;
nameEl.textContent = '';
const letters = [...text].map(ch => {
  const span = document.createElement('span');
  span.className = 'letter';
  span.textContent = ch === ' ' ? '\u00A0' : ch;
  nameEl.appendChild(span);
  return span;
});

const RADIUS = 120;      // how far the effect reaches (px)
const MAX_LIFT = 10;     // max upward shift (px)
const MAX_SCALE = 0.25;  // max extra scale

function updateLetters(mouseX, mouseY) {
  letters.forEach(letter => {
    const rect = letter.getBoundingClientRect();
    const cx = rect.left + rect.width / 2;
    const cy = rect.top + rect.height / 2;
    const dist = Math.hypot(mouseX - cx, mouseY - cy);

    if (dist < RADIUS) {
      const strength = 1 - dist / RADIUS;
      const lift = MAX_LIFT * strength;
      const scale = 1 + MAX_SCALE * strength;

      letter.style.transform = `translateY(${-lift}px) scale(${scale})`;
      letter.style.color = `hsl(${174 + strength * 40}, 70%, ${55 + strength * 20}%)`;
      letter.style.textShadow = `0 0 ${strength * 18}px rgba(79, 209, 197, ${strength})`;
    } else {
      letter.style.transform = 'translateY(0) scale(1)';
      letter.style.color = '';
      letter.style.textShadow = 'none';
    }
  });
}

window.addEventListener('mousemove', e => {
  updateLetters(e.clientX, e.clientY);
});

window.addEventListener('mouseleave', () => {
  letters.forEach(letter => {
    letter.style.transform = 'translateY(0) scale(1)';
    letter.style.color = '';
    letter.style.textShadow = 'none';
  });
});