script.js

document.addEventListener('DOMContentLoaded', () => {
    const options = {
        root: null, // relative to the viewport
        rootMargin: '0px',
        threshold: 0.1 // 10% of the item must be visible
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            // If the element is intersecting (visible)
            if (entry.isIntersecting) {
                // Add the 'visible' class to trigger the animation
                entry.target.classList.add('visible');
                // Stop observing the element after it has become visible
                observer.unobserve(entry.target);
            }
        });
    }, options);

    // Select all elements that should be animated on scroll
    const animatedElements = document.querySelectorAll('.feature-card, .timeline li, .game-image, .element-card');

    // Observe each animated element
    animatedElements.forEach(el => {
        observer.observe(el);
    });
});