document.addEventListener('DOMContentLoaded', () => {
    const audio = document.getElementById('bgAudio');
    const muteBtn = document.getElementById('muteBtn');
    let isMuted = false;
    
    // Ensure audio plays even after refresh
    audio.volume = 0.2;
    document.body.addEventListener('click', () => {
        audio.play().catch(e => console.log('Autoplay prevented:', e));
    }, { once: true });

    muteBtn.addEventListener('click', () => {
        isMuted = !isMuted;
        audio.muted = isMuted;
        muteBtn.innerHTML = isMuted ? 
            '<i data-feather="volume-x"></i>' : 
            '<i data-feather="volume-2"></i>';
        feather.replace();
    });
    // Smooth hover transitions handled in CSS
// Randomly change the background gradient direction
    setInterval(() => {
        const directions = [
            'to right bottom',
            'to left top',
            'to right top',
            'to left bottom'
        ];
        const randomDir = directions[Math.floor(Math.random() * directions.length)];
        document.querySelector('div.absolute.inset-0').style.background = 
            `linear-gradient(${randomDir}, transparent, black, black)`;
    }, 10000);
});