<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loading...</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: 'Outfit', sans-serif;
            color: white;
            cursor: pointer;
            overflow: hidden;
        }

        .glitch-container {
            position: relative;
        }

        .enter-text {
            font-size: 2em;
            font-weight: 500;
            text-transform: lowercase;
            position: relative;
            text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
                         0.025em 0.04em 0 #fffc00;
            animation: glitch 725ms infinite;
        }

        .enter-text span {
            position: absolute;
            top: 0;
            left: 0;
        }

        .enter-text span:first-child {
            animation: glitch 500ms infinite;
            clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
            transform: translate(-0.04em, -0.03em);
            opacity: 0.75;
        }

        .enter-text span:last-child {
            animation: glitch 375ms infinite;
            clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
            transform: translate(0.04em, 0.03em);
            opacity: 0.75;
        }

        @keyframes glitch {
            0% {
                text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
                            0.025em 0.04em 0 #fffc00;
            }
            15% {
                text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff,
                            0.025em 0.04em 0 #fffc00;
            }
            16% {
                text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
                            -0.05em -0.05em 0 #fffc00;
            }
            49% {
                text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff,
                            -0.05em -0.05em 0 #fffc00;
            }
            50% {
                text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
                            0 -0.04em 0 #fffc00;
            }
            99% {
                text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff,
                            0 -0.04em 0 #fffc00;
            }
            100% {
                text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff,
                            -0.04em -0.025em 0 #fffc00;
            }
        }

        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                to bottom,
                rgba(255,255,255,0) 50%,
                rgba(0,0,0,0.2) 50%
            );
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 1;
        }

        .noise {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                repeating-radial-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 0/2500px 2500px,
                repeating-conic-gradient(#000 0 0.0001%,#fff 0 0.0002%) 50% 50%/2500px 2500px;
            animation: noise 0.2s infinite;
            opacity: 0.05;
            pointer-events: none;
            z-index: 2;
        }

        @keyframes noise {
            100% {
                transform: translate(0.5px, 0.5px);
            }
        }

        .crt-flicker {
            animation: flicker 0.15s infinite;
        }

        @keyframes flicker {
            0% { opacity: 0.9; }
            50% { opacity: 1; }
            100% { opacity: 0.9; }
        }

        .enter-text:hover {
            animation: none;
            text-shadow: 0 0 10px #00fffc, 0 0 20px #00fffc, 0 0 30px #00fffc;
        }
    </style>
</head>
<body onclick="enterSite()">
    <div class="noise"></div>
    <div class="scanlines"></div>
    <div class="glitch-container">
        <div class="enter-text crt-flicker">
            click to enter...
            <span aria-hidden="true">click to enter...</span>
            <span aria-hidden="true">click to enter...</span>
        </div>
    </div>

    <audio id="audio" src="./music/central.mp3" preload="auto" loop></audio>

    <script>
        let hasClicked = false;

        function enterSite() {
            if (hasClicked) return;
            hasClicked = true;

            const audio = document.getElementById('audio');
            audio.play();
            window.location.href = 'index.html';
        }

        document.addEventListener('mousemove', (e) => {
            const text = document.querySelector('.enter-text');
            const { left, top, width, height } = text.getBoundingClientRect();
            const x = (e.clientX - left - width/2) / 20;
            const y = (e.clientY - top - height/2) / 20;
            text.style.transform = `translate(${x}px, ${y}px)`;
        });
    </script>
</body>
</html> 