<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>click anywhere</title>
    <style>
        @font-face {
            font-family: 'Minecraft';
            src: url('./fonts/minecraft-regular.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
            overflow: hidden;
        }

        /* Rain Container */
        .rain {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -2;
            transition: transform 0.5s ease-out;
            opacity: 1;
        }

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

        /* Individual Raindrops */
        .raindrop {
            position: absolute;
            width: 2px;
            height: 20px;
            background: linear-gradient(to bottom, 
                transparent,
                rgba(174, 194, 224, 0.1),
                rgba(174, 194, 224, 0.6)
            );
            animation: rain 1.5s linear infinite;
            transform: rotate(20deg);
            transition: transform 0.5s ease-out;
        }

        @keyframes rain {
            0% {
                transform: translateY(-20px);
                opacity: 0;
            }
            5% {
                opacity: 0.6;
            }
            90% {
                opacity: 0.6;
            }
            100% {
                transform: translateY(100vh);
                opacity: 0;
            }
        }

        #landing-page, #main-page {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: opacity 0.5s ease-in-out;
        }

        #landing-page {
            cursor: pointer;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: black;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
            z-index: 1000;
            transition: opacity 0.5s ease;
        }

        #main-page {
            opacity: 0;
            pointer-events: none;
        }

        .retro-text {
            font-family: 'Minecraft', monospace;
            color: white;
            font-size: 24px;
            text-align: center;
            animation: pulse 2s infinite, glow 2s infinite;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
                         0 0 10px rgba(255, 255, 255, 0.5),
                         0 0 15px rgba(255, 255, 255, 0.3);
        }

        .main-content {
            font-family: 'Minecraft', monospace;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            padding: 40px 20px;
            width: 300px;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.3),
                       0 0 10px rgba(255, 0, 0, 0.2),
                       0 0 15px rgba(255, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 0, 0, 0.2);
            z-index: 2;
        }

        .profile-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
            position: relative;
            padding: 30px;
            border-radius: 15px;
            overflow: hidden;
        }

        /* Blurred background layer */
        .profile-card::before {
            content: '';
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            background-image: url('prfbackground.jpg');
            background-size: cover;
            background-position: center;
            filter: blur(0.5px);
            z-index: 0;
        }

        /* Dark overlay */
        .profile-card::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: 1;
        }

        /* Make sure all content is above the background and overlay */
        .profile-card > * {
            position: relative;
            z-index: 2;
        }

        .profile-image {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid rgba(255, 0, 0, 0.3);
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
        }

        .profile-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .profile-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin: 10px 0;
        }

        .profile-name {
            color: #ff0000;
            font-size: 28px;
            margin: 0;
            letter-spacing: 8px;
            text-transform: uppercase;
            text-shadow: 0 0 3px rgba(255, 0, 0, 0.3),
                         0 0 6px rgba(255, 0, 0, 0.2);
        }

        .profile-title {
            color: #ffffff;
            font-size: 16px;
            margin: 0;
            padding: 6px 12px;
            background: rgba(255, 0, 0, 0.4);
            border-radius: 12px;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.5),
                       0 0 20px rgba(255, 0, 0, 0.3);
            text-transform: lowercase;
            letter-spacing: 3px;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8),
                        0 0 10px rgba(255, 255, 255, 0.5),
                        0 0 15px rgba(255, 255, 255, 0.3);
            display: inline-block;
            line-height: 1;
            position: relative;
            top: 1px;
        }

        .social-links {
            display: flex;
            gap: 20px;
            margin-top: 10px;
        }

        .social-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            transition: all 0.3s ease;
            position: relative;
        }

        .social-link img {
            width: 24px;
            height: 24px;
            filter: brightness(0) invert(1);
        }

        .social-link:hover {
            transform: translateY(-2px);
            background: rgba(255, 0, 0, 0.2);
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.3);
        }

        .social-link::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            padding: 4px 8px;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .social-link:hover::after {
            opacity: 1;
            visibility: visible;
            bottom: -25px;
        }

        .spotify-player {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.8);
            padding: 12px;
            border-radius: 8px;
            width: 350px;
            box-shadow: 0 0 10px rgba(255, 0, 0, 0.2);
            z-index: 10;
            border: 1px solid rgba(255, 0, 0, 0.2);
            display: none;
        }

        .song-info {
            color: white;
            margin-bottom: 5px;
            font-family: 'Minecraft', monospace;
            font-size: 12px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .song-title, .artist-name {
            position: relative;
            white-space: nowrap;
            overflow: hidden;
        }

        .song-title {
            color: white;
            font-weight: bold;
            margin-bottom: 2px;
            font-size: 14px;
            width: 100%;
        }

        .song-title span, .artist-name span {
            display: inline-block;
            padding-right: 50px;
            animation: none;
        }

        .song-title.scroll span, .artist-name.scroll span {
            animation: scrollText 10s linear infinite;
        }

        @keyframes scrollText {
            0% {
                transform: translateX(0);
            }
            45% {
                transform: translateX(calc(-100% + 300px));
            }
            50% {
                transform: translateX(calc(-100% + 300px));
            }
            95% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(0);
            }
        }

        .artist-name {
            color: #888;
            font-size: 12px;
            width: 100%;
        }

        .controls {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 8px 0;
        }

        .control-btn, .progress-bar, .volume-control {
            cursor: pointer;
        }

        .control-btn {
            background: none;
            border: none;
            color: #888;
            padding: 0;
            font-size: 16px;
            transition: color 0.2s;
        }

        .control-btn:hover {
            color: #fff;
        }

        .progress-bar {
            width: 100%;
            height: 4px;
            background: #333;
            border-radius: 2px;
            cursor: pointer;
            position: relative;
            margin: 10px 0;
        }

        .progress-bar::before {
            content: '';
            position: absolute;
            top: -8px;
            left: 0;
            right: 0;
            bottom: -8px;
            background: transparent;
        }

        .progress {
            height: 100%;
            background: #ff0000;
            border-radius: 2px;
            width: 0%;
            position: relative;
            pointer-events: none;
        }

        .progress-handle {
            width: 12px;
            height: 12px;
            background: #ff0000;
            border-radius: 50%;
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            cursor: grab;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
            pointer-events: all;
            z-index: 2;
        }

        .progress-preview {
            position: absolute;
            height: 100%;
            background: rgba(255, 0, 0, 0.3);
            border-radius: 2px;
            width: 0%;
            pointer-events: none;
            transition: opacity 0.2s ease;
            opacity: 0;
        }

        .progress-preview.active {
            opacity: 1;
        }

        .volume-control {
            width: 60px;
            height: 4px;
            background: #333;
            border-radius: 2px;
            cursor: pointer;
            position: relative;
        }

        .volume-level {
            height: 100%;
            background: #ff0000;
            border-radius: 2px;
            width: 50%;
            position: relative;
        }

        .volume-handle {
            width: 12px;
            height: 12px;
            background: #ff0000;
            border-radius: 50%;
            position: absolute;
            right: -6px;
            top: 50%;
            transform: translateY(-50%);
            cursor: grab;
            box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
        }

        .progress-handle:hover, .volume-handle:hover {
            transform: translateY(-50%) scale(1.1);
        }

        .progress-handle:active, .volume-handle:active {
            cursor: grabbing;
        }

        /* Sound visualization */
        .sound-bars {
            display: flex;
            align-items: center;
            gap: 2px;
            height: 20px;
            margin-top: 5px;
        }

        .sound-bar {
            width: 3px;
            background: #333;
            border-radius: 1px;
            transition: height 0.1s ease;
        }

        .sound-bar.active {
            background: #ff0000;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }

        @keyframes glow {
            0% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
                             0 0 10px rgba(255, 255, 255, 0.5),
                             0 0 15px rgba(255, 255, 255, 0.3); }
            50% { text-shadow: 0 0 10px rgba(255, 255, 255, 0.9),
                              0 0 20px rgba(255, 255, 255, 0.7),
                              0 0 30px rgba(255, 255, 255, 0.5); }
            100% { text-shadow: 0 0 5px rgba(255, 255, 255, 0.7),
                               0 0 10px rgba(255, 255, 255, 0.5),
                               0 0 15px rgba(255, 255, 255, 0.3); }
        }

        .landing-text {
            color: white;
            font-size: 32px;
            margin-top: 10vh;
            text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
            animation: pulse 2s infinite;
            font-family: 'Minecraft', monospace;
            letter-spacing: 2px;
        }

        .planet-container {
            position: relative;
            width: 200px;
            height: 200px;
            margin-top: 100px;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .saturn-container {
            position: relative;
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
        }

        .saturn-rings {
            position: absolute;
            width: 300px;
            height: 30px;
            left: -50px;
            top: 85px;
            background: linear-gradient(to right,
                transparent 0%,
                rgba(255, 255, 255, 0.3) 20%,
                rgba(255, 255, 255, 0.5) 50%,
                rgba(255, 255, 255, 0.3) 80%,
                transparent 100%
            );
            transform: rotateX(75deg);
            border-radius: 50%;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            opacity: 0;
            transition: opacity 1s ease;
        }

        .planet {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background-size: cover;
            background-position: center;
            transform-style: preserve-3d;
            transition: opacity 1s ease;
            box-shadow: inset -20px -20px 50px rgba(0,0,0,0.5),
                       0 0 30px rgba(255,255,255,0.3);
            backface-visibility: visible;
        }

        .sun {
            background-image: url('sun.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
            box-shadow: 0 0 10px #ff4500,
                       0 0 40px #ff6600,
                       0 0 70px #ff7700;
            animation: glow 2s infinite alternate;
        }

        @keyframes glow {
            from {
                box-shadow: 0 0 10px #ff4500,
                           0 0 40px #ff6600,
                           0 0 70px #ff7700;
            }
            to {
                box-shadow: 0 0 20px #ff4500,
                           0 0 60px #ff6600,
                           0 0 80px #ff7700;
            }
        }

        .mercury {
            background-image: url('mercury.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
        }

        .venus {
            background-image: url('venus.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
        }

        .earth {
            background-image: url('earth.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
            box-shadow: inset 0 0 50px rgba(0,0,255,0.3),
                       0 0 40px rgba(0,100,255,0.5);
        }

        .mars {
            background-image: url('mars.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
            box-shadow: inset 0 0 50px rgba(255,0,0,0.2),
                       0 0 30px rgba(255,0,0,0.4);
        }

        .jupiter {
            background-image: url('jupiter.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
        }

        .uranus {
            background-image: url('uranus.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
            box-shadow: inset 0 0 50px rgba(0,255,255,0.2),
                       0 0 30px rgba(0,255,255,0.4);
        }

        .neptune {
            background-image: url('neptune.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
            box-shadow: inset 0 0 50px rgba(0,0,255,0.2),
                       0 0 30px rgba(0,0,255,0.4);
        }

        .saturn {
            background-image: url('saturn.jpg');
            opacity: 1;  /* Start visible */
            transform: translateZ(0);
        }

        .saturn.visible {
            opacity: 1;
        }

        .saturn.visible + .saturn-rings {
            opacity: 1;
        }
    </style>
</head>
<body onclick="handleClick()">
    <div class="rain"></div>

    <audio id="bgMusic" loop>
        <source src="hold.mp3" type="audio/mpeg">
    </audio>

    <div id="landing-page">
        <div class="landing-text">click anywhere to enter ;D</div>
        <div class="planet-container">
            <div class="planet sun"></div>
            <div class="planet mercury"></div>
            <div class="planet venus"></div>
            <div class="planet earth"></div>
            <div class="planet mars"></div>
            <div class="planet jupiter"></div>
            <div class="saturn-container">
                <div class="planet saturn"></div>
                <div class="saturn-rings"></div>
            </div>
            <div class="planet uranus"></div>
            <div class="planet neptune"></div>
        </div>
    </div>

    <div id="main-page">
        <div class="main-content">
            <div class="profile-card">
                <div class="profile-image">
                    <img src="pfp.jpg" alt="Profile Picture">
                </div>
                <div class="profile-info">
                    <h1 class="profile-name">rio</h1>
                    <div class="profile-title">owner</div>
                </div>
                <div class="social-links">
                    <a href="https://discordapp.com/users/1292928846160461841" class="social-link" data-tooltip="@foreverist" target="_blank">
                        <img src="discord.svg" alt="Discord">
                    </a>
                    <a href="https://t.me/mainfraud" class="social-link" data-tooltip="/mainfraud" target="_blank">
                        <img src="telegram.svg" alt="Telegram">
                    </a>
                    <a href="https://open.spotify.com/playlist/2ytgxtZnzyW2m5Gl14W57X?si=51e4f043b1ec492b" class="social-link" data-tooltip="600+ songs :p" target="_blank">
                        <img src="spotify.svg" alt="Spotify">
                    </a>
                </div>
            </div>
        </div>
    </div>

    <div class="spotify-player">
        <div class="song-info">
            <div class="song-title"><span>again</span></div>
            <div class="artist-name"><span>hold</span></div>
        </div>
        <div class="controls">
            <button class="control-btn prev-btn">⏮</button>
            <button class="control-btn play-btn">⏸</button>
            <button class="control-btn next-btn">⏭</button>
            <div class="volume-control">
                <div class="volume-level">
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
        <div class="progress-bar">
            <div class="progress-preview"></div>
            <div class="progress">
                <div class="progress-handle"></div>
            </div>
        </div>
        <div class="sound-bars">
            <!-- Will be populated by JS -->
        </div>
    </div>

    <script>
        const audio = document.getElementById('bgMusic');
        const landingPage = document.getElementById('landing-page');
        const mainPage = document.getElementById('main-page');
        const songTitle = document.querySelector('.song-title');
        const artistName = document.querySelector('.artist-name');
        const playBtn = document.querySelector('.play-btn');
        const prevBtn = document.querySelector('.prev-btn');
        const nextBtn = document.querySelector('.next-btn');
        const progressBar = document.querySelector('.progress-bar');
        const progress = document.querySelector('.progress');
        const volumeControl = document.querySelector('.volume-control');
        const volumeLevel = document.querySelector('.volume-level');
        let hasClicked = false;

        const songs = [
            { file: 'hold.mp3', title: 'again', artist: 'hold' },
            { file: 'burn.mp3', title: 'burn', artist: 'mandy2' },
            { file: 'seeyou.mp3', title: 'why cant i see u', artist: 'aeter vault' },
            { file: 'happen.mp3', title: "i know what's going to happen to me", artist: 'jaydes' },
            { file: 'credits.mp3', title: 'let the credits roll for the end of my miserable life', artist: 'wifiskeleton' },
            { file: 'blame.mp3', title: 'blame', artist: 'kofun' }
        ];
        let currentSongIndex = 0;
        let isPlaying = false;

        async function loadSong() {
            try {
                const song = songs[currentSongIndex];
                console.log('Loading song:', song);
                
                // Stop current playback and reset
                audio.pause();
                audio.src = song.file;
                audio.load(); // Force reload
                audio.currentTime = 0;
                progress.style.width = '0%';
                
                // Update display
                songTitle.textContent = song.title;
                artistName.textContent = song.artist;
                checkTextOverflow();
                
                // Force play state
                isPlaying = true;
                playBtn.textContent = '⏸';
                
                console.log('Attempting to play...');
                return audio.play();
            } catch (error) {
                console.error('Playback failed:', error);
                isPlaying = false;
                playBtn.textContent = '▶';
            }
        }

        // Previous button event listener
        prevBtn.addEventListener('click', async () => {
            currentSongIndex--;
            if (currentSongIndex < 0) {
                currentSongIndex = songs.length - 1;
            }
            try {
                await loadSong();
                console.log('Previous song loaded and playing');
            } catch (error) {
                console.error('Failed to play previous song:', error);
                // Try playing one more time
                audio.play().catch(e => console.error('Retry failed:', e));
            }
        });

        // Next button event listener
        nextBtn.addEventListener('click', async () => {
            currentSongIndex++;
            if (currentSongIndex >= songs.length) {
                currentSongIndex = 0;
            }
            try {
                await loadSong();
                console.log('Next song loaded and playing');
            } catch (error) {
                console.error('Failed to play next song:', error);
                // Try playing one more time
                audio.play().catch(e => console.error('Retry failed:', e));
            }
        });

        // Update progress bar as song plays
        audio.addEventListener('timeupdate', () => {
            if (!audio.paused && !isNaN(audio.duration)) {
                const progressPercent = (audio.currentTime / audio.duration) * 100;
                progress.style.width = progressPercent + '%';
            }
        });

        // Handle audio errors
        audio.addEventListener('error', (e) => {
            console.error('Audio error:', e);
            isPlaying = false;
            playBtn.textContent = '▶';
        });

        // Add loadeddata event listener to ensure autoplay
        audio.addEventListener('loadeddata', () => {
            if (isPlaying && audio.paused) {
                console.log('Audio loaded, forcing play');
                audio.play().catch(e => console.error('Force play failed:', e));
            }
        });

        // Play button event listener
        playBtn.addEventListener('click', () => {
            isPlaying = !isPlaying;
            if (isPlaying) {
                audio.play().then(() => {
                    playBtn.textContent = '⏸';
                }).catch(e => {
                    console.log('Playback failed:', e);
                    isPlaying = false;
                    playBtn.textContent = '▶';
                });
            } else {
                audio.pause();
                playBtn.textContent = '▶';
            }
        });

        // Auto-play next song when current song ends
        audio.addEventListener('ended', () => {
            currentSongIndex = (currentSongIndex + 1) % songs.length;
            loadSong();
            audio.play(); // Ensure the song plays after loading
            progress.style.width = '0%'; // Reset progress bar
        });

        const soundBarsContainer = document.querySelector('.sound-bars');
        for (let i = 0; i < 20; i++) {
            const bar = document.createElement('div');
            bar.className = 'sound-bar';
            bar.style.height = '4px';
            soundBarsContainer.appendChild(bar);
        }
        const soundBars = document.querySelectorAll('.sound-bar');

        function updateSoundBars() {
            if (!isPlaying) {
                soundBars.forEach(bar => {
                    bar.style.height = '4px';
                    bar.classList.remove('active');
                });
                return;
            }

            soundBars.forEach(bar => {
                const height = Math.random() * 16 + 4;
                bar.style.height = `${height}px`;
                bar.classList.add('active');
            });
        }

        setInterval(updateSoundBars, 100);

        function handleClick() {
            if (!hasClicked) {
                hasClicked = true;
                audio.volume = 0;
                audio.play();
                fadeIn();
                isPlaying = true;
                playBtn.textContent = '⏸';
                createRain();
                
                // Change document title to "rio"
                document.title = 'rio';
                
                landingPage.style.opacity = '0';
                setTimeout(() => {
                    landingPage.style.display = 'none';
                    mainPage.style.opacity = '1';
                    mainPage.style.pointerEvents = 'auto';
                    document.querySelector('.spotify-player').style.display = 'block';
                }, 500);
            }
        }

        function fadeIn() {
            if (audio.volume < 0.3) {
                audio.volume = Math.min(0.3, audio.volume + 0.02);
                setTimeout(fadeIn, 100);
            }
        }

        function createRain() {
            const rain = document.querySelector('.rain');
            let lastMouseX = window.innerWidth / 2;
            let currentRotation = 20; // Default rotation

            // Create raindrops
            for (let i = 0; i < 300; i++) {
                const drop = document.createElement('div');
                drop.className = 'raindrop';
                drop.style.left = Math.random() * 100 + '%';
                drop.style.animationDelay = Math.random() * -20 + 's';
                drop.style.opacity = Math.random() * 0.3 + 0.2;
                rain.appendChild(drop);
            }

            // Fade in the rain
            rain.style.opacity = '1';
            const raindrops = document.querySelectorAll('.raindrop');
            raindrops.forEach(drop => {
                drop.style.opacity = Math.random() * 0.3 + 0.2;
            });

            // Handle mouse movement
            document.addEventListener('mousemove', (e) => {
                const moveAmount = (e.clientX - lastMouseX) * 0.5; 
                const targetRotation = 20 + (moveAmount * 2); 
                
                // Update rain container position
                rain.style.transform = `translateX(${moveAmount * 3}px)`; 
                
                // Update raindrop rotation
                const raindrops = document.querySelectorAll('.raindrop');
                raindrops.forEach(drop => {
                    drop.style.transform = `rotate(${targetRotation}deg)`;
                });
                
                lastMouseX = e.clientX;
            });
        }

        let isDraggingProgress = false;
        let isDraggingVolume = false;

        // Progress bar handling
        const progressHandle = document.querySelector('.progress-handle');
        const progressPreview = document.querySelector('.progress-preview');
        let tempProgressWidth = 0;
        let wasPlaying = false;

        progressHandle.addEventListener('mousedown', (e) => {
            e.preventDefault(); // Prevent text selection
            isDraggingProgress = true;
            wasPlaying = !audio.paused;
            if (wasPlaying) audio.pause();
            
            progressPreview.classList.add('active');
            progressHandle.style.cursor = 'grabbing';
            
            document.addEventListener('mousemove', handleProgressDrag);
            document.addEventListener('mouseup', handleProgressRelease);
        });

        function handleProgressDrag(e) {
            if (!isDraggingProgress) return;
            
            const rect = progressBar.getBoundingClientRect();
            let pos = (e.clientX - rect.left) / rect.width;
            pos = Math.max(0, Math.min(1, pos));
            tempProgressWidth = pos * 100;
            
            // Update both preview and actual progress
            progressPreview.style.width = `${tempProgressWidth}%`;
            progress.style.width = `${tempProgressWidth}%`;
        }

        function handleProgressRelease(e) {
            if (isDraggingProgress) {
                isDraggingProgress = false;
                progressPreview.classList.remove('active');
                progressHandle.style.cursor = 'grab';
                
                document.removeEventListener('mousemove', handleProgressDrag);
                document.removeEventListener('mouseup', handleProgressRelease);
                
                // Update audio time
                const newTime = (tempProgressWidth / 100) * audio.duration;
                audio.currentTime = newTime;
                
                // Resume if it was playing
                if (wasPlaying) {
                    audio.play();
                }
            }
        }

        // Hover preview on progress bar
        progressBar.addEventListener('mousemove', (e) => {
            if (!isDraggingProgress) {
                const rect = progressBar.getBoundingClientRect();
                let pos = (e.clientX - rect.left) / rect.width;
                pos = Math.max(0, Math.min(1, pos));
                progressPreview.style.width = `${pos * 100}%`;
                progressPreview.classList.add('active');
            }
        });

        progressBar.addEventListener('mouseleave', () => {
            if (!isDraggingProgress) {
                progressPreview.classList.remove('active');
            }
        });

        progressBar.addEventListener('click', (e) => {
            if (!isDraggingProgress) {
                const rect = progressBar.getBoundingClientRect();
                const pos = (e.clientX - rect.left) / rect.width;
                audio.currentTime = pos * audio.duration;
            }
        });

        // Update progress bar handle position only when not dragging
        audio.addEventListener('timeupdate', () => {
            if (!isDraggingProgress) {
                const progressPercent = (audio.currentTime / audio.duration) * 100;
                progress.style.width = `${progressPercent}%`;
                progressPreview.style.width = `${progressPercent}%`;
            }
        });

        // Volume control handling
        const volumeHandle = document.querySelector('.volume-handle');

        volumeHandle.addEventListener('mousedown', (e) => {
            isDraggingVolume = true;
            document.addEventListener('mousemove', handleVolumeDrag);
            document.addEventListener('mouseup', () => {
                isDraggingVolume = false;
                document.removeEventListener('mousemove', handleVolumeDrag);
            });
        });

        function handleVolumeDrag(e) {
            if (!isDraggingVolume) return;
            
            const rect = volumeControl.getBoundingClientRect();
            let pos = (e.clientX - rect.left) / rect.width;
            pos = Math.max(0, Math.min(1, pos));
            audio.volume = pos;
            volumeLevel.style.width = `${pos * 100}%`;
        }

        volumeControl.addEventListener('click', (e) => {
            const rect = volumeControl.getBoundingClientRect();
            const pos = (e.clientX - rect.left) / rect.width;
            audio.volume = pos;
            volumeLevel.style.width = `${pos * 100}%`;
        });

        function checkTextOverflow() {
            const title = document.querySelector('.song-title');
            const artist = document.querySelector('.artist-name');
            const titleSpan = title.querySelector('span');
            const artistSpan = artist.querySelector('span');

            // Check if text is overflowing
            if (titleSpan.offsetWidth > title.offsetWidth) {
                title.classList.add('scroll');
            } else {
                title.classList.remove('scroll');
            }

            if (artistSpan.offsetWidth > artist.offsetWidth) {
                artist.classList.add('scroll');
            } else {
                artist.classList.remove('scroll');
            }
        }

        const planets = document.querySelectorAll('.planet');
        const planetContainer = document.querySelector('.planet-container');
        let currentPlanet = 0;
        const planets_array = ['sun', 'mercury', 'venus', 'earth', 'mars', 'jupiter', 'saturn', 'uranus', 'neptune'];

        // Planet rotation based on mouse movement
        document.addEventListener('mousemove', (e) => {
            if (planetContainer) {
                const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
                const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
                planetContainer.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
                
                // Rotate planets themselves slightly
                planets.forEach(planet => {
                    planet.style.transform = `translateZ(0) rotateY(${-xAxis * 0.5}deg) rotateX(${-yAxis * 0.5}deg)`;
                });

                // Rotate Saturn's rings
                const saturnRings = document.querySelector('.saturn-rings');
                if (saturnRings) {
                    saturnRings.style.transform = `rotateX(75deg) rotateY(${-xAxis * 0.3}deg)`;
                }
            }
        });

        // Planet switching every second
        function rotatePlanets() {
            planets.forEach((planet, index) => {
                if (index === currentPlanet) {
                    planet.style.opacity = '1';
                    if (planet.classList.contains('saturn')) {
                        planet.classList.add('visible');
                    }
                } else {
                    planet.style.opacity = '0';
                    if (planet.classList.contains('saturn')) {
                        planet.classList.remove('visible');
                    }
                }
            });
            
            currentPlanet = (currentPlanet + 1) % planets.length;
        }

        // Start the planet rotation
        rotatePlanets();
        setInterval(rotatePlanets, 1000);

        // Title cycling array and function
        const titles = ['rio', 'die', 'lol', 'skid', 'rioriorio'];
        let currentTitleIndex = 0;

        function cycleTitles() {
            document.title = titles[currentTitleIndex];
            currentTitleIndex = (currentTitleIndex + 1) % titles.length;
        }

        function handleClick() {
            if (!hasClicked) {
                hasClicked = true;
                audio.volume = 0;
                audio.play();
                fadeIn();
                isPlaying = true;
                playBtn.textContent = '⏸';
                createRain();
                
                // Start cycling titles
                cycleTitles();
                setInterval(cycleTitles, 1000);
                
                landingPage.style.opacity = '0';
                setTimeout(() => {
                    landingPage.style.display = 'none';
                    mainPage.style.opacity = '1';
                    mainPage.style.pointerEvents = 'auto';
                    document.querySelector('.spotify-player').style.display = 'block';
                }, 500);
            }
        }
    </script>
</body>
</html>