Update index.html

index.html

@@ -13,6 +13,9 @@
     <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;
@@ -49,7 +52,7 @@
             position: relative;
             overflow: hidden;
             cursor: none; /* Hide default cursor */
-            perspective: 1000px; /* Enable 3D transforms for children */
+            perspective: 1000px;
         }
 
         /* Subtle Animated Background Gradient */
@@ -82,57 +85,36 @@
             padding: 2rem;
             max-width: 900px;
             width: 90%;
-            /* Updated animation with 3D rotation */
-            animation: slideInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
+            animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
             opacity: 0;
-            transform-style: preserve-3d; /* Ensure children respect 3D space */
-            /* Initial transform moved to keyframe */
+            transform: translateY(30px) rotateX(5deg);
+            transform-style: preserve-3d;
         }
 
-        /* Enhanced Entry Animation */
         @keyframes slideInUp {
-             0% {
-                 opacity: 0;
-                 /* Start further down, slightly rotated back */
-                 transform: translateY(60px) rotateX(-15deg) translateZ(-50px);
-            }
-             100% {
+            to {
                 opacity: 1;
-                /* End in the final position with no rotation */
-                transform: translateY(0) rotateX(0deg) translateZ(0);
+                transform: translateY(0) rotateX(0);
             }
         }
 
         .title-container {
-            position: relative; /* Needed for absolute positioning of canvas */
-            display: inline-block; /* Keep it tight around the h1 */
-            margin-bottom: 0.2rem;
-        }
-
-        /* Canvas for the 3D Glass Ball */
-        #glass-ball-canvas {
-            position: absolute;
-            top: 50%; /* Center vertically */
-            left: 50%; /* Center horizontally */
-            width: 180px; /* Adjust size as needed */
-            height: 180px; /* Adjust size as needed */
-             transform: translate(-50%, -65%) translateZ(20px); /* Center and bring slightly forward, adjust Y offset */
-            z-index: 1; /* Place it behind the text (adjust if needed) */
-            pointer-events: none; /* Allow clicks to pass through */
-            opacity: 0; /* Start hidden */
-            animation: fadeIn 2s ease 1.5s forwards; /* Fade in after main animation */
+            position: relative;
+            display: inline-block;
+            transform-style: preserve-3d;
+            margin-bottom: 1.5rem;
         }
 
         h1 {
             font-size: clamp(3rem, 10vw, 6rem);
             font-weight: 700;
             letter-spacing: -0.05em;
-            /* margin-bottom: 0.2rem; Removed, handled by title-container */
+            margin-bottom: 0.2rem;
             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;
-            position: relative; /* Needed for z-index stacking */
-            z-index: 2; /* Ensure text is above the canvas */
+            transform-style: preserve-3d;
+            transform: translateZ(0);
         }
 
         .subtitle {
@@ -142,16 +124,16 @@
             margin-bottom: 2.5rem;
             letter-spacing: 0.05em;
             transition: color var(--transition-speed) ease;
-            position: relative; /* Stacking context */
-            z-index: 2;
+            transform-style: preserve-3d;
+            transform: translateZ(5px);
         }
 
         .models-section {
             margin-bottom: 3rem;
             opacity: 0;
             animation: fadeIn 1s ease 1s forwards;
-            position: relative; /* Stacking context */
-            z-index: 2;
+            transform-style: preserve-3d;
+            transform: translateZ(10px);
         }
 
         .models-section h2 {
@@ -169,6 +151,7 @@
             flex-wrap: wrap;
             justify-content: center;
             gap: 0.8rem;
+            perspective: 1000px;
         }
 
         .model-badge {
@@ -181,18 +164,17 @@
             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); /* Prepare for 3D hover */
-            position: relative; /* Stacking context */
-            z-index: 2;
+            transform: scale(1) translateZ(0);
+            transform-style: preserve-3d;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
         }
 
         .model-badge:hover {
             background-color: var(--hover-bg);
             color: var(--accent-color);
             border-color: var(--accent-color);
-            /* Subtle 3D lift effect */
-            transform: scale(1.05) translateY(-2px) translateZ(10px);
-            box-shadow: 0 6px 20px rgba(0, 255, 255, 0.25);
+            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);
         }
 
         .playgrounds-section {
@@ -202,8 +184,8 @@
             flex-direction: column; /* Stack links vertically on mobile */
             align-items: center;
             gap: 1rem;
-            position: relative; /* Stacking context */
-            z-index: 2;
+            transform-style: preserve-3d;
+            transform: translateZ(15px);
         }
 
         @media (min-width: 600px) {
@@ -227,7 +209,8 @@
             overflow: hidden;
             transition: all var(--transition-speed) ease;
             z-index: 1;
-            transform: translateZ(0); /* Prepare for 3D hover */
+            transform-style: preserve-3d;
+            transform: translateZ(0);
         }
 
         .playground-link::before {
@@ -245,9 +228,8 @@
         .playground-link:hover {
             color: var(--bg-color);
             border-color: var(--accent-color);
-            /* Subtle 3D lift */
-            transform: translateY(-3px) translateZ(15px);
-            box-shadow: 0 8px 25px rgba(0, 255, 255, 0.35);
+            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);
         }
 
         .playground-link:hover::before {
@@ -267,18 +249,20 @@
 
         .glow {
             position: fixed;
+             /* Position set by JS */
             left: 0;
             top: 0;
             width: 800px;
             height: 800px;
             background: radial-gradient(circle at center, var(--glow-color) 0%, rgba(0, 0, 0, 0) 60%);
-            border-radius: 50%;
+            border-radius: 50%; /* Ensure it's circular for centering */
             pointer-events: none;
             opacity: 0;
-            transition: opacity 0.4s ease;
+            transition: opacity 0.4s ease; /* Only transition opacity */
+            /* transform: translate(-50%, -50%); NO - JS handles transform */
             z-index: 1;
             filter: blur(10px);
-            will-change: transform, opacity;
+            will-change: transform, opacity; /* Optimize animation */
         }
 
         body:hover .glow {
@@ -287,6 +271,7 @@
 
         .cursor {
             position: fixed;
+            /* Position set by JS */
             left: 0;
             top: 0;
             width: 25px;
@@ -294,24 +279,29 @@
             border: 2px solid var(--accent-color);
             border-radius: 50%;
             pointer-events: none;
-            transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, width 0.2s ease, height 0.2s ease;
+            transition: background-color 0.2s ease, border-color 0.2s ease, border-width 0.2s ease, width 0.2s ease, height 0.2s ease; /* Smooth style changes, transform handled by JS loop */
+            /* transform: translate(-50%, -50%); NO - JS handles transform */
             z-index: 9999;
             mix-blend-mode: difference;
             background-color: transparent;
-            will-change: transform;
+            will-change: transform; /* Optimize animation */
         }
 
+        /* Cursor interaction states (applied via JS) */
         .cursor.hover-link {
+            /* Scale handled by JS */
             background-color: var(--accent-color);
             border-color: transparent;
         }
 
         .cursor.hover-text {
+            /* Scale handled by JS */
              border-width: 4px;
              border-color: rgba(255,255,255, 0.5);
         }
 
         .cursor.clicking {
+            /* Scale handled by JS */
             background-color: rgba(255,255,255,0.3);
         }
 
@@ -319,15 +309,76 @@
             to { opacity: 1; }
         }
 
+        /* 3D Glass Orb */
+        #orb-container {
+            position: absolute;
+            top: -80px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 120px;
+            height: 120px;
+            z-index: 3;
+            pointer-events: none;
+        }
+
+        /* Loading Animation Container */
+        #loading-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: var(--bg-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            z-index: 9999;
+            transition: opacity 0.8s ease;
+        }
+
+        .loading-spinner {
+            width: 100px;
+            height: 100px;
+            position: relative;
+            perspective: 1000px;
+        }
+
+        .spinner-cube {
+            width: 50px;
+            height: 50px;
+            position: absolute;
+            top: 25px;
+            left: 25px;
+            transform-style: preserve-3d;
+            animation: spinner-rotate 3s infinite linear;
+        }
+
+        .spinner-face {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 255, 255, 0.1);
+            border: 1px solid var(--accent-color);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            box-shadow: 0 0 10px var(--glow-color);
+        }
+
+        .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); }
+
+        @keyframes spinner-rotate {
+            0% { transform: rotateX(0deg) rotateY(0deg); }
+            100% { transform: rotateX(360deg) rotateY(360deg); }
+        }
+
         /* Responsive adjustments */
         @media (max-width: 768px) {
-             /* Adjust canvas size/position on smaller screens if needed */
-            #glass-ball-canvas {
-                width: 120px;
-                height: 120px;
-                transform: translate(-50%, -60%) translateZ(15px); /* Adjust Y offset and Z */
-            }
-
             h1 {
                 letter-spacing: -0.03em;
             }
@@ -343,37 +394,45 @@
              .playground-link {
                  padding: 0.7em 1.5em;
              }
+             /* Reduce glow size on smaller screens */
              .glow {
                  width: 500px;
                  height: 500px;
              }
-        }
-         @media (max-width: 480px) {
-             #glass-ball-canvas {
-                width: 100px;
-                height: 100px;
-                 transform: translate(-50%, -55%) translateZ(10px); /* Further adjust */
-            }
-             h1 {
-                 font-size: clamp(2.5rem, 10vw, 4rem); /* Slightly smaller H1 on very small screens */
+             #orb-container {
+                top: -60px;
+                width: 90px;
+                height: 90px;
              }
-         }
+        }
 
     </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>
+    </div>
+
     <!-- Mouse Effect Elements -->
     <div class="cursor"></div>
     <div class="glow"></div>
 
     <!-- Main Content -->
     <div class="container">
-
-        <!-- Title container for positioning canvas -->
         <div class="title-container">
-             <!-- Canvas for 3D Glass Ball -->
-             <canvas id="glass-ball-canvas"></canvas>
-             <h1>Loki.AI</h1>
+            <!-- 3D Glass Orb Container -->
+            <div id="orb-container"></div>
+            <h1>Loki.AI</h1>
         </div>
         <p class="subtitle">By Parth Sadaria</p>
 
@@ -403,15 +462,13 @@
         </div>
     </div>
 
-    <!-- Include Three.js Library -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-
     <script>
-        // --- Existing Cursor Logic ---
         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');
 
         let mouseX = 0;
         let mouseY = 0;
@@ -420,61 +477,139 @@
         let glowX = 0;
         let glowY = 0;
 
+        // Adjust speed for desired smoothness (lower = smoother, more 'lag')
         const cursorSpeed = 0.15;
         const glowSpeed = 0.1;
 
+        // Store current scale factor for smooth transitions
         let currentCursorScale = 1;
         const baseCursorScale = 1;
         const hoverLinkCursorScale = 1.5;
         const hoverTextCursorScale = 0.7;
         const clickCursorScale = 0.6;
 
-        let cursorHalfWidth = 12.5; // Initial guess, will be updated
-        let cursorHalfHeight = 12.5;
-        let glowHalfWidth = 400; // Initial guess
-        let glowHalfHeight = 400;
-
-        function updateElementSizes() {
-            cursorHalfWidth = cursor.offsetWidth / 2;
-            cursorHalfHeight = cursor.offsetHeight / 2;
-            // Only update glow size if the element exists and is rendered
-            if (glow && glow.offsetWidth > 0) {
-                glowHalfWidth = glow.offsetWidth / 2;
-                glowHalfHeight = glow.offsetHeight / 2;
-            } else {
-                // Fallback or default if not rendered yet (might happen on first frame)
-                glowHalfWidth = window.innerWidth > 768 ? 400 : 250;
-                glowHalfHeight = window.innerWidth > 768 ? 400 : 250;
-            }
-        }
-
-        window.addEventListener('resize', updateElementSizes);
-        // Initial size calculation after elements are potentially rendered
-        window.addEventListener('load', updateElementSizes);
-        updateElementSizes(); // Call once early
-
+        // Parallax effect variables
+        let windowWidth = window.innerWidth;
+        let windowHeight = window.innerHeight;
+
+        // Pre-calculate half-widths/heights ONCE (assuming they don't change)
+        let cursorHalfWidth = cursor.offsetWidth / 2;
+        let cursorHalfHeight = cursor.offsetHeight / 2;
+        let glowHalfWidth = glow.offsetWidth / 2;
+        let glowHalfHeight = glow.offsetHeight / 2;
+
+        // Recalculate on resize just in case
+        window.addEventListener('resize', () => {
+             cursorHalfWidth = cursor.offsetWidth / 2;
+             cursorHalfHeight = cursor.offsetHeight / 2;
+             glowHalfWidth = glow.offsetWidth / 2;
+             glowHalfHeight = glow.offsetHeight / 2;
+             windowWidth = window.innerWidth;
+             windowHeight = window.innerHeight;
+        });
 
-        function animateCursor() {
+        // 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;
             cursorY += (mouseY - cursorY) * cursorSpeed;
             glowX += (mouseX - glowX) * glowSpeed;
             glowY += (mouseY - glowY) * glowSpeed;
 
+            // Apply transform for positioning and scaling
+            // Calculate the top-left position needed to center the element
             const cursorTranslateX = cursorX - cursorHalfWidth;
             const cursorTranslateY = cursorY - cursorHalfHeight;
             const glowTranslateX = glowX - glowHalfWidth;
             const glowTranslateY = glowY - glowHalfHeight;
 
-            // Use requestAnimationFrame for cursor/glow as well for consistency
-            // Check if elements exist before trying to style them
-            if (cursor) {
-                cursor.style.transform = `translate(${cursorTranslateX}px, ${cursorTranslateY}px) scale(${currentCursorScale})`;
-            }
-            if (glow) {
-                glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`;
-            }
+            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)`;
+            });
 
-            // requestAnimationFrame(animateCursor); // This will be called by the main loop
+            // 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)`;
+            });
+
+            requestAnimationFrame(animate);
         }
 
         document.addEventListener('mousemove', (e) => {
@@ -482,182 +617,89 @@
             mouseY = e.clientY;
         });
 
+        // Start the animation loop
+        animate();
+
         function updateCursorState() {
             let targetScale = baseCursorScale;
             let isHoveringLink = false;
             let isHoveringText = false;
 
+            // Check hover states directly (more robust than relying on mouseenter/leave timing with lerp)
             hoverables.forEach(el => {
-                // Ensure element is visible before getting rect
-                if (el.offsetParent !== null) {
-                    const rect = el.getBoundingClientRect();
-                    if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
-                        isHoveringLink = true;
-                    }
+                const rect = el.getBoundingClientRect();
+                if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
+                    isHoveringLink = true;
                 }
             });
 
             textElements.forEach(el => {
-                 if (!isHoveringLink && el.offsetParent !== null) {
+                // 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) {
                         isHoveringText = true;
                     }
-                 }
+                }
             });
 
-            // Check if cursor exists before toggling classes
-             if (cursor) {
-                cursor.classList.toggle('hover-link', isHoveringLink);
-                cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink);
+            // Apply styles and target scale based on state
+            cursor.classList.toggle('hover-link', isHoveringLink);
+            cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink); 
 
-                if (isHoveringLink) {
-                    targetScale = hoverLinkCursorScale;
-                } else if (isHoveringText) {
-                    targetScale = hoverTextCursorScale;
-                }
+            if (isHoveringLink) {
+                targetScale = hoverLinkCursorScale;
+            } else if (isHoveringText) {
+                targetScale = hoverTextCursorScale;
+            }
 
-                if (cursor.classList.contains('clicking')) {
-                    targetScale = clickCursorScale;
-                }
-             }
+            // Handle clicking state separately
+            if (cursor.classList.contains('clicking')) {
+                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', () => {
-            if(cursor) cursor.classList.add('clicking');
-            updateCursorState();
+            cursor.classList.add('clicking');
+            updateCursorState(); 
         });
 
         document.addEventListener('mouseup', () => {
-            if(cursor) cursor.classList.remove('clicking');
-            updateCursorState();
+            cursor.classList.remove('clicking');
+            updateCursorState(); 
         });
 
-        updateCursorState(); // Initial check
-
-        // --- New Three.js Logic for Glass Ball ---
-        let scene, camera, renderer, sphere, pointLight;
-
-        function initThreeJS() {
-            const canvas = document.getElementById('glass-ball-canvas');
-            if (!canvas || !THREE) return; // Ensure canvas and THREE exist
-
-            // Scene
-            scene = new THREE.Scene();
-
-            // Camera
-            const canvasRect = canvas.getBoundingClientRect();
-            // Adjust FOV based on desired sphere appearance size within canvas
-            camera = new THREE.PerspectiveCamera(50, canvasRect.width / canvasRect.height, 0.1, 100);
-             // Position camera to view the sphere centered at (0,0,0)
-             camera.position.z = 3;
-
-            // Renderer
-            renderer = new THREE.WebGLRenderer({
-                canvas: canvas,
-                alpha: true, // Transparent background
-                antialias: true
-             });
-            renderer.setSize(canvasRect.width, canvasRect.height);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Optimize for high DPI displays
-
-            // Geometry
-            const geometry = new THREE.SphereGeometry(1, 32, 32); // Radius 1, detail 32x32
-
-            // Material - Physical material for glass effect
-            const material = new THREE.MeshPhysicalMaterial({
-                color: 0xffffff, // Base color (can be white for clear glass)
-                metalness: 0.1,  // Low metalness for non-metals
-                roughness: 0.05, // Very low roughness for smooth glass
-                transmission: 0.95, // High transmission (opacity/translucency)
-                transparent: true,
-                opacity: 0.9,   // Overall opacity (can be slightly less than 1)
-                ior: 1.52, // Index of Refraction for glass (~1.52)
-                thickness: 0.5, // Simulates thickness for refraction effects
-                // clearcoat: 1.0, // Optional: add a clear coat layer
-                // clearcoatRoughness: 0.1, // Roughness of the clear coat
-                 envMapIntensity: 1 // How much environment affects reflection (needs env map for best results, but works ok without)
-            });
-
-            // Mesh
-            sphere = new THREE.Mesh(geometry, material);
-            scene.add(sphere);
-
-            // Lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Soft white light
-            scene.add(ambientLight);
-
-            pointLight = new THREE.PointLight(var(--accent-color), 2, 10); // Cyan light, intensity 2, distance 10
-            pointLight.position.set(1.5, 2, 2); // Position the light
-            scene.add(pointLight);
-
-            // Optional: Add another subtle light for more dimension
-            const pointLight2 = new THREE.PointLight(0xffffff, 0.7, 10);
-            pointLight2.position.set(-2, -1, 1.5);
-            scene.add(pointLight2);
-
-            // Start animation loop (combined with cursor loop)
-            animateCombined();
-
-            // Handle Resize
-            window.addEventListener('resize', onWindowResize, false);
-        }
-
-        function onWindowResize() {
-             const canvas = document.getElementById('glass-ball-canvas');
-             if (!canvas || !camera || !renderer) return;
-
-             const canvasRect = canvas.getBoundingClientRect(); // Use current rect
-             const newWidth = canvasRect.width;
-             const newHeight = canvasRect.height;
-
-             // Update camera aspect ratio
-            camera.aspect = newWidth / newHeight;
-            camera.updateProjectionMatrix();
-
-            // Update renderer size
-            renderer.setSize(newWidth, newHeight);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-
-            // Update cursor/glow element sizes too
-            updateElementSizes();
-        }
-
-        // Combined Animation Loop
-        function animateCombined() {
-             requestAnimationFrame(animateCombined);
-
-            // Update Cursor & Glow position/state
-            animateCursor(); // Updates cursor/glow positions via lerp
-            updateCursorState(); // Updates cursor style/scale based on hover
-
-            // Update Three.js Scene (if initialized)
-            if (sphere && scene && camera && renderer) {
-                // Subtle rotation
-                 sphere.rotation.y += 0.003;
-                 sphere.rotation.x += 0.001;
-
-                 // Maybe subtle light movement or reaction to mouse (more complex)
-                 // Example: light follows mouse slightly on x-axis
-                 // pointLight.position.x = 1.5 + (mouseX / window.innerWidth - 0.5) * 2;
-
-                // Render the 3D scene
-                renderer.render(scene, camera);
-            }
-        }
-
-        // Initialize Three.js after the DOM is ready
-        // Use setTimeout to ensure layout is somewhat stable, especially for canvas size
-        // Alternatively, use window.onload if dependencies are complex
-        document.addEventListener('DOMContentLoaded', () => {
-            // Small delay to help ensure canvas has dimensions
-            setTimeout(initThreeJS, 100);
+        // Initial state check
+        updateCursorState();
+
+        // Initialize the 3D orb
+        initOrb();
+        animateOrb();
+
+        // Hide loading screen after everything is loaded
+        window.addEventListener('load', () => {
+            setTimeout(() => {
+                loadingContainer.style.opacity = '0';
+                setTimeout(() => {
+                    loadingContainer.style.display = 'none';
+                }, 800);
+            }, 1500); // Show loading for at least 1.5 seconds
         });
 
+        // If loading takes too long, hide it anyway
+        setTimeout(() => {
+            loadingContainer.style.opacity = '0';
+            setTimeout(() => {
+                loadingContainer.style.display = 'none';
+            }, 800);
+        }, 3000);
     </script>
 </body>
 </html>