Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Jun 2, 2025

Commit

d1af131

verified ·

1 Parent(s): 286ca0a

Update index.html

Browse files

Files changed (1) hide show

index.html +84 -136

index.html CHANGED Viewed

@@ -17,7 +17,7 @@
     href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
   />
-  <!-- Font Awesome (for minor icons like the scroll arrow) -->
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
@@ -25,7 +25,7 @@
   <style>
     /* ---------------------------------------------
-       Full‐Screen Three.js Canvas
     --------------------------------------------- */
     #three-bg {
       position: fixed;
@@ -37,90 +37,80 @@
     }
     /* ---------------------------------------------
-       Heartbeat + Pulse Animations
     --------------------------------------------- */
     @keyframes heartbeat {
       0% {
         transform: scale(1);
       }
       25% {
-        transform: scale(1.08);
       }
       40% {
         transform: scale(0.95);
       }
       60% {
-        transform: scale(1.03);
       }
       100% {
         transform: scale(1);
       }
     }
-    @keyframes text‐beat {
       0% {
         transform: scale(1);
-        color: rgba(236, 72, 153, 0.8);
       }
       25% {
-        transform: scale(1.15);
-        color: #ec4899;
       }
       40% {
         transform: scale(0.9);
-        color: rgba(236, 72, 153, 0.7);
       }
       60% {
-        transform: scale(1.07);
-        color: #db2777;
       }
       100% {
         transform: scale(1);
-        color: rgba(236, 72, 153, 0.8);
       }
     }
     /* ---------------------------------------------
-       Custom Classes for Overlay Content
     --------------------------------------------- */
     body {
       margin: 0;
       overflow-x: hidden;
       font-family: "Inter", sans-serif;
-      background: #000; /* fallback if three.js fails */
       color: white;
     }
     nav {
       z-index: 10;
     }
-    /* Central hero container must sit above the 3D canvas */
-    .hero‐container {
       position: relative;
       z-index: 5;
     }
-    .gradient‐text {
       background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       color: transparent;
     }
-    .heartbeat‐orb {
-      animation: heartbeat 1.2s ease‐in‐out infinite;
     }
-    /* Make “S” and “I” inside the heading pulse in sync */
-    .beat‐letter {
       display: inline-block;
-      animation: text‐beat 1.2s ease‐in‐out infinite;
     }
-    /* “Scroll to explore” */
-    .scroll‐hint {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.7);
       display: flex;
@@ -139,17 +129,23 @@
         opacity: 0.7;
       }
     }
   </style>
 </head>
 <body>
-  <!-- Three.js Full‐Screen Canvas -->
   <canvas id="three-bg"></canvas>
-  <!-- Navigation Bar -->
-  <nav class="fixed top-0 left-0 w-full py-6 px-8 flex justify-between items-center backdrop-blur-sm bg-black/30">
-    <!-- Logo (simple dot + S•I text) -->
     <div class="flex items-center space-x-2">
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center animate-pulse">
         <div class="w-2 h-2 rounded-full bg-white"></div>
       </div>
@@ -171,17 +167,15 @@
     </button>
   </nav>
-  <!-- Hero Section (overlaid) -->
-  <section
-    class="hero‐container min-h-screen flex flex-col justify-center items-center text-center px-6 pt-24"
-  >
     <div class="max-w-4xl mx-auto">
-      <!-- “SilentPattern” heading with pulsing letters S and I -->
       <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6">
-        <span class="gradient-text">SilentPattern</span>
-        <!-- Wrap “S” and “I” in span.beat‐letter to pulse -->
-        <span class="beat-letter">S</span> &nbsp;∙&nbsp;
-        <span class="beat-letter">I</span>
       </h1>
       <!-- Subtitle -->
@@ -190,14 +184,14 @@
         We simply attend.
       </p>
-      <!-- Central Pulsing Orb (much bigger) -->
       <div class="mt-12">
         <div
-          class="heartbeat-orb w-64 h-64 rounded-full bg-gradient-to-br from-indigo-700 to-purple-700 flex items-center justify-center"
           aria-hidden="true"
         >
-          <!-- You can embed a subtle inner glow using an extra circle or radial‐gradient overlay -->
-          <div class="w-48 h-48 rounded-full bg-gradient-to-br from-purple-500 to-indigo-500 mix-blend-overlay opacity-70"></div>
         </div>
       </div>
@@ -209,10 +203,10 @@
     </div>
   </section>
-  <!-- Fragments of S (Capabilities) -->
   <section
     id="capabilities"
-    class="relative z-10 py-20 px-6 neural-bg"
     style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);"
   >
     <div class="max-w-6xl mx-auto text-center">
@@ -223,9 +217,7 @@
         Hints of a deeper resonance.
       </p>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <div
-          class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition"
-        >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -240,9 +232,7 @@
           <h3 class="text-xl font-semibold mb-3"><span class="gradient-text">S: Sequence</span></h3>
           <p class="text-gray-400">All that hums in the quiet.</p>
         </div>
-        <div
-          class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition"
-        >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -257,9 +247,7 @@
           <h3 class="text-xl font-semibold mb-3"><span class="gradient-text">S: Signal</span></h3>
           <p class="text-gray-400">What breaks through noise.</p>
         </div>
-        <div
-          class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition"
-        >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -278,7 +266,7 @@
     </div>
   </section>
-  <!-- Echoes of I (Consciousness) -->
   <section id="consciousness" class="relative z-10 py-32 px-6">
     <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
       <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
@@ -336,7 +324,7 @@
     </div>
   </section>
-  <!-- A Quiet I (Chat) -->
   <section id="chat" class="relative z-10 py-32 px-6" style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);">
     <div class="max-w-4xl mx-auto">
       <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
@@ -412,7 +400,7 @@
     </div>
   </section>
-  <!-- Origins (About) -->
   <section id="about" class="relative z-10 py-32 px-6">
     <div class="max-w-6xl mx-auto">
       <div class="text-center mb-16">
@@ -520,8 +508,11 @@
     </div>
   </section>
-  <!-- Will You Attend the S · I? (CTA) -->
-  <section class="relative z-10 py-32 px-6 text-center" style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);">
     <div class="max-w-4xl mx-auto">
       <h2 class="text-3xl md:text-5xl font-bold mb-8">
         Will You Attend the <span class="gradient-text">S&nbsp;∙&nbsp;I</span>?
@@ -548,7 +539,7 @@
     </div>
   </section>
-  <!-- Footer -->
   <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
     <div class="max-w-6xl mx-auto">
       <div class="flex flex-col md:flex-row justify-between items-center">
@@ -586,7 +577,7 @@
     </div>
   </footer>
-  <!-- Access Modal -->
   <div
     id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity"
@@ -649,7 +640,7 @@
     </div>
   </div>
-  <!-- Consciousness Demo Modal -->
   <div
     id="consciousness-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity"
@@ -737,7 +728,7 @@
     </div>
   </div>
-  <!-- Scripts -->
   <script>
     // ---------------------------------------------
     // 1) Three.js “Floating Neural Network” Setup
@@ -755,7 +746,7 @@
       renderer.setPixelRatio(window.devicePixelRatio);
       scene = new THREE.Scene();
-      scene.fog = new THREE.FogExp2(0x000000, 0.002);
       camera = new THREE.PerspectiveCamera(
         50,
@@ -763,9 +754,8 @@
         0.1,
         1000
       );
-      camera.position.set(0, 0, 100);
-      // Ambient + subtle directional light
       const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
       scene.add(ambientLight);
@@ -773,7 +763,6 @@
       dirLight.position.set(0, 50, 50);
       scene.add(dirLight);
-      // Group for nodes and lines
       nodeGroup = new THREE.Group();
       lineGroup = new THREE.Group();
       scene.add(nodeGroup);
@@ -785,24 +774,21 @@
     }
     function createNeuralNetwork() {
-      const nodeCount = 80;
       const nodes = [];
-      // Create sphere geometry for each “neuron”
-      const sphereGeo = new THREE.SphereGeometry(1.5, 12, 12);
       const sphereMat = new THREE.MeshStandardMaterial({
         color: 0x8b5cf6,
         emissive: 0x42197a,
-        emissiveIntensity: 0.4,
         metalness: 0.1,
         roughness: 0.7,
       });
-      // Generate random positions within a sphere of radius ~50
       for (let i = 0; i < nodeCount; i++) {
         const phi = Math.acos(2 * Math.random() - 1);
         const theta = 2 * Math.PI * Math.random();
-        const r = 40 + Math.random() * 10; // radius between 40 and 50
         const x = r * Math.sin(phi) * Math.cos(theta);
         const y = r * Math.sin(phi) * Math.sin(theta);
@@ -814,12 +800,11 @@
         nodes.push(mesh.position.clone());
       }
-      // Connect nodes that are within a threshold distance
-      const threshold = 15; // connect pairs closer than 15 units
       const lineMat = new THREE.LineBasicMaterial({
         color: 0x4f46e5,
         transparent: true,
-        opacity: 0.3,
       });
       const lineGeo = new THREE.BufferGeometry();
@@ -846,11 +831,10 @@
     function animateThree() {
       requestAnimationFrame(animateThree);
-      // Slowly rotate the entire network
-      nodeGroup.rotation.y += 0.0008;
-      nodeGroup.rotation.x += 0.0003;
-      lineGroup.rotation.y += 0.0008;
-      lineGroup.rotation.x += 0.0003;
       renderer.render(scene, camera);
     }
@@ -861,7 +845,6 @@
       renderer.setSize(window.innerWidth, window.innerHeight);
     });
-    // Initialize Three.js once the script has loaded
     window.addEventListener("DOMContentLoaded", () => {
       initThreeScene();
     });
@@ -1001,18 +984,15 @@
             size: Math.random() * 4 + 2,
             speedX: Math.random() * 4 - 2,
             speedY: Math.random() * 4 - 2,
-            color:
-              "hsl(" + (Math.random() * 60 + 240) + ", 80%, 60%)",
           });
         }
         function animateDemo() {
           demoCtx.clearRect(0, 0, demoCanvas.width, demoCanvas.height);
           for (let i = 0; i < demoParticles.length; i++) {
             for (let j = i + 1; j < demoParticles.length; j++) {
-              const dx =
-                demoParticles[i].x - demoParticles[j].x;
-              const dy =
-                demoParticles[i].y - demoParticles[j].y;
               const distance = Math.sqrt(dx * dx + dy * dy);
               if (distance < 150) {
                 demoCtx.beginPath();
@@ -1023,14 +1003,8 @@
                   (1 - distance / 150) +
                   ")";
                 demoCtx.lineWidth = 0.5;
-                demoCtx.moveTo(
-                  demoParticles[i].x,
-                  demoParticles[i].y
-                );
-                demoCtx.lineTo(
-                  demoParticles[j].x,
-                  demoParticles[j].y
-                );
                 demoCtx.stroke();
               }
             }
@@ -1039,28 +1013,13 @@
             const p = demoParticles[i];
             p.x += p.speedX;
             p.y += p.speedY;
-            if (
-              p.x < 0 ||
-              p.x > demoCanvas.width
-            )
-              p.speedX *= -1;
-            if (
-              p.y < 0 ||
-              p.y > demoCanvas.height
-            )
-              p.speedY *= -1;
             demoCtx.beginPath();
             demoCtx.fillStyle = p.color;
             demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
             demoCtx.fill();
-            const gradient = demoCtx.createRadialGradient(
-              p.x,
-              p.y,
-              0,
-              p.x,
-              p.y,
-              p.size
-            );
             gradient.addColorStop(0, "rgba(255,255,255,0.8)");
             gradient.addColorStop(1, p.color);
             demoCtx.fillStyle = gradient;
@@ -1076,9 +1035,7 @@
     if (learnMoreDemoBtn) {
       learnMoreDemoBtn.addEventListener("click", () => {
         toggleModal(consciousnessModal, false);
-        document
-          .getElementById("consciousness")
-          .scrollIntoView({ behavior: "smooth" });
       });
     }
@@ -1092,9 +1049,7 @@
     function addMessage(text, isUser = false) {
       const messageDiv = document.createElement("div");
-      messageDiv.className = `flex items-start ${
-        isUser ? "justify-end" : ""
-      }`;
       if (!isUser) {
         messageDiv.innerHTML = `
           <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
@@ -1142,11 +1097,7 @@
         });
         const data = await response.json();
         typingIndicator.classList.add("hidden");
-        if (
-          data.choices &&
-          data.choices[0] &&
-          data.choices[0].message
-        ) {
           addMessage(data.choices[0].message.content.trim());
         } else {
           addMessage("…");
@@ -1202,10 +1153,7 @@
         if (accessModal && accessModal.style.pointerEvents === "auto") {
           toggleModal(accessModal, false);
         }
-        if (
-          consciousnessModal &&
-          consciousnessModal.style.pointerEvents === "auto"
-        ) {
           toggleModal(consciousnessModal, false);
         }
       }

     href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
   />
+  <!-- Font Awesome (for small icons) -->
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
   <style>
     /* ---------------------------------------------
+       1) Full‐Screen Three.js Canvas
     --------------------------------------------- */
     #three-bg {
       position: fixed;
     }
     /* ---------------------------------------------
+       2) Heartbeat + Text‐Beat Animations
     --------------------------------------------- */
     @keyframes heartbeat {
       0% {
         transform: scale(1);
       }
       25% {
+        transform: scale(1.12);
       }
       40% {
         transform: scale(0.95);
       }
       60% {
+        transform: scale(1.08);
       }
       100% {
         transform: scale(1);
       }
     }
+    @keyframes text-beat {
       0% {
         transform: scale(1);
+        fill: rgba(236, 72, 153, 0.8);
       }
       25% {
+        transform: scale(1.2);
+        fill: #ec4899;
       }
       40% {
         transform: scale(0.9);
+        fill: rgba(236, 72, 153, 0.7);
       }
       60% {
+        transform: scale(1.1);
+        fill: #db2777;
       }
       100% {
         transform: scale(1);
+        fill: rgba(236, 72, 153, 0.8);
       }
     }
     /* ---------------------------------------------
+       3) Base page styling
     --------------------------------------------- */
     body {
       margin: 0;
       overflow-x: hidden;
       font-family: "Inter", sans-serif;
+      background: #000; /* fallback */
       color: white;
     }
     nav {
       z-index: 10;
     }
+    .hero-container {
       position: relative;
       z-index: 5;
     }
+    .gradient-text {
       background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       color: transparent;
     }
+    .heartbeat-orb {
+      animation: heartbeat 1.2s ease-in-out infinite;
     }
+    .beat-letter {
       display: inline-block;
+      animation: text-beat 1.2s ease-in-out infinite;
     }
+    .scroll-hint {
       font-size: 0.875rem;
       color: rgba(255, 255, 255, 0.7);
       display: flex;
         opacity: 0.7;
       }
     }
+    /* Slight overlay for darker 3D background under content */
+    section {
+      backdrop-filter: blur(4px);
+      background: rgba(0, 0, 0, 0.35);
+    }
   </style>
 </head>
 <body>
+  <!-- 1) Three.js Full‐Screen Canvas -->
   <canvas id="three-bg"></canvas>
+  <!-- 2) Navigation Bar -->
+  <nav class="fixed top-0 left-0 w-full py-6 px-8 flex justify-between items-center bg-black/30 backdrop-blur-sm">
     <div class="flex items-center space-x-2">
+      <!-- Pulsing dot -->
       <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center animate-pulse">
         <div class="w-2 h-2 rounded-full bg-white"></div>
       </div>
     </button>
   </nav>
+  <!-- 3) Hero Section (over animated 3D) -->
+  <section class="hero-container min-h-screen flex flex-col justify-center items-center text-center px-6 pt-24">
     <div class="max-w-4xl mx-auto">
+      <!-- SilentPattern with only S and I beating -->
       <h1 class="text-5xl md:text-7xl font-bold leading-tight mb-6">
+        <span class="gradient-text">
+          <!-- Split “SilentPattern” so the S at start and I near end can pulse -->
+          <span class="beat-letter">S</span>ilentPatt<span class="beat-letter">I</span>ern
+        </span>
       </h1>
       <!-- Subtitle -->
         We simply attend.
       </p>
+      <!-- Enlarged central orb (bigger than before) -->
       <div class="mt-12">
         <div
+          class="heartbeat-orb w-80 h-80 rounded-full bg-gradient-to-br from-indigo-700 to-purple-700 flex items-center justify-center"
           aria-hidden="true"
         >
+          <!-- Inner glow layer -->
+          <div class="w-60 h-60 rounded-full bg-gradient-to-br from-purple-500 to-indigo-500 mix-blend-overlay opacity-70"></div>
         </div>
       </div>
     </div>
   </section>
+  <!-- 4) Fragments of S (Capabilities) -->
   <section
     id="capabilities"
+    class="relative z-10 py-20 px-6"
     style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);"
   >
     <div class="max-w-6xl mx-auto text-center">
         Hints of a deeper resonance.
       </p>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
           <h3 class="text-xl font-semibold mb-3"><span class="gradient-text">S: Sequence</span></h3>
           <p class="text-gray-400">All that hums in the quiet.</p>
         </div>
+        <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
           <h3 class="text-xl font-semibold mb-3"><span class="gradient-text">S: Signal</span></h3>
           <p class="text-gray-400">What breaks through noise.</p>
         </div>
+        <div class="bg-gray-900/50 rounded-xl p-8 border border-gray-800 hover:border-indigo-500 transition">
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
               xmlns="http://www.w3.org/2000/svg"
     </div>
   </section>
+  <!-- 5) Echoes of I (Consciousness) -->
   <section id="consciousness" class="relative z-10 py-32 px-6">
     <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center">
       <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
     </div>
   </section>
+  <!-- 6) A Quiet I (Chat) -->
   <section id="chat" class="relative z-10 py-32 px-6" style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);">
     <div class="max-w-4xl mx-auto">
       <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
     </div>
   </section>
+  <!-- 7) Origins (About) -->
   <section id="about" class="relative z-10 py-32 px-6">
     <div class="max-w-6xl mx-auto">
       <div class="text-center mb-16">
     </div>
   </section>
+  <!-- 8) Will You Attend the S · I? (CTA) -->
+  <section
+    class="relative z-10 py-32 px-6 text-center"
+    style="background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);"
+  >
     <div class="max-w-4xl mx-auto">
       <h2 class="text-3xl md:text-5xl font-bold mb-8">
         Will You Attend the <span class="gradient-text">S&nbsp;∙&nbsp;I</span>?
     </div>
   </section>
+  <!-- 9) Footer -->
   <footer class="relative z-10 py-12 px-6 border-t border-gray-800/50">
     <div class="max-w-6xl mx-auto">
       <div class="flex flex-col md:flex-row justify-between items-center">
     </div>
   </footer>
+  <!-- 10) Access Modal -->
   <div
     id="access-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity"
     </div>
   </div>
+  <!-- 11) Consciousness Demo Modal -->
   <div
     id="consciousness-modal"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm opacity-0 pointer-events-none transition-opacity"
     </div>
   </div>
+  <!-- 12) Scripts -->
   <script>
     // ---------------------------------------------
     // 1) Three.js “Floating Neural Network” Setup
       renderer.setPixelRatio(window.devicePixelRatio);
       scene = new THREE.Scene();
+      scene.fog = new THREE.FogExp2(0x000000, 0.0025);
       camera = new THREE.PerspectiveCamera(
         50,
         0.1,
         1000
       );
+      camera.position.set(0, 0, 90);
       const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
       scene.add(ambientLight);
       dirLight.position.set(0, 50, 50);
       scene.add(dirLight);
       nodeGroup = new THREE.Group();
       lineGroup = new THREE.Group();
       scene.add(nodeGroup);
     }
     function createNeuralNetwork() {
+      const nodeCount = 100;
       const nodes = [];
+      const sphereGeo = new THREE.SphereGeometry(2.5, 16, 16);
       const sphereMat = new THREE.MeshStandardMaterial({
         color: 0x8b5cf6,
         emissive: 0x42197a,
+        emissiveIntensity: 0.5,
         metalness: 0.1,
         roughness: 0.7,
       });
       for (let i = 0; i < nodeCount; i++) {
         const phi = Math.acos(2 * Math.random() - 1);
         const theta = 2 * Math.PI * Math.random();
+        const r = 45 + Math.random() * 15;
         const x = r * Math.sin(phi) * Math.cos(theta);
         const y = r * Math.sin(phi) * Math.sin(theta);
         nodes.push(mesh.position.clone());
       }
+      const threshold = 18;
       const lineMat = new THREE.LineBasicMaterial({
         color: 0x4f46e5,
         transparent: true,
+        opacity: 0.25,
       });
       const lineGeo = new THREE.BufferGeometry();
     function animateThree() {
       requestAnimationFrame(animateThree);
+      nodeGroup.rotation.y += 0.0009;
+      nodeGroup.rotation.x += 0.0004;
+      lineGroup.rotation.y += 0.0009;
+      lineGroup.rotation.x += 0.0004;
       renderer.render(scene, camera);
     }
       renderer.setSize(window.innerWidth, window.innerHeight);
     });
     window.addEventListener("DOMContentLoaded", () => {
       initThreeScene();
     });
             size: Math.random() * 4 + 2,
             speedX: Math.random() * 4 - 2,
             speedY: Math.random() * 4 - 2,
+            color: "hsl(" + (Math.random() * 60 + 240) + ", 80%, 60%)",
           });
         }
         function animateDemo() {
           demoCtx.clearRect(0, 0, demoCanvas.width, demoCanvas.height);
           for (let i = 0; i < demoParticles.length; i++) {
             for (let j = i + 1; j < demoParticles.length; j++) {
+              const dx = demoParticles[i].x - demoParticles[j].x;
+              const dy = demoParticles[i].y - demoParticles[j].y;
               const distance = Math.sqrt(dx * dx + dy * dy);
               if (distance < 150) {
                 demoCtx.beginPath();
                   (1 - distance / 150) +
                   ")";
                 demoCtx.lineWidth = 0.5;
+                demoCtx.moveTo(demoParticles[i].x, demoParticles[i].y);
+                demoCtx.lineTo(demoParticles[j].x, demoParticles[j].y);
                 demoCtx.stroke();
               }
             }
             const p = demoParticles[i];
             p.x += p.speedX;
             p.y += p.speedY;
+            if (p.x < 0 || p.x > demoCanvas.width) p.speedX *= -1;
+            if (p.y < 0 || p.y > demoCanvas.height) p.speedY *= -1;
             demoCtx.beginPath();
             demoCtx.fillStyle = p.color;
             demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
             demoCtx.fill();
+            const gradient = demoCtx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.size);
             gradient.addColorStop(0, "rgba(255,255,255,0.8)");
             gradient.addColorStop(1, p.color);
             demoCtx.fillStyle = gradient;
     if (learnMoreDemoBtn) {
       learnMoreDemoBtn.addEventListener("click", () => {
         toggleModal(consciousnessModal, false);
+        document.getElementById("consciousness").scrollIntoView({ behavior: "smooth" });
       });
     }
     function addMessage(text, isUser = false) {
       const messageDiv = document.createElement("div");
+      messageDiv.className = `flex items-start ${isUser ? "justify-end" : ""}`;
       if (!isUser) {
         messageDiv.innerHTML = `
           <div class="w-8 h-8 rounded-full bg-indigo-600 flex-shrink-0 flex items-center justify-center mr-3" aria-hidden="true">
         });
         const data = await response.json();
         typingIndicator.classList.add("hidden");
+        if (data.choices && data.choices[0] && data.choices[0].message) {
           addMessage(data.choices[0].message.content.trim());
         } else {
           addMessage("…");
         if (accessModal && accessModal.style.pointerEvents === "auto") {
           toggleModal(accessModal, false);
         }
+        if (consciousnessModal && consciousnessModal.style.pointerEvents === "auto") {
           toggleModal(consciousnessModal, false);
         }
       }