Add scroll-based morphing: Sphere crystallizes as you explore

INTERACTION UPGRADE:
- Sphere gradually morphs into diamond as you scroll toward research cards
- Starts morphing 300px before cards come into view
- Instant full morph when hovering over any research card
- Returns to scroll-based state when leaving cards

Technical implementation:
- Scroll event listener calculates proximity to .research-grid
- Progress mapped linearly from 300px trigger distance
- Card hover detection via .research-card querySelector
- Initial scroll check on page load for correct state

Creates natural connection between visual element and content.
User feedback: 'it can turn into a diamond when you hover over the cards!'

Author: Abdul Bari

docs/three-sphere-morph.js

@@ -51,6 +51,9 @@ class MorphingSphere {
         this.init();
         this.animate();
         this.setupEventListeners();
+
+        // Check initial scroll position
+        setTimeout(() => this.handleScroll(), 100);
     }
 
     init() {
@@ -269,19 +272,13 @@ class MorphingSphere {
         this.container.addEventListener('mouseleave', () => {
             this.isHovered = false;
             this.targetScale = 1;
-
-            // Return to sphere when mouse leaves
-            if (this.isMorphed) {
-                this.isMorphed = false;
-                this.targetMorphProgress = 0;
-            }
         });
 
-        // Click to toggle morph
-        this.container.addEventListener('click', () => {
-            this.isMorphed = !this.isMorphed;
-            this.targetMorphProgress = this.isMorphed ? 1 : 0;
-        });
+        // Scroll-based morphing
+        window.addEventListener('scroll', () => this.handleScroll(), { passive: true });
+
+        // Research card hover detection
+        this.setupCardHoverDetection();
 
         // Resize
         window.addEventListener('resize', () => this.onResize());
@@ -315,6 +312,46 @@ class MorphingSphere {
         this.targetRotation.y = this.mouse.x * 0.3;
     }
 
+    handleScroll() {
+        const researchGrid = document.querySelector('.research-grid');
+        if (!researchGrid) return;
+
+        const rect = researchGrid.getBoundingClientRect();
+        const windowHeight = window.innerHeight;
+
+        // Calculate how close the research grid is to viewport
+        // Morph starts when grid is 300px below viewport, completes when grid is in view
+        const triggerDistance = 300;
+        const distanceFromView = rect.top - windowHeight;
+
+        if (distanceFromView < triggerDistance) {
+            // Map distance to morph progress (0 to 1)
+            const progress = Math.max(0, Math.min(1, 1 - (distanceFromView / triggerDistance)));
+            this.targetMorphProgress = progress;
+        } else {
+            this.targetMorphProgress = 0;
+        }
+    }
+
+    setupCardHoverDetection() {
+        // Wait for DOM to be ready, then attach hover listeners to research cards
+        setTimeout(() => {
+            const cards = document.querySelectorAll('.research-card');
+
+            cards.forEach(card => {
+                card.addEventListener('mouseenter', () => {
+                    // Full morph when hovering over any card
+                    this.targetMorphProgress = 1;
+                });
+
+                card.addEventListener('mouseleave', () => {
+                    // Return to scroll-based morph
+                    this.handleScroll();
+                });
+            });
+        }, 100);
+    }
+
     updateRotation() {
         // Smooth interpolation towards target rotation
         this.currentRotation.x += (this.targetRotation.x - this.currentRotation.x) * 0.05;