HTMLify

// JavaScript for basic interactivity and animation triggering

document.addEventListener('DOMContentLoaded', () => {
    // 1. Simple Search Bar Toggle (Placeholder functionality)
    const searchToggle = document.querySelector('.search-toggle');
    if (searchToggle) {
        searchToggle.addEventListener('click', () => {
            const searchInput = document.querySelector('.search-bar input[type="text"]');
            if (searchInput) {
                searchInput.focus();
            }
            // In a real app, this might toggle a full-screen search overlay
        });
    }

    // 2. Intersection Observer for Scroll Animations (Applies to all pages)
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.opacity = 1;
                entry.target.style.transform = 'translateY(0) translateX(0)';
                entry.target.classList.add('is-visible');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    // Find all elements marked for animation but haven't been initialized by HTML classes yet
    document.querySelectorAll('.fade-in-up, .fade-in-left, .fade-in').forEach(el => {
        // If the element is already in the viewport on load, it will be handled by the CSS keyframes immediately.
        // If it's off-screen, observe it.
        observer.observe(el);
    });
    
    // Manually set initial state for JS-controlled animation elements if needed, 
    // though in this setup, the CSS handles the initial hidden state via the class being present.
    document.querySelectorAll('.fade-in-up, .fade-in-left').forEach(el => {
        if (!el.classList.contains('is-visible')) {
             el.style.opacity = 0;
        }
    });
});