Update index.html

index.html

@@ -15,11 +15,11 @@
 
     <style>
         :root {
-            --bg-color: #050505; /* Slightly off-black for depth */
+            --bg-color: #050505;
             --text-color: #e0e0e0;
             --text-color-muted: #777;
-            --accent-color: #00ffff; /* Cyan - adjust if needed */
-            --glow-color: rgba(0, 255, 255, 0.15); /* Glow color matching accent */
+            --accent-color: #00ffff; /* Cyan */
+            --glow-color: rgba(0, 255, 255, 0.15);
             --hover-bg: rgba(0, 255, 255, 0.1);
             --border-color: rgba(255, 255, 255, 0.1);
             --font-main: 'DM Sans', sans-serif;
@@ -33,7 +33,7 @@
         }
 
         html {
-            font-size: 16px; /* Base font size */
+            font-size: 16px;
         }
 
         body {
@@ -47,9 +47,9 @@
             min-height: 100vh;
             text-align: center;
             position: relative;
-            overflow: hidden; /* Prevent scrollbars from animations */
+            overflow: hidden;
             cursor: none; /* Hide default cursor */
-            perspective: 1000px; /* For 3D effects if needed later */
+            perspective: 1000px;
         }
 
         /* Subtle Animated Background Gradient */
@@ -76,12 +76,11 @@
             100% { transform: scale(1.1); opacity: 0.8; }
         }
 
-
         .container {
             position: relative;
-            z-index: 2; /* Above background, below cursor */
+            z-index: 2;
             padding: 2rem;
-            max-width: 900px; /* Limit width */
+            max-width: 900px;
             width: 90%;
             animation: slideInUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
             opacity: 0;
@@ -96,19 +95,18 @@
         }
 
         h1 {
-            font-size: clamp(3rem, 10vw, 6rem); /* Responsive font size */
-            font-weight: 700; /* Bold DM Sans */
-            letter-spacing: -0.05em; /* Tighter letter spacing */
+            font-size: clamp(3rem, 10vw, 6rem);
+            font-weight: 700;
+            letter-spacing: -0.05em;
             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; /* For potential pseudo-elements */
         }
 
         .subtitle {
             font-size: clamp(0.9rem, 2.5vw, 1.2rem);
-            font-weight: 400; /* Regular DM Sans */
+            font-weight: 400;
             color: var(--text-color-muted);
             margin-bottom: 2.5rem;
             letter-spacing: 0.05em;
@@ -135,7 +133,7 @@
             display: flex;
             flex-wrap: wrap;
             justify-content: center;
-            gap: 0.8rem; /* Space between model badges */
+            gap: 0.8rem;
         }
 
         .model-badge {
@@ -145,17 +143,17 @@
             font-size: clamp(0.75rem, 2vw, 0.9rem);
             font-weight: 400;
             padding: 0.5em 1em;
-            border-radius: 15px; /* Pill shape */
+            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); /* Base scale for transition */
+            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); /* Subtle lift */
+            transform: scale(1.05) translateY(-2px);
             box-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
         }
 
@@ -181,12 +179,12 @@
             color: var(--text-color);
             text-decoration: none;
             font-size: clamp(0.9rem, 2.5vw, 1.1rem);
-            font-weight: 700; /* Bold links */
+            font-weight: 700;
             padding: 0.8em 1.8em;
             border: 2px solid var(--border-color);
             border-radius: 5px;
             position: relative;
-            overflow: hidden; /* For hover effect */
+            overflow: hidden;
             transition: all var(--transition-speed) ease;
             z-index: 1;
         }
@@ -204,22 +202,22 @@
         }
 
         .playground-link:hover {
-            color: var(--bg-color); /* Text color changes to background */
+            color: var(--bg-color);
             border-color: var(--accent-color);
-            transform: translateY(-3px); /* Slight lift */
+            transform: translateY(-3px);
             box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
         }
 
         .playground-link:hover::before {
-            left: 0; /* Slide in the background */
+            left: 0;
         }
 
-        .playground-link span { /* Add inner span for potential icon */
+        .playground-link span {
             display: inline-block;
             transition: transform 0.2s ease;
         }
         .playground-link:hover span {
-             transform: translateX(3px); /* Subtle text shift */
+             transform: translateX(3px);
         }
 
 
@@ -227,59 +225,59 @@
 
         .glow {
             position: fixed;
-            width: 800px; /* Larger glow */
+             /* 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%; /* Ensure it's circular for centering */
             pointer-events: none;
             opacity: 0;
-            transition: opacity 0.4s ease, transform 0.1s ease-out; /* Smooth opacity fade */
-            transform: translate(-50%, -50%) scale(0.8);
-            z-index: 1; /* Behind content, above bg */
-            filter: blur(10px); /* Soften the glow edges */
+            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; /* Optimize animation */
         }
 
         body:hover .glow {
             opacity: 1;
-            transform: translate(-50%, -50%) scale(1);
         }
 
         .cursor {
+            position: fixed;
+            /* Position set by JS */
+            left: 0;
+            top: 0;
             width: 25px;
             height: 25px;
-            border: 2px solid var(--accent-color); /* Use accent color */
+            border: 2px solid var(--accent-color);
             border-radius: 50%;
-            position: fixed;
             pointer-events: none;
-            transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94),
-                        background-color 0.2s ease,
-                        border-color 0.2s ease,
-                        width 0.2s ease,
-                        height 0.2s ease;
-            z-index: 9999; /* Always on top */
-            transform: translate(-50%, -50%);
-            mix-blend-mode: difference; /* Cool effect over elements */
+            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; /* Optimize animation */
         }
 
-        body:hover .cursor {
-             /* Handled by JS interactions */
-        }
-
-        /* Cursor interaction states */
+        /* Cursor interaction states (applied via JS) */
         .cursor.hover-link {
-            transform: translate(-50%, -50%) scale(1.5);
+            /* Scale handled by JS */
             background-color: var(--accent-color);
             border-color: transparent;
         }
 
         .cursor.hover-text {
-            transform: translate(-50%, -50%) scale(0.7);
+            /* Scale handled by JS */
              border-width: 4px;
              border-color: rgba(255,255,255, 0.5);
         }
 
         .cursor.clicking {
-            transform: translate(-50%, -50%) scale(0.6);
+            /* Scale handled by JS */
             background-color: rgba(255,255,255,0.3);
         }
 
@@ -304,6 +302,11 @@
              .playground-link {
                  padding: 0.7em 1.5em;
              }
+             /* Reduce glow size on smaller screens */
+             .glow {
+                 width: 500px;
+                 height: 500px;
+             }
         }
 
     </style>
@@ -321,13 +324,15 @@
         <div class="models-section">
             <h2>Free Access To Premium Models</h2>
             <div class="models-grid">
-                <!-- List your models here -->
+                <!-- Updated Model List -->
                 <span class="model-badge">GPT-4o</span>
                 <span class="model-badge">GPT-4o-mini</span>
-                <span class="model-badge">Anthropic o1</span>
-                <span class="model-badge">Anthropic o3-mini</span>
-                <span class="model-badge">GPT-4.5 (Hypothetical)</span>
+                <span class="model-badge">OpenAI o1</span>
+                <span class="model-badge">OpenAI o3-mini</span>
+                <span class="model-badge">GPT-4.5</span>
                 <span class="model-badge">Claude 3.7 Sonnet</span>
+                <span class="model-badge">Gemini 1.5 Pro</span>
+                <span class="model-badge">Gemini 1.5 Flash</span>
                 <span class="model-badge">And More Top Models...</span>
             </div>
         </div>
@@ -346,7 +351,7 @@
         const cursor = document.querySelector('.cursor');
         const glow = document.querySelector('.glow');
         const hoverables = document.querySelectorAll('a, .model-badge');
-        const textElements = document.querySelectorAll('h1, p, h2'); // Add other text if needed
+        const textElements = document.querySelectorAll('h1, p, h2, .model-badge'); // Include badges for text hover
 
         let mouseX = 0;
         let mouseY = 0;
@@ -354,18 +359,50 @@
         let cursorY = 0;
         let glowX = 0;
         let glowY = 0;
-        const speed = 0.1; // Adjust for smoother cursor following (lower = smoother)
-        const glowSpeed = 0.08; // Slightly different speed for glow
+
+        // 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;
+
+        // 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;
+        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;
+        });
+
 
         function animate() {
-            // Lerp (linear interpolation) for smooth following
-            cursorX += (mouseX - cursorX) * speed;
-            cursorY += (mouseY - cursorY) * speed;
+            // Lerp for smooth following
+            cursorX += (mouseX - cursorX) * cursorSpeed;
+            cursorY += (mouseY - cursorY) * cursorSpeed;
             glowX += (mouseX - glowX) * glowSpeed;
             glowY += (mouseY - glowY) * glowSpeed;
 
-            cursor.style.transform = `translate(${cursorX - cursor.offsetWidth / 2}px, ${cursorY - cursor.offsetHeight / 2}px) ${cursor.dataset.scale || 'scale(1)'}`; // Apply stored scale
-            glow.style.transform = `translate(${glowX - glow.offsetWidth / 2}px, ${glowY - glow.offsetHeight / 2}px) scale(1)`; // Glow follows slightly slower
+            // 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;
+
+            cursor.style.transform = `translate(${cursorTranslateX}px, ${cursorTranslateY}px) scale(${currentCursorScale})`;
+            glow.style.transform = `translate(${glowTranslateX}px, ${glowTranslateY}px)`; // Glow doesn't scale dynamically here
 
             requestAnimationFrame(animate);
         }
@@ -373,63 +410,75 @@
         document.addEventListener('mousemove', (e) => {
             mouseX = e.clientX;
             mouseY = e.clientY;
-
-            // Move glow immediately for responsiveness on hover-in, smooth following otherwise
-            if (glow.style.opacity === '0') {
-                glow.style.left = mouseX + 'px';
-                glow.style.top = mouseY + 'px';
-            }
         });
 
         // Start the animation loop
         animate();
 
-        // Hover effects for cursor
-        hoverables.forEach(el => {
-            el.addEventListener('mouseenter', () => {
-                cursor.classList.add('hover-link');
-                cursor.dataset.scale = 'scale(1.5)'; // Store scale for lerp
+        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 => {
+                const rect = el.getBoundingClientRect();
+                if (mouseX >= rect.left && mouseX <= rect.right && mouseY >= rect.top && mouseY <= rect.bottom) {
+                    isHoveringLink = true;
+                }
             });
-            el.addEventListener('mouseleave', () => {
-                cursor.classList.remove('hover-link');
-                cursor.dataset.scale = 'scale(1)'; // Reset scale
-            });
-        });
 
-        textElements.forEach(el => {
-             el.addEventListener('mouseenter', () => {
-                 if (!cursor.classList.contains('hover-link')) { // Don't override link hover
-                     cursor.classList.add('hover-text');
-                     cursor.dataset.scale = 'scale(0.7)';
+            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) {
+                        isHoveringText = true;
+                    }
                  }
-             });
-             el.addEventListener('mouseleave', () => {
-                 cursor.classList.remove('hover-text');
-                  if (!cursor.classList.contains('hover-link')) {
-                      cursor.dataset.scale = 'scale(1)';
-                  }
-             });
-        });
+            });
+
+            // Apply styles and target scale based on state
+             cursor.classList.toggle('hover-link', isHoveringLink);
+             cursor.classList.toggle('hover-text', isHoveringText && !isHoveringLink); // Only text hover if not link hover
+
+            if (isHoveringLink) {
+                targetScale = hoverLinkCursorScale;
+            } else if (isHoveringText) {
+                targetScale = hoverTextCursorScale;
+            }
+
+            // Handle clicking state separately
+            if (cursor.classList.contains('clicking')) {
+                // Optionally combine scales or prioritize click scale
+                targetScale = clickCursorScale; // Click scale overrides others
+            }
 
+            // Smoothly transition scale (optional, can also rely on CSS transition if preferred)
+            // currentCursorScale += (targetScale - currentCursorScale) * 0.2; // Lerp scale
+            // Simpler: Just set the target scale and let JS/CSS handle visual update
+            currentCursorScale = targetScale;
+
+        }
 
-        // Click effect for cursor
+        // Update state on mouse move for accuracy
+        document.addEventListener('mousemove', updateCursorState);
+
+
+        // Add/Remove clicking class
         document.addEventListener('mousedown', () => {
             cursor.classList.add('clicking');
-            cursor.dataset.scale = `scale(0.6) ${cursor.dataset.scale?.includes('1.5') ? 'scale(1.5)' : ''}`; // Combine scales if needed
+            updateCursorState(); // Re-evaluate state immediately on click
         });
 
         document.addEventListener('mouseup', () => {
             cursor.classList.remove('clicking');
-            // Reset scale based on current hover state
-            if (cursor.classList.contains('hover-link')) {
-                cursor.dataset.scale = 'scale(1.5)';
-            } else if (cursor.classList.contains('hover-text')) {
-                 cursor.dataset.scale = 'scale(0.7)';
-            } else {
-                 cursor.dataset.scale = 'scale(1)';
-            }
+            updateCursorState(); // Re-evaluate state immediately on release
         });
 
+        // Initial state check in case mouse enters window over an element
+        updateCursorState();
+
     </script>
 </body>
 </html>