HTMLify

document.addEventListener('DOMContentLoaded', () => {
    // 1. Setup Intersection Observer for Scroll Animations
    const observerOptions = {
        root: null,
        rootMargin: '0px',
        threshold: 0.1 
    };

    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.classList.add('visible');
                observer.unobserve(entry.target);
            }
        });
    }, observerOptions);

    document.querySelectorAll('.fade-in, .fade-in-delay-1, .fade-in-delay-2, .fade-in-delay-3').forEach(element => {
        observer.observe(element);
    });
    
    // Manually trigger visibility for hero elements on load
    document.querySelector('.hero').classList.add('visible');
    if (document.querySelector('.about-hero')) {
        document.querySelector('.about-hero').classList.add('visible');
    }

    // 2. Handle Slider Input Feedback
    const volumeSlider = document.getElementById('volume-slider');
    const volumeValueSpan = document.getElementById('volume-value');

    if (volumeSlider && volumeValueSpan) {
        volumeSlider.addEventListener('input', (e) => {
            volumeValueSpan.textContent = e.target.value;
        });
    }

    // 3. Simple Button Click Feedback (Optional: for demonstration)
    document.querySelectorAll('.btn:not([disabled])').forEach(button => {
        button.addEventListener('click', (e) => {
            // Prevent the button from immediately losing the hover/active state if it causes a re-render
            if (e.target.classList.contains('icon-btn')) {
                console.log('Icon button clicked!');
            } else {
                console.log(`${e.target.textContent.trim().replace(/\s+/g, ' ')} button clicked.`);
            }
        });
    });
});