/*
Homepage
*/

// This script changes the text when hovering over faces on the home page.
function setHoverText(elementId, text) {
     const hoverTextElement = document.getElementById('hover-text');

     document.getElementById(elementId).onmouseover = function () {
          hoverTextElement.innerHTML = text;
          hoverTextElement.classList.remove('leave');
          hoverTextElement.classList.add('fade-in');
     };

     document.getElementById(elementId).onmouseout = function () {
          hoverTextElement.classList.remove('fade-in');
          hoverTextElement.classList.add('leave');
     };
}

setHoverText('visual-hover', 'a thousand words at a time');
setHoverText('technical-hover', 'in zeroes, ones, and other numbers');
setHoverText('writing-hover', 'letter by letter, word by word');


// This script does the animations for the faces on the home page.
document.addEventListener('DOMContentLoaded', function () {
     const imageContainers = document.querySelectorAll('.face');

     setTimeout(() => {
          imageContainers.forEach((container, index) => {
               setTimeout(() => {
                    container.classList.add('active');
               }, (index + 1) * 1000); // Adjust delay between images
          });
     }, 4800);
});