document.getElementById('entry').addEventListener('click', function() {
    this.style.display = 'none';
    document.getElementById('main').style.display = 'flex';
    document.getElementById('main').style.opacity = 1;

    const bgVideo = document.getElementById('bgVideo');
    bgVideo.style.display = 'block';
    bgVideo.play().catch(e => console.error("Video play failed:", e));

    document.getElementById('bgMusic').play().catch(e => console.error("Audio play failed:", e));
});

window.onload = function() {
    document.body.style.opacity = 1;
    monitorEnvironment();
}

const audioControl = document.getElementById('muteButton');
const backgroundMusic = document.getElementById('bgMusic');
let muted = false;

audioControl.addEventListener('click', function() {
    muted = !muted; 

    if (muted) {
        backgroundMusic.muted = true;
        audioControl.src = 'mp3/volumeoff.png'; 
    } else {
        backgroundMusic.muted = false;
        audioControl.src = 'mp3/volume.png'; 
    }
});

document.addEventListener('DOMContentLoaded', function() {
    const dynamicText = document.getElementById('typewriterText');
    dynamicText.textContent = "wsp gang!!";
    monitorEnvironment();
});

document.addEventListener('contextmenu', event => event.preventDefault());

document.addEventListener('DOMContentLoaded', function() {
    const linkRedirect = document.getElementById('serverLink');
    linkRedirect.addEventListener('click', function(event) {
        event.preventDefault(); 
        window.open('https://discord.gg/Cue44P2At5', '_blank'); 
    });

    const audioAdjustment = document.getElementById('volumeControl');
    audioAdjustment.addEventListener('input', function() {
        backgroundMusic.volume = this.value;
    });
});

function monitorEnvironment() {
    const state = {
        isActive: false,
        mode: undefined
    };
    const threshold = 160;

    setInterval(() => {
        const horizontalGap = window.outerWidth - window.innerWidth > threshold;
        const verticalGap = window.outerHeight - window.innerHeight > threshold;
        const layoutMode = horizontalGap ? 'horizontal' : 'vertical';

        if (!(verticalGap && horizontalGap) &&
            ((window.Firebug && window.Firebug.chrome && window.Firebug.chrome.isInitialized) || horizontalGap || verticalGap)) {
            if (!state.isActive || state.mode !== layoutMode) {
                state.isActive = true;
                state.mode = layoutMode;
                document.getElementById('main').style.display = 'none';
                window.location.href = "https://www.youtube.com/watch?v=SbYXkOAoZpI";
            }
        } else {
            if (state.isActive) {
                state.isActive = false;
                state.mode = undefined;
                document.getElementById('main').style.display = 'flex';
            }
        }
    }, 500);
}

document.addEventListener('keydown', function(event) {
    if (event.keyCode === 123) { 
        event.preventDefault(); 
        window.location.href = "https://www.youtube.com/watch?v=SbYXkOAoZpI";
    }
});

document.addEventListener('mousemove', function(e) {
    const sparkle = document.createElement('div');
    sparkle.className = 'sparkle';
    document.body.appendChild(sparkle);
    sparkle.style.left = `${e.pageX}px`;
    sparkle.style.top = `${e.pageY}px`;
    const size = Math.random() * 5 + 2; 
    sparkle.style.width = `${size}px`;
    sparkle.style.height = `${size}px`;

    setTimeout(() => {
        sparkle.remove();
    }, 600); 
});


document.querySelector('.content-box').addEventListener('mouseenter', (event) => {
    const randomX = Math.floor(Math.random() * 20) - 35; 
    const randomY = Math.floor(Math.random() * 20) - 35;
    event.target.style.transform = `translate(${randomX}px, ${randomY}px)`;
});

document.querySelector('.content-box').addEventListener('mouseleave', (event) => {
    event.target.style.transform = 'translate(0, 0)'; 
});





// Parallax Effect
const contentBox = document.querySelector('.content-box');

document.addEventListener('mousemove', (e) => {
    const { innerWidth: width, innerHeight: height } = window;
    const mouseX = (e.clientX - width / 2) / 20;
    const mouseY = (e.clientY - height / 2) / 20;
    
    contentBox.style.transform = `translate(${mouseX}px, ${mouseY}px)`;
});

document.addEventListener('mouseleave', () => {
    contentBox.style.transform = 'translate(0, 0)';
});


window.addEventListener('scroll', () => {
    const scrollY = window.scrollY / 10; 
    contentBox.style.transform = `translateY(${scrollY}px)`;
});