document.addEventListener('DOMContentLoaded', () => {
  function animateTitle(elementId) {
    const titleElement = document.getElementById(elementId);
    if (!titleElement) return;

    const text = titleElement.innerText;
    titleElement.innerHTML = '';

    // Wrap each letter in a span
    for (let i = 0; i < text.length; i++) {
      const char = text[i];
      const span = document.createElement('span');
      span.innerHTML = char === ' ' ? '&nbsp;' : char;
      titleElement.appendChild(span);
    }

    const letters = titleElement.children; // Use .children to get direct descendants

    function getRandomColor() {
      const hexChars = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += hexChars[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    // Animate each letter independently
    for (let i = 0; i < letters.length; i++) {
      const letter = letters[i];

      if (letter.innerHTML === '&nbsp;') continue;

      letter.style.color = getRandomColor();

      const randomInterval = Math.random() * 500 + 500;

      function animateLetter() {
        const randomRotation = Math.random() * 40 - 20;
        letter.style.transform = `rotate(${randomRotation}deg)`;
        setTimeout(animateLetter, randomInterval);
      }

      setTimeout(animateLetter, Math.random() * 1000);
    }
  }

  // Animate both titles
  animateTitle('title');
  animateTitle('about-title');
  animateTitle('controls-title');
});