document.addEventListener('DOMContentLoaded', () => {
    const root = document.documentElement;
    const scene = document.getElementById('space-scene');
    const stage = document.getElementById('error-stage');
    const parallaxItems = Array.from(document.querySelectorAll('.parallax-item'));
    const backLink = document.querySelector('[data-action="back"]');

    const moveScene = (clientX, clientY) => {
        const xRatio = clientX / window.innerWidth - 0.5;
        const yRatio = clientY / window.innerHeight - 0.5;

        root.style.setProperty('--pointer-x', `${clientX}px`);
        root.style.setProperty('--pointer-y', `${clientY}px`);

        parallaxItems.forEach((item) => {
            const depth = Number.parseFloat(item.dataset.depth || '0');
            const moveX = xRatio * depth;
            const moveY = yRatio * depth;
            item.style.transform = `translate3d(${moveX}px, ${moveY}px, 0)`;
        });
    };

    document.addEventListener('pointermove', (event) => {
        moveScene(event.clientX, event.clientY);
    }, { passive: true });

    const spawnWave = (clientX, clientY) => {
        if (!scene) return;
        const wave = document.createElement('span');
        wave.className = 'stellar-wave';
        wave.style.left = `${clientX}px`;
        wave.style.top = `${clientY}px`;
        scene.appendChild(wave);
        window.setTimeout(() => wave.remove(), 1600);
    };

    stage?.addEventListener('click', (event) => {
        spawnWave(event.clientX, event.clientY);
    });

    backLink?.addEventListener('click', (event) => {
        event.preventDefault();
        if (window.history.length > 1) {
            window.history.back();
            return;
        }
        window.location.href = '/';
    });

    window.addEventListener('blur', () => {
        parallaxItems.forEach((item) => {
            item.style.transform = 'translate3d(0, 0, 0)';
        });
    });

    moveScene(window.innerWidth / 2, window.innerHeight / 2);
});