// ============================================================
// 3. START EXPERIENCE BUTTON - MAIN PRIORITY
// ============================================================
const expBtn = document.getElementById('exp-btn');

expBtn.addEventListener('click', () => {
    // Play the opening sound
    openingSound.play().catch(err => console.log("Audio autoplay blocked by browser"));
    
    // Optional: Smooth scroll back to top to "start" the experience
    window.scrollTo({ top: 0, behavior: 'smooth' });
    
    console.log("✓ Experience Started");
});

// ============================================================
// 4. CLICK SOUNDS FOR ALL NAV LINKS & BUTTONS
// ============================================================
// We select all links and buttons except the one we just handled
const allClickables = document.querySelectorAll('a, button:not(#exp-btn)');

allClickables.forEach((el) => {
    el.addEventListener('click', function(e) {
        // Play click sound
        clickSound.currentTime = 0;
        clickSound.play().catch(err => console.log("Click sound blocked"));
        
        // Note: Navigation will happen naturally via the href 
        // or button action after the sound plays.
    });
});

// ============================================================
// 5. NAV SCROLL EFFECT
// ============================================================
window.addEventListener('scroll', () => {
    const nav = document.getElementById('nav');
    if (window.scrollY > 50) {
        nav.classList.add('scrolled');
    } else {
        nav.classList.remove('scrolled');
    }
});

// ============================================================
// 6. REVEAL ANIMATIONS ON SCROLL
// ============================================================
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
});

document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>
</body>
</html>