Update index.html

index.html

@@ -13,9 +13,6 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
 
-    <!-- Three.js for 3D elements -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
     <style>
         :root {
             --bg-color: #050505;
@@ -87,24 +84,16 @@
             width: 90%;
             animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
             opacity: 0;
-            transform: translateY(30px) rotateX(5deg);
-            transform-style: preserve-3d;
+            transform: translateY(30px);
         }
 
         @keyframes slideInUp {
             to {
                 opacity: 1;
-                transform: translateY(0) rotateX(0);
+                transform: translateY(0);
             }
         }
 
-        .title-container {
-            position: relative;
-            display: inline-block;
-            transform-style: preserve-3d;
-            margin-bottom: 1.5rem;
-        }
-
         h1 {
             font-size: clamp(3rem, 10vw, 6rem);
             font-weight: 700;
@@ -113,8 +102,6 @@
             color: var(--text-color);
             text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
             transition: color var(--transition-speed) ease, text-shadow var(--transition-speed) ease;
-            transform-style: preserve-3d;
-            transform: translateZ(0);
         }
 
         .subtitle {
@@ -124,16 +111,12 @@
             margin-bottom: 2.5rem;
             letter-spacing: 0.05em;
             transition: color var(--transition-speed) ease;
-            transform-style: preserve-3d;
-            transform: translateZ(5px);
         }
 
         .models-section {
             margin-bottom: 3rem;
             opacity: 0;
             animation: fadeIn 1s ease 1s forwards;
-            transform-style: preserve-3d;
-            transform: translateZ(10px);
         }
 
         .models-section h2 {
@@ -151,7 +134,6 @@
             flex-wrap: wrap;
             justify-content: center;
             gap: 0.8rem;
-            perspective: 1000px;
         }
 
         .model-badge {
@@ -164,17 +146,15 @@
             border-radius: 15px;
             border: 1px solid var(--border-color);
             transition: all var(--transition-speed) cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            transform: scale(1) translateZ(0);
-            transform-style: preserve-3d;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+            transform: scale(1);
         }
 
         .model-badge:hover {
             background-color: var(--hover-bg);
             color: var(--accent-color);
             border-color: var(--accent-color);
-            transform: scale(1.05) translateY(-2px) translateZ(10px) rotateX(5deg);
-            box-shadow: 0 10px 25px rgba(0, 255, 255, 0.2), 0 2px 5px rgba(0, 0, 0, 0.2);
+            transform: scale(1.05) translateY(-2px);
+            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
         }
 
         .playgrounds-section {
@@ -184,8 +164,6 @@
             flex-direction: column; /* Stack links vertically on mobile */
             align-items: center;
             gap: 1rem;
-            transform-style: preserve-3d;
-            transform: translateZ(15px);
         }
 
         @media (min-width: 600px) {
@@ -209,8 +187,6 @@
             overflow: hidden;
             transition: all var(--transition-speed) ease;
             z-index: 1;
-            transform-style: preserve-3d;
-            transform: translateZ(0);
         }
 
         .playground-link::before {
@@ -228,8 +204,8 @@
         .playground-link:hover {
             color: var(--bg-color);
             border-color: var(--accent-color);
-            transform: translateY(-3px) translateZ(20px) rotateX(10deg);
-            box-shadow: 0 15px 30px rgba(0, 255, 255, 0.3), 0 5px 10px rgba(0, 0, 0, 0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
         }
 
         .playground-link:hover::before {
@@ -309,20 +285,89 @@
             to { opacity: 1; }
         }
 
-        /* 3D Glass Orb */
-        #orb-container {
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            h1 {
+                letter-spacing: -0.03em;
+            }
+            .container {
+                padding: 1.5rem;
+            }
+            .models-grid {
+                gap: 0.6rem;
+            }
+             .playgrounds-section {
+                gap: 0.8rem;
+            }
+             .playground-link {
+                 padding: 0.7em 1.5em;
+             }
+             /* Reduce glow size on smaller screens */
+             .glow {
+                 width: 500px;
+                 height: 500px;
+             }
+        }
+
+        /* 3D Glass Ball Style */
+        .glass-ball {
             position: absolute;
-            top: -80px;
-            left: 50%;
-            transform: translateX(-50%);
-            width: 120px;
-            height: 120px;
+            top: 40px;
+            right: 40px;
+            width: 150px;
+            height: 150px;
+            border-radius: 50%;
+            background: radial-gradient(circle at 30% 30%, 
+                rgba(255, 255, 255, 0.2) 0%, 
+                rgba(0, 255, 255, 0.1) 40%, 
+                rgba(0, 0, 0, 0.1) 100%);
+            box-shadow: 
+                inset 0 0 20px rgba(0, 255, 255, 0.3),
+                0 0 30px rgba(0, 255, 255, 0.2);
+            animation: float 6s infinite ease-in-out;
+            transform-style: preserve-3d;
+            perspective: 1000px;
             z-index: 3;
-            pointer-events: none;
         }
 
-        /* Loading Animation Container */
-        #loading-container {
+        .glass-ball::before {
+            content: '';
+            position: absolute;
+            top: 15%;
+            left: 15%;
+            width: 20%;
+            height: 20%;
+            border-radius: 50%;
+            background: rgba(255, 255, 255, 0.6);
+            filter: blur(2px);
+        }
+
+        .glass-ball::after {
+            content: '';
+            position: absolute;
+            top: 45%;
+            left: 45%;
+            width: 70%;
+            height: 70%;
+            border-radius: 50%;
+            background: radial-gradient(circle at center, 
+                rgba(0, 255, 255, 0.05) 0%, 
+                rgba(0, 0, 0, 0) 70%);
+            animation: pulse 4s infinite alternate;
+        }
+
+        @keyframes float {
+            0%, 100% { transform: translateY(0) rotate(0deg); }
+            50% { transform: translateY(-20px) rotate(10deg); }
+        }
+
+        @keyframes pulse {
+            0% { opacity: 0.2; transform: scale(0.8); }
+            100% { opacity: 0.4; transform: scale(1.1); }
+        }
+
+        /* Loading Animation */
+        .loading-container {
             position: fixed;
             top: 0;
             left: 0;
@@ -332,108 +377,152 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            z-index: 9999;
-            transition: opacity 0.8s ease;
+            z-index: 10000;
+            perspective: 1000px;
+            transition: opacity 0.5s ease-out;
         }
 
-        .loading-spinner {
+        .loading-cube {
             width: 100px;
             height: 100px;
             position: relative;
-            perspective: 1000px;
+            transform-style: preserve-3d;
+            animation: spin 4s infinite linear;
         }
 
-        .spinner-cube {
-            width: 50px;
-            height: 50px;
-            position: absolute;
-            top: 25px;
-            left: 25px;
-            transform-style: preserve-3d;
-            animation: spinner-rotate 3s infinite linear;
+        @keyframes spin {
+            0% { transform: rotateX(0deg) rotateY(0deg); }
+            100% { transform: rotateX(360deg) rotateY(360deg); }
         }
 
-        .spinner-face {
+        .cube-face {
             position: absolute;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 255, 255, 0.1);
-            border: 1px solid var(--accent-color);
+            width: 100px;
+            height: 100px;
+            background: rgba(0, 255, 255, 0.1);
+            border: 2px solid var(--accent-color);
             display: flex;
             justify-content: center;
             align-items: center;
-            box-shadow: 0 0 10px var(--glow-color);
+            font-weight: bold;
+            color: var(--accent-color);
+            text-shadow: 0 0 10px var(--accent-color);
+            box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+            backface-visibility: visible;
         }
 
-        .spinner-face:nth-child(1) { transform: translateZ(25px); }
-        .spinner-face:nth-child(2) { transform: rotateY(90deg) translateZ(25px); }
-        .spinner-face:nth-child(3) { transform: rotateY(180deg) translateZ(25px); }
-        .spinner-face:nth-child(4) { transform: rotateY(270deg) translateZ(25px); }
-        .spinner-face:nth-child(5) { transform: rotateX(90deg) translateZ(25px); }
-        .spinner-face:nth-child(6) { transform: rotateX(-90deg) translateZ(25px); }
+        .front { transform: translateZ(50px); }
+        .back { transform: translateZ(-50px) rotateY(180deg); }
+        .right { transform: translateX(50px) rotateY(90deg); }
+        .left { transform: translateX(-50px) rotateY(-90deg); }
+        .top { transform: translateY(-50px) rotateX(90deg); }
+        .bottom { transform: translateY(50px) rotateX(-90deg); }
 
-        @keyframes spinner-rotate {
-            0% { transform: rotateX(0deg) rotateY(0deg); }
-            100% { transform: rotateX(360deg) rotateY(360deg); }
+        /* Game Related Styles */
+        .game-toggle {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background-color: var(--accent-color);
+            color: var(--bg-color);
+            border: none;
+            border-radius: 50%;
+            width: 60px;
+            height: 60px;
+            font-size: 24px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            z-index: 1000;
+            box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
+            transition: all 0.3s ease;
         }
 
-        /* Responsive adjustments */
-        @media (max-width: 768px) {
-            h1 {
-                letter-spacing: -0.03em;
-            }
-            .container {
-                padding: 1.5rem;
-            }
-            .models-grid {
-                gap: 0.6rem;
-            }
-             .playgrounds-section {
-                gap: 0.8rem;
-            }
-             .playground-link {
-                 padding: 0.7em 1.5em;
-             }
-             /* Reduce glow size on smaller screens */
-             .glow {
-                 width: 500px;
-                 height: 500px;
-             }
-             #orb-container {
-                top: -60px;
-                width: 90px;
-                height: 90px;
-             }
+        .game-toggle:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 25px rgba(0, 255, 255, 0.7);
         }
 
+        #game-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.9);
+            z-index: 5000;
+            display: none;
+            overflow: hidden;
+        }
+
+        #game-canvas {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .controls-info {
+            position: absolute;
+            bottom: 20px;
+            left: 20px;
+            color: var(--text-color);
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 15px;
+            border-radius: 5px;
+            font-size: 14px;
+            z-index: 5001;
+        }
+
+        .score-display {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: var(--accent-color);
+            font-size: 24px;
+            font-weight: bold;
+            z-index: 5001;
+            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
+        }
+
+        .game-message {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: var(--accent-color);
+            font-size: 40px;
+            font-weight: bold;
+            text-align: center;
+            z-index: 5002;
+            text-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
+            display: none;
+        }
     </style>
 </head>
 <body>
     <!-- Loading Animation -->
-    <div id="loading-container">
-        <div class="loading-spinner">
-            <div class="spinner-cube">
-                <div class="spinner-face"></div>
-                <div class="spinner-face"></div>
-                <div class="spinner-face"></div>
-                <div class="spinner-face"></div>
-                <div class="spinner-face"></div>
-                <div class="spinner-face"></div>
-            </div>
+    <div class="loading-container" id="loading-screen">
+        <div class="loading-cube">
+            <div class="cube-face front">LOKI.AI</div>
+            <div class="cube-face back">LOADING</div>
+            <div class="cube-face right">AI</div>
+            <div class="cube-face left">MODELS</div>
+            <div class="cube-face top">PREMIUM</div>
+            <div class="cube-face bottom">FREE</div>
         </div>
     </div>
 
+    <!-- 3D Glass Ball -->
+    <div class="glass-ball"></div>
+
     <!-- Mouse Effect Elements -->
     <div class="cursor"></div>
     <div class="glow"></div>
 
     <!-- Main Content -->
     <div class="container">
-        <div class="title-container">
-            <!-- 3D Glass Orb Container -->
-            <div id="orb-container"></div>
-            <h1>Loki.AI</h1>
-        </div>
+        <h1>Loki.AI</h1>
         <p class="subtitle">By Parth Sadaria</p>
 
         <div class="models-section">
@@ -462,13 +551,25 @@
         </div>
     </div>
 
+    <!-- Car Game Toggle Button -->
+    <button class="game-toggle" id="game-toggle">🏎️</button>
+
+    <!-- Game Container -->
+    <div id="game-container">
+        <canvas id="game-canvas"></canvas>
+        <div class="controls-info">
+            WASD or Arrow Keys to drive | SPACE for handbrake drift | ESC to exit
+        </div>
+        <div class="score-display" id="score-display">Score: 0</div>
+        <div class="game-message" id="game-message"></div>
+    </div>
+
     <script>
+        // Mouse cursor effects
         const cursor = document.querySelector('.cursor');
         const glow = document.querySelector('.glow');
-        const hoverables = document.querySelectorAll('a, .model-badge');
-        const textElements = document.querySelectorAll('h1, p, h2, .model-badge'); // Include badges for text hover
-        const loadingContainer = document.getElementById('loading-container');
-        const orbContainer = document.getElementById('orb-container');
+        const hoverables = document.querySelectorAll('a, .model-badge, .game-toggle');
+        const textElements = document.querySelectorAll('h1, p, h2, .model-badge');
 
         let mouseX = 0;
         let mouseY = 0;
@@ -488,11 +589,8 @@
         const hoverTextCursorScale = 0.7;
         const clickCursorScale = 0.6;
 
-        // Parallax effect variables
-        let windowWidth = window.innerWidth;
-        let windowHeight = window.innerHeight;
-
         // Pre-calculate half-widths/heights ONCE (assuming they don't change)
+        // Note: If elements resize dynamically, might need recalculation
         let cursorHalfWidth = cursor.offsetWidth / 2;
         let cursorHalfHeight = cursor.offsetHeight / 2;
         let glowHalfWidth = glow.offsetWidth / 2;
@@ -504,74 +602,8 @@
              cursorHalfHeight = cursor.offsetHeight / 2;
              glowHalfWidth = glow.offsetWidth / 2;
              glowHalfHeight = glow.offsetHeight / 2;
-             windowWidth = window.innerWidth;
-             windowHeight = window.innerHeight;
         });
 
-        // Initialize Three.js for the glass orb
-        let orbScene, orbCamera, orbRenderer, orbSphere, orbLight;
-
-        function initOrb() {
-            orbScene = new THREE.Scene();
-            
-            // Perspective camera
-            orbCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
-            orbCamera.position.z = 2;
-            
-            // Renderer with transparency
-            orbRenderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
-            orbRenderer.setSize(orbContainer.offsetWidth, orbContainer.offsetHeight);
-            orbRenderer.setPixelRatio(window.devicePixelRatio);
-            orbContainer.appendChild(orbRenderer.domElement);
-            
-            // Create a glass sphere
-            const sphereGeometry = new THREE.SphereGeometry(0.8, 64, 64);
-            const sphereMaterial = new THREE.MeshPhysicalMaterial({
-                color: 0x00ffff,
-                transparent: true,
-                opacity: 0.2,
-                metalness: 0.2,
-                roughness: 0.05,
-                transmission: 0.98,
-                clearcoat: 1.0,
-                clearcoatRoughness: 0.1,
-                side: THREE.DoubleSide
-            });
-            
-            orbSphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
-            orbScene.add(orbSphere);
-            
-            // Add ambient light
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-            orbScene.add(ambientLight);
-            
-            // Add point light
-            orbLight = new THREE.PointLight(0x00ffff, 2, 10);
-            orbLight.position.set(2, 2, 2);
-            orbScene.add(orbLight);
-            
-            // Add directional light
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(-1, 1, 1);
-            orbScene.add(directionalLight);
-        }
-
-        function animateOrb() {
-            requestAnimationFrame(animateOrb);
-            
-            // Rotate the sphere
-            orbSphere.rotation.x += 0.005;
-            orbSphere.rotation.y += 0.01;
-            
-            // Make light move in a circle
-            const time = Date.now() * 0.001;
-            orbLight.position.x = Math.sin(time) * 2;
-            orbLight.position.z = Math.cos(time) * 2;
-            
-            // Render the scene
-            orbRenderer.render(orbScene, orbCamera);
-        }
-
         function animate() {
             // Lerp for smooth following
             cursorX += (mouseX - cursorX) * cursorSpeed;
@@ -587,27 +619,7 @@
             const glowTranslateY = glowY - glowHalfHeight;
 
             cursor.style.transform = `translate(${cursorTranslateX}px, ${cursorTranslateY}px) scale(${currentCursorScale})`;
-            glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`; // Glow doesn't scale dynamically here
-
-            // 3D parallax effect for elements based on mouse position
-            const containerElements = document.querySelectorAll('.container > div, .title-container > h1');
-            containerElements.forEach((element, index) => {
-                const depth = 15 + (index * 3); // Different depths for different elements
-                const moveX = (mouseX - windowWidth / 2) / windowWidth * depth;
-                const moveY = (mouseY - windowHeight / 2) / windowHeight * depth;
-                element.style.transform = `translate3d(${moveX}px, ${moveY}px, ${index * 5}px)`;
-            });
-
-            // Badge parallax effect
-            const badges = document.querySelectorAll('.model-badge');
-            badges.forEach((badge, index) => {
-                const badgeDepth = 5;
-                const offsetX = (mouseX - windowWidth / 2) / windowWidth * badgeDepth;
-                const offsetY = (mouseY - windowHeight / 2) / windowHeight * badgeDepth;
-                const rotateX = (mouseY - windowHeight / 2) / windowHeight * 5;
-                const rotateY = -(mouseX - windowWidth / 2) / windowWidth * 5;
-                badge.style.transform = `translate3d(${offsetX}px, ${offsetY}px, 0) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
-            });
+            glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`;
 
             requestAnimationFrame(animate);
         }
@@ -625,7 +637,7 @@
             let isHoveringLink = false;
             let isHoveringText = false;
 
-            // Check hover states directly (more robust than relying on mouseenter/leave timing with lerp)
+            // Check hover states directly
             hoverables.forEach(el => {
                 const rect = el.getBoundingClientRect();
                 if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -634,7 +646,6 @@
             });
 
             textElements.forEach(el => {
-                // Avoid text hover if already hovering a link defined in hoverables
                 if (!isHoveringLink) {
                     const rect = el.getBoundingClientRect();
                     if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
@@ -643,9 +654,8 @@
                 }
             });
 
-            // Apply styles and target scale based on state
             cursor.classList.toggle('hover-link', isHoveringLink);
-            cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink); 
+            cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink);
 
             if (isHoveringLink) {
                 targetScale = hoverLinkCursorScale;
@@ -653,53 +663,836 @@
                 targetScale = hoverTextCursorScale;
             }
 
-            // Handle clicking state separately
             if (cursor.classList.contains('clicking')) {
-                targetScale = clickCursorScale; 
+                targetScale = clickCursorScale;
             }
 
-            // Set the target scale
             currentCursorScale = targetScale;
         }
 
-        // Update state on mouse move for accuracy
         document.addEventListener('mousemove', updateCursorState);
 
-        // Add/Remove clicking class
         document.addEventListener('mousedown', () => {
             cursor.classList.add('clicking');
-            updateCursorState(); 
+            updateCursorState();
         });
 
         document.addEventListener('mouseup', () => {
             cursor.classList.remove('clicking');
-            updateCursorState(); 
+            updateCursorState();
         });
 
-        // Initial state check
         updateCursorState();
 
-        // Initialize the 3D orb
-        initOrb();
-        animateOrb();
-
-        // Hide loading screen after everything is loaded
+        // Loading screen animation
         window.addEventListener('load', () => {
+            const loadingScreen = document.getElementById('loading-screen');
             setTimeout(() => {
-                loadingContainer.style.opacity = '0';
+                loadingScreen.style.opacity = '0';
                 setTimeout(() => {
-                    loadingContainer.style.display = 'none';
-                }, 800);
-            }, 1500); // Show loading for at least 1.5 seconds
+                    loadingScreen.style.display = 'none';
+                }, 500);
+            }, 2000);
+        });
+
+        // Game logic
+        const gameToggle = document.getElementById('game-toggle');
+        const gameContainer = document.getElementById('game-container');
+        const canvas = document.getElementById('game-canvas');
+        const ctx = canvas.getContext('2d');
+        const scoreDisplay = document.getElementById('score-display');
+        const gameMessage = document.getElementById('game-message');
+
+        // Game state
+        let gameActive = false;
+        let score = 0;
+        let obstaclesHit = 0;
+        let lastTimestamp = 0;
+        let deltaTime = 0;
+
+        // Canvas sizing
+        function resizeCanvas() {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        }
+
+        window.addEventListener('resize', resizeCanvas);
+        resizeCanvas();
+
+        // Toggle game display
+        gameToggle.addEventListener('click', () => {
+            if (gameContainer.style.display === 'block') {
+                gameContainer.style.display = 'none';
+                gameActive = false;
+            } else {
+                gameContainer.style.display = 'block';
+                gameActive = true;
+                resetGame();
+                gameLoop(performance.now());
+            }
         });
 
-        // If loading takes too long, hide it anyway
-        setTimeout(() => {
-            loadingContainer.style.opacity = '0';
+        // Key handling for the game
+        const keys = {
+            up: false,
+            down: false,
+            left: false,
+            right: false,
+            handbrake: false
+        };
+
+        window.addEventListener('keydown', (e) => {
+            if (!gameActive) return;
+            
+            switch(e.key) {
+                case 'ArrowUp':
+                case 'w':
+                case 'W':
+                    keys.up = true;
+                    break;
+                case 'ArrowDown':
+                case 's':
+                case 'S':
+                    keys.down = true;
+                    break;
+                case 'ArrowLeft':
+                case 'a':
+                case 'A':
+                    keys.left = true;
+                    break;
+                case 'ArrowRight':
+                case 'd':
+                case 'D':
+                    keys.right = true;
+                    break;
+                case ' ':
+                    keys.handbrake = true;
+                    break;
+                case 'Escape':
+                    gameContainer.style.display = 'none';
+                    gameActive = false;
+                    break;
+            }
+        });
+
+        window.addEventListener('keyup', (e) => {
+            switch(e.key) {
+                case 'ArrowUp':
+                case 'w':
+                case 'W':
+                    keys.up = false;
+                    break;
+                case 'ArrowDown':
+                case 's':
+                case 'S':
+                    keys.down = false;
+                    break;
+                case 'ArrowLeft':
+                case 'a':
+                case 'A':
+                    keys.left = false;
+                    break;
+                case 'ArrowRight':
+                case 'd':
+                case 'D':
+                    keys.right = false;
+                    break;
+                case ' ':
+                    keys.handbrake = false;
+                    break;
+            }
+        });
+
+        // Car properties
+        const car = {
+            x: 0,
+            y: 0,
+            width: 40,
+            height: 70,
+            angle: 0,
+            speed: 0,
+            acceleration: 200,
+            deceleration: 120,
+            maxSpeed: 500,
+            reverseMaxSpeed: -200,
+            turnSpeed: 2.5,
+            driftFactor: 0.95,
+            friction: 0.97,
+            brakeStrength: 0.85,
+            drifting: false,
+            tireMarks: [],
+            color: '#00ffff',
+            shadowColor: 'rgba(0, 255, 255, 0.5)',
+            turboMode: false,
+            turboTimer: 0,
+            turboMaxTime: 3,
+            turboCooldown: 0,
+            turboCooldownMax: 5
+        };
+
+        // Obstacles based on website elements
+        const obstacleTypes = [
+            { text: "GPT-4o", width: 100, height: 40, color: "#ff5a5a" },
+            { text: "Claude 3.7", width: 120, height: 40, color: "#5a92ff" },
+            { text: "Gemini", width: 90, height: 40, color: "#5aff7f" },
+            { text: "Loki.AI", width: 120, height: 50, color: "#ffaa5a" },
+            { text: "AI", width: 60, height: 40, color: "#aa5aff" },
+            { text: "Premium", width: 110, height: 40, color: "#ff5aaa" }
+        ];
+
+        const obstacles = [];
+        const maxObstacles = 30;
+
+        const powerUps = [];
+        const maxPowerUps = 5;
+
+        function createObstacles() {
+            const margin = 100; // Keep obstacles away from edges
+            
+            while (obstacles.length < maxObstacles) {
+                const type = obstacleTypes[Math.floor(Math.random() * obstacleTypes.length)];
+               // Continuing from where the code left off in the createObstacles function:
+
+                const obstacle = {
+                    x: Math.random() * (canvas.width - type.width - 2 * margin) + margin,
+                    y: Math.random() * (canvas.height - type.height - 2 * margin) + margin,
+                    width: type.width,
+                    height: type.height,
+                    text: type.text,
+                    color: type.color,
+                    vx: 0,
+                    vy: 0,
+                    angle: Math.random() * Math.PI * 2,
+                    angularVelocity: 0,
+                    mass: type.width * type.height / 1000
+                };
+                
+                // Ensure obstacles don't overlap
+                let overlaps = false;
+                for (const existing of obstacles) {
+                    const dx = obstacle.x - existing.x;
+                    const dy = obstacle.y - existing.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < obstacle.width + existing.width) {
+                        overlaps = true;
+                        break;
+                    }
+                }
+                
+                if (!overlaps) {
+                    obstacles.push(obstacle);
+                }
+            }
+        }
+
+        function createPowerUps() {
+            while (powerUps.length < maxPowerUps) {
+                const powerUp = {
+                    x: Math.random() * (canvas.width - 30),
+                    y: Math.random() * (canvas.height - 30),
+                    radius: 15,
+                    type: Math.random() < 0.3 ? 'turbo' : 'score',
+                    color: Math.random() < 0.3 ? '#ff00ff' : '#ffff00',
+                    collectEffect: Math.random() < 0.3 ? activateTurbo : addScore,
+                    active: true
+                };
+                
+                // Ensure power-ups don't overlap with obstacles
+                let overlaps = false;
+                for (const obstacle of obstacles) {
+                    const dx = powerUp.x - obstacle.x;
+                    const dy = powerUp.y - obstacle.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    if (distance < powerUp.radius + Math.max(obstacle.width, obstacle.height) / 2) {
+                        overlaps = true;
+                        break;
+                    }
+                }
+                
+                if (!overlaps) {
+                    powerUps.push(powerUp);
+                }
+            }
+        }
+
+        function activateTurbo() {
+            if (car.turboCooldown <= 0) {
+                car.turboMode = true;
+                car.turboTimer = car.turboMaxTime;
+                car.maxSpeed = 800;
+                car.acceleration = 400;
+                
+                // Show turbo message
+                gameMessage.textContent = "TURBO ACTIVATED!";
+                gameMessage.style.display = "block";
+                gameMessage.style.color = "#ff00ff";
+                
+                setTimeout(() => {
+                    gameMessage.style.display = "none";
+                }, 1500);
+            }
+        }
+
+        function addScore() {
+            score += 100;
+            updateScore();
+            
+            // Show score message
+            gameMessage.textContent = "+100 POINTS!";
+            gameMessage.style.display = "block";
+            gameMessage.style.color = "#ffff00";
+            
             setTimeout(() => {
-                loadingContainer.style.display = 'none';
-            }, 800);
-        }, 3000);
+                gameMessage.style.display = "none";
+            }, 1000);
+        }
+
+        function resetGame() {
+            car.x = canvas.width / 2;
+            car.y = canvas.height / 2;
+            car.angle = 0;
+            car.speed = 0;
+            car.tireMarks = [];
+            car.turboMode = false;
+            car.turboTimer = 0;
+            car.turboCooldown = 0;
+            car.maxSpeed = 500;
+            car.acceleration = 200;
+            
+            score = 0;
+            obstaclesHit = 0;
+            updateScore();
+            
+            obstacles.length = 0;
+            powerUps.length = 0;
+            
+            createObstacles();
+            createPowerUps();
+        }
+
+        function updateScore() {
+            scoreDisplay.textContent = `Score: ${score} | Hits: ${obstaclesHit}`;
+        }
+
+        function drawCar(ctx) {
+            ctx.save();
+            ctx.translate(car.x, car.y);
+            ctx.rotate(car.angle);
+            
+            // Car shadow
+            ctx.fillStyle = car.shadowColor;
+            ctx.fillRect(-car.width/2 - 2, -car.height/2 - 2, car.width + 4, car.height + 4);
+            
+            // Car body
+            ctx.fillStyle = car.turboMode ? '#ff00ff' : car.color;
+            ctx.fillRect(-car.width/2, -car.height/2, car.width, car.height);
+            
+            // Windows
+            ctx.fillStyle = "#333";
+            ctx.fillRect(-car.width/2 + 5, -car.height/2 + 10, car.width - 10, car.height/3);
+            ctx.fillRect(-car.width/2 + 5, car.height/2 - 20, car.width - 10, 10);
+            
+            // Wheels
+            ctx.fillStyle = "#222";
+            ctx.fillRect(-car.width/2 - 3, -car.height/2 + 10, 5, 15);
+            ctx.fillRect(car.width/2 - 2, -car.height/2 + 10, 5, 15);
+            ctx.fillRect(-car.width/2 - 3, car.height/2 - 25, 5, 15);
+            ctx.fillRect(car.width/2 - 2, car.height/2 - 25, 5, 15);
+            
+            // Turbo effect
+            if (car.turboMode) {
+                ctx.beginPath();
+                ctx.moveTo(-car.width/2, car.height/2);
+                ctx.lineTo(-car.width/2 - 10, car.height/2 + 20);
+                ctx.lineTo(car.width/2, car.height/2);
+                ctx.fillStyle = "#ff00ff";
+                ctx.fill();
+                
+                ctx.beginPath();
+                ctx.moveTo(-car.width/2, car.height/2);
+                ctx.lineTo(-car.width/2 - 5, car.height/2 + 30);
+                ctx.lineTo(car.width/2, car.height/2);
+                ctx.fillStyle = "#ffff00";
+                ctx.fill();
+            }
+            
+            ctx.restore();
+        }
+
+        function drawTireMarks(ctx) {
+            ctx.lineWidth = 2;
+            
+            for (let i = 0; i < car.tireMarks.length; i++) {
+                const mark = car.tireMarks[i];
+                
+                // Fade out tire marks over time
+                mark.life -= deltaTime;
+                if (mark.life <= 0) {
+                    car.tireMarks.splice(i, 1);
+                    i--;
+                    continue;
+                }
+                
+                const alpha = mark.life / mark.maxLife;
+                ctx.strokeStyle = `rgba(0, 0, 0, ${alpha * 0.6})`;
+                
+                ctx.beginPath();
+                ctx.moveTo(mark.x1, mark.y1);
+                ctx.lineTo(mark.x2, mark.y2);
+                ctx.stroke();
+            }
+        }
+
+        function addTireMark() {
+            // Calculate wheel positions
+            const wheelDistance = car.width / 2;
+            const backAxleOffset = car.height / 3;
+            
+            // Left rear wheel
+            const leftX = car.x - Math.cos(car.angle) * wheelDistance + Math.sin(car.angle) * backAxleOffset;
+            const leftY = car.y - Math.sin(car.angle) * wheelDistance - Math.cos(car.angle) * backAxleOffset;
+            
+            // Right rear wheel
+            const rightX = car.x + Math.cos(car.angle) * wheelDistance + Math.sin(car.angle) * backAxleOffset;
+            const rightY = car.y + Math.sin(car.angle) * wheelDistance - Math.cos(car.angle) * backAxleOffset;
+            
+            // Previous positions
+            const prevMark = car.tireMarks[car.tireMarks.length - 1];
+            
+            if (prevMark && car.drifting) {
+                car.tireMarks.push({
+                    x1: prevMark.x2,
+                    y1: prevMark.y2,
+                    x2: leftX,
+                    y2: leftY,
+                    life: 2,
+                    maxLife: 2
+                });
+                
+                car.tireMarks.push({
+                    x1: prevMark.x2b,
+                    y1: prevMark.y2b,
+                    x2: rightX,
+                    y2: rightY,
+                    life: 2,
+                    maxLife: 2
+                });
+            } else {
+                car.tireMarks.push({
+                    x1: leftX,
+                    y1: leftY,
+                    x2: leftX,
+                    y2: leftY,
+                    x2b: rightX,
+                    y2b: rightY,
+                    life: 2,
+                    maxLife: 2
+                });
+            }
+            
+            // Limit the number of tire marks
+            if (car.tireMarks.length > 100) {
+                car.tireMarks.shift();
+            }
+        }
+
+        function drawObstacles(ctx) {
+            for (const obstacle of obstacles) {
+                ctx.save();
+                ctx.translate(obstacle.x, obstacle.y);
+                ctx.rotate(obstacle.angle);
+                
+                // Draw obstacle body
+                ctx.fillStyle = obstacle.color;
+                ctx.fillRect(-obstacle.width/2, -obstacle.height/2, obstacle.width, obstacle.height);
+                
+                // Draw text
+                ctx.fillStyle = '#fff';
+                ctx.font = '16px var(--font-main), sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(obstacle.text, 0, 0);
+                
+                ctx.restore();
+            }
+        }
+
+        function drawPowerUps(ctx) {
+            for (const powerUp of powerUps) {
+                if (!powerUp.active) continue;
+                
+                ctx.beginPath();
+                ctx.arc(powerUp.x, powerUp.y, powerUp.radius, 0, Math.PI * 2);
+                ctx.fillStyle = powerUp.color;
+                ctx.fill();
+                
+                ctx.fillStyle = '#000';
+                ctx.font = '12px var(--font-main), sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(powerUp.type === 'turbo' ? 'TURBO' : 'SCORE', powerUp.x, powerUp.y);
+                
+                // Pulsing effect
+                powerUp.radius = 15 + Math.sin(Date.now() / 200) * 2;
+            }
+        }
+
+        function updateCarPosition(deltaTime) {
+            // Handle input
+            if (keys.up) {
+                car.speed += car.acceleration * deltaTime;
+            } else if (keys.down) {
+                car.speed -= car.deceleration * deltaTime;
+            } else {
+                // Apply friction
+                car.speed *= car.friction;
+            }
+            
+            // Limit speed
+            car.speed = Math.max(car.reverseMaxSpeed, Math.min(car.maxSpeed, car.speed));
+            
+            // Apply braking
+            if (keys.handbrake) {
+                car.speed *= car.brakeStrength;
+                car.drifting = Math.abs(car.speed) > 100;
+                
+                if (car.drifting) {
+                    addTireMark();
+                }
+            } else {
+                car.drifting = false;
+            }
+            
+            // Steering
+            let turnFactor = (car.speed / car.maxSpeed) * car.turnSpeed;
+            
+            // Reduce turning at very low speeds
+            if (Math.abs(car.speed) < 50) {
+                turnFactor *= Math.abs(car.speed) / 50;
+            }
+            
+            // Apply drift effect
+            if (car.drifting) {
+                turnFactor *= 1.5; // More responsive turning while drifting
+            }
+            
+            if (keys.left) {
+                car.angle -= turnFactor * deltaTime;
+            }
+            if (keys.right) {
+                car.angle += turnFactor * deltaTime;
+            }
+            
+            // Update position based on velocity
+            const moveAngle = car.drifting ? car.angle - (car.speed > 0 ? 0.2 : -0.2) : car.angle;
+            car.x += Math.sin(moveAngle) * car.speed * deltaTime;
+            car.y -= Math.cos(moveAngle) * car.speed * deltaTime;
+            
+            // Handle turbo mode
+            if (car.turboMode) {
+                car.turboTimer -= deltaTime;
+                
+                if (car.turboTimer <= 0) {
+                    car.turboMode = false;
+                    car.maxSpeed = 500;
+                    car.acceleration = 200;
+                    car.turboCooldown = car.turboCooldownMax;
+                }
+            }
+            
+            // Update turbo cooldown
+            if (car.turboCooldown > 0) {
+                car.turboCooldown -= deltaTime;
+            }
+            
+            // Screen boundaries with bounce
+            if (car.x < 0) {
+                car.x = 0;
+                car.speed *= -0.5;
+            }
+            if (car.x > canvas.width) {
+                car.x = canvas.width;
+                car.speed *= -0.5;
+            }
+            if (car.y < 0) {
+                car.y = 0;
+                car.speed *= -0.5;
+            }
+            if (car.y > canvas.height) {
+                car.y = canvas.height;
+                car.speed *= -0.5;
+            }
+        }
+
+        function checkCollisions() {
+            // Check collisions with obstacles
+            for (const obstacle of obstacles) {
+                // Calculate distance between car and obstacle centers
+                const dx = car.x - obstacle.x;
+                const dy = car.y - obstacle.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                
+                // Simple collision detection based on distance
+                const minDistance = Math.max(car.width, car.height) / 2 + Math.max(obstacle.width, obstacle.height) / 2;
+                
+                if (distance < minDistance * 0.8) {
+                    // Calculate collision normal
+                    const nx = dx / distance;
+                    const ny = dy / distance;
+                    
+                    // Calculate relative velocity
+                    const speed = Math.abs(car.speed);
+                    const impactSpeed = speed * 0.8;
+                    
+                    // Apply impulse to obstacle
+                    obstacle.vx += nx * impactSpeed * 0.1;
+                    obstacle.vy += ny * impactSpeed * 0.1;
+                    obstacle.angularVelocity += (Math.random() - 0.5) * impactSpeed * 0.01;
+                    
+                    // Apply reaction to car
+                    car.speed *= -0.3;
+                    
+                    // Add score and update counter
+                    score += Math.floor(speed / 10);
+                    obstaclesHit++;
+                    updateScore();
+                    
+                    // Screen shake effect for strong impacts
+                    if (speed > 200) {
+                        const shakeIntensity = speed / 100;
+                        document.getElementById('game-container').style.transform = `translate(${(Math.random() - 0.5) * shakeIntensity}px, ${(Math.random() - 0.5) * shakeIntensity}px)`;
+                        setTimeout(() => {
+                            document.getElementById('game-container').style.transform = 'translate(0, 0)';
+                        }, 100);
+                    }
+                }
+            }
+            
+            // Check collisions with power-ups
+            for (let i = 0; i < powerUps.length; i++) {
+                const powerUp = powerUps[i];
+                if (!powerUp.active) continue;
+                
+                // Calculate distance
+                const dx = car.x - powerUp.x;
+                const dy = car.y - powerUp.y;
+                const distance = Math.sqrt(dx * dx + dy * dy);
+                
+                if (distance < car.width / 2 + powerUp.radius) {
+                    // Collect power-up
+                    powerUp.active = false;
+                    powerUp.collectEffect();
+                    
+                    // Create a new power-up
+                    setTimeout(() => {
+                        powerUps.splice(i, 1);
+                        createPowerUps();
+                    }, 1000);
+                }
+            }
+        }
+
+        function updateObstacles(deltaTime) {
+            for (const obstacle of obstacles) {
+                // Apply physics
+                obstacle.x += obstacle.vx * deltaTime;
+                obstacle.y += obstacle.vy * deltaTime;
+                obstacle.angle += obstacle.angularVelocity * deltaTime;
+                
+                // Apply friction
+                obstacle.vx *= 0.98;
+                obstacle.vy *= 0.98;
+                obstacle.angularVelocity *= 0.95;
+                
+                // Keep on screen with bounce
+                if (obstacle.x < 0) {
+                    obstacle.x = 0;
+                    obstacle.vx *= -0.7;
+                }
+                if (obstacle.x > canvas.width) {
+                    obstacle.x = canvas.width;
+                    obstacle.vx *= -0.7;
+                }
+                if (obstacle.y < 0) {
+                    obstacle.y = 0;
+                    obstacle.vy *= -0.7;
+                }
+                if (obstacle.y > canvas.height) {
+                    obstacle.y = canvas.height;
+                    obstacle.vy *= -0.7;
+                }
+                
+                // Obstacle-obstacle collisions
+                for (const other of obstacles) {
+                    if (obstacle === other) continue;
+                    
+                    const dx = obstacle.x - other.x;
+                    const dy = obstacle.y - other.y;
+                    const distance = Math.sqrt(dx * dx + dy * dy);
+                    const minDistance = (obstacle.width + other.width) / 2;
+                    
+                    if (distance < minDistance) {
+                        // Calculate collision response
+                        const nx = dx / distance;
+                        const ny = dy / distance;
+                        const overlap = minDistance - distance;
+                        
+                        // Separate objects
+                        obstacle.x += nx * overlap * 0.5;
+                        obstacle.y += ny * overlap * 0.5;
+                        other.x -= nx * overlap * 0.5;
+                        other.y -= ny * overlap * 0.5;
+                        
+                        // Exchange momentum (simplified)
+                        const p = 2 * (obstacle.vx * nx + obstacle.vy * ny - other.vx * nx - other.vy * ny) 
+                               / (obstacle.mass + other.mass);
+                        
+                        obstacle.vx -= p * other.mass * nx;
+                        obstacle.vy -= p * other.mass * ny;
+                        other.vx += p * obstacle.mass * nx;
+                        other.vy += p * obstacle.mass * ny;
+                        
+                        // Add some random rotation
+                        obstacle.angularVelocity += (Math.random() - 0.5) * 2;
+                        other.angularVelocity += (Math.random() - 0.5) * 2;
+                    }
+                }
+            }
+        }
+
+        function drawBackground(ctx) {
+            // Grid pattern
+            ctx.fillStyle = '#050505';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            
+            ctx.strokeStyle = 'rgba(0, 255, 255, 0.1)';
+            ctx.lineWidth = 1;
+            
+            const gridSize = 50;
+            const offsetX = car.x % gridSize;
+            const offsetY = car.y % gridSize;
+            
+            for (let x = -offsetX; x < canvas.width; x += gridSize) {
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+            }
+            
+            for (let y = -offsetY; y < canvas.height; y += gridSize) {
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
+            }
+            
+            // Track border
+            ctx.strokeStyle = 'rgba(0, 255, 255, 0.3)';
+            ctx.lineWidth = 10;
+            ctx.strokeRect(50, 50, canvas.width - 100, canvas.height - 100);
+        }
+
+        function drawGameInfo(ctx) {
+            // Speed gauge
+            const speedPercent = Math.abs(car.speed) / car.maxSpeed;
+            ctx.fillStyle = car.turboMode ? '#ff00ff' : '#00ffff';
+            ctx.fillRect(canvas.width - 120, canvas.height - 30, 100 * speedPercent, 15);
+            
+            ctx.strokeStyle = '#ffffff';
+            ctx.strokeRect(canvas.width - 120, canvas.height - 30, 100, 15);
+            
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '12px var(--font-main), sans-serif';
+            ctx.textAlign = 'right';
+            ctx.fillText(`${Math.abs(Math.floor(car.speed))} km/h`, canvas.width - 125, canvas.height - 20);
+            
+            // Turbo cooldown indicator
+            if (car.turboCooldown > 0) {
+                ctx.fillStyle = 'rgba(255, 0, 255, 0.3)';
+                ctx.fillRect(canvas.width - 120, canvas.height - 50, 100 * (1 - car.turboCooldown / car.turboCooldownMax), 15);
+                ctx.strokeStyle = '#ff00ff';
+                ctx.strokeRect(canvas.width - 120, canvas.height - 50, 100, 15);
+                ctx.fillStyle = '#ff00ff';
+                ctx.textAlign = 'right';
+                ctx.fillText('TURBO RECHARGING', canvas.width - 125, canvas.height - 40);
+            } else if (car.turboMode) {
+                ctx.fillStyle = 'rgba(255, 0, 255, 0.8)';
+                ctx.fillRect(canvas.width - 120, canvas.height - 50, 100 * (car.turboTimer / car.turboMaxTime), 15);
+                ctx.strokeStyle = '#ff00ff';
+                ctx.strokeRect(canvas.width - 120, canvas.height - 50, 100, 15);
+                ctx.fillStyle = '#ff00ff';
+                ctx.textAlign = 'right';
+                ctx.fillText('TURBO ACTIVE', canvas.width - 125, canvas.height - 40);
+            } else {
+                ctx.fillStyle = '#ff00ff';
+                ctx.textAlign = 'right';
+                ctx.fillText('TURBO READY', canvas.width - 125, canvas.height - 40);
+            }
+        }
+
+        function gameLoop(timestamp) {
+            if (!gameActive) return;
+            
+            // Calculate delta time for smooth animation
+            if (!lastTimestamp) lastTimestamp = timestamp;
+            deltaTime = (timestamp - lastTimestamp) / 1000; // Convert to seconds
+            deltaTime = Math.min(deltaTime, 0.1); // Cap delta time to prevent large jumps
+            lastTimestamp = timestamp;
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw background
+            drawBackground(ctx);
+            
+            // Update car position
+            updateCarPosition(deltaTime);
+            
+            // Update obstacles
+            updateObstacles(deltaTime);
+            
+            // Check collisions
+            checkCollisions();
+            
+            // Draw tire marks
+            drawTireMarks(ctx);
+            
+            // Draw obstacles
+            drawObstacles(ctx);
+            
+            // Draw power-ups
+            drawPowerUps(ctx);
+            
+            // Draw car
+            drawCar(ctx);
+            
+            // Draw game information
+            drawGameInfo(ctx);
+            
+            requestAnimationFrame(gameLoop);
+        }
+
+        // Initialize game when toggled
+        gameToggle.addEventListener('click', () => {
+            if (!gameActive) {
+                gameActive = true;
+                gameContainer.style.display = 'block';
+                resetGame();
+                lastTimestamp = 0;
+                requestAnimationFrame(gameLoop);
+            } else {
+                gameActive = false;
+                gameContainer.style.display = 'none';
+            }
+        });
+
+        // Also close the game when pressing ESC
+        window.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && gameActive) {
+                gameActive = false;
+                gameContainer.style.display = 'none';
+            }
+        });
     </script>
 </body>
 </html>