HTMLify

document.addEventListener('DOMContentLoaded', () => {
    // 1. Mobile Menu Toggle
    const menuToggle = document.getElementById('menu-toggle');
    const navLinks = document.querySelector('.nav-links');

    if (menuToggle && navLinks) {
        menuToggle.addEventListener('click', () => {
            navLinks.classList.toggle('active');
        });
    }

    // 2. Intersection Observer for Scroll Animations
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 // Trigger when 10% of the element is visible
    };

    const observerCallback = (entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const element = entry.target;
                
                // Remove the general hidden class
                element.style.opacity = '1';
                
                // Apply specific class logic based on predefined CSS animation classes
                // We check for the base animation classes and remove them to let CSS handle the rest
                if (element.classList.contains('fade-in')) {
                    element.classList.remove('fade-in');
                } else if (element.classList.contains('fade-in-up')) {
                    element.classList.remove('fade-in-up');
                } else if (element.classList.contains('scale-up')) {
                    element.classList.remove('scale-up');
                }

                // For elements that might be repeated (like cards), stop observing once animated
                if (element.closest('.grid-summary') || element.closest('.bento-grid') || element.closest('.team-grid')) {
                    observer.unobserve(element);
                }
            }
        });
    };

    const observer = new IntersectionObserver(observerCallback, observerOptions);

    // Select all elements that need scroll animation
    const elementsToAnimate = document.querySelectorAll(
        '.hero h1, .hero p, .hero .cta-group, .section-title, 
         .summary-card, .mission-statement > div > *, 
         .page-header > *, .bento-item, .team-member, .form-container'
    );

    elementsToAnimate.forEach(el => {
        // Ensure the element has the necessary initial state class before observing
        // The CSS handles the initial opacity: 0 and transform, JS just triggers the removal of the class to start the animation
        observer.observe(el);
    });

    // Manually trigger animations for elements that are in the viewport on load (like Hero content)
    const heroElements = document.querySelectorAll('.hero [class*="fade-in"]');
    heroElements.forEach(el => {
        if (el.getBoundingClientRect().top < window.innerHeight) {
            el.style.opacity = '1';
            el.classList.remove('fade-in', 'fade-in-up', 'scale-up');
        }
    });
});