Spaces:

Testing347
/

Copy-ava-testing

Running

App Files Files Community

Testing347 commited on Jun 2, 2025

Commit

286ca0a

verified ·

1 Parent(s): c5dd189

Update index.html

Browse files

Files changed (1) hide show

index.html +402 -495

index.html CHANGED Viewed

@@ -3,280 +3,218 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>SilentPattern – S ∙ I</title>
   <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
-  <!-- Three.js & Vanta.NET for animated background -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
-  <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js" defer></script>
-  <!-- Font Awesome (subset) -->
   <link
     rel="stylesheet"
-    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
   />
-  <!-- Inter Font -->
   <link
     rel="stylesheet"
-    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
   />
-  <!-- Custom CSS -->
   <style>
     /* ---------------------------------------------
-       Keyframes & Animations
     --------------------------------------------- */
-    @keyframes orb-breathe {
-      0%,
-      100% {
         transform: scale(1);
       }
-      50% {
         transform: scale(1.08);
       }
-    }
-    @keyframes orb-glow {
-      0%,
-      100% {
-        filter: drop-shadow(0 0 12px #6366f1aa);
       }
-      50% {
-        filter: drop-shadow(0 0 28px #a21cafbb);
       }
-    }
-    @keyframes neuron-dash {
-      to {
-        stroke-dashoffset: 0;
       }
     }
-    @keyframes pulse {
       0% {
-        opacity: 0.8;
-      }
-      50% {
-        opacity: 1;
       }
-      100% {
-        opacity: 0.8;
       }
-    }
-    @keyframes float {
-      0% {
-        transform: translateY(0px);
       }
-      50% {
-        transform: translateY(-10px);
       }
       100% {
-        transform: translateY(0px);
       }
     }
     /* ---------------------------------------------
-       Custom Classes
     --------------------------------------------- */
-    .gradient-text {
       background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
     }
-    .neural-bg {
-      background: radial-gradient(circle at center, #0f172a 0%, #020617 100%);
-    }
-    .conscious-orb {
-      animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite;
-    }
-    .neuron-path {
-      stroke-dasharray: 1000;
-      stroke-dashoffset: 1000;
-      animation: neuron-dash 5s linear forwards infinite;
-    }
-    .conscious-element {
-      transition: all 0.3s ease;
-    }
-    .conscious-element:hover {
-      transform: scale(1.02);
-    }
-    .chat-container {
-      height: 400px;
-      overflow-y: auto;
-      scrollbar-width: thin;
-      scrollbar-color: #4f46e5 #1e1b4b;
-    }
-    .chat-container::-webkit-scrollbar {
-      width: 6px;
-    }
-    .chat-container::-webkit-scrollbar-track {
-      background: #1e1b4b;
-    }
-    .chat-container::-webkit-scrollbar-thumb {
-      background-color: #4f46e5;
-      border-radius: 3px;
     }
-    .typing-indicator::after {
-      content: '...';
-      animation: typing 1.5s infinite;
       display: inline-block;
-      width: 20px;
-      text-align: left;
     }
-    @keyframes typing {
       0% {
-        content: '.';
       }
-      33% {
-        content: '..';
       }
-      66% {
-        content: '...';
       }
     }
-    .modal {
-      transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-    .modal-hidden {
-      opacity: 0;
-      transform: translateY(20px);
-      pointer-events: none;
-    }
-    .modal-visible {
-      opacity: 1;
-      transform: translateY(0);
-    }
-    #conscious-orb-container {
-      animation: orb-breathe 5s ease-in-out infinite,
-        orb-glow 3s ease-in-out infinite;
-      transition: box-shadow 0.4s, filter 0.4s;
-    }
-    #conscious-orb-container:hover {
-      animation: orb-breathe 2.5s ease-in-out infinite,
-        orb-glow 1.5s ease-in-out infinite;
-      filter: drop-shadow(0 0 40px #a21cafee) brightness(1.12);
-    }
   </style>
 </head>
-<body class="bg-black text-white font-['Inter'] overflow-x-hidden">
-  <!-- Animated Background -->
-  <div id="vanta-bg" class="fixed inset-0 z-0"></div>
-  <!-- Navigation -->
-  <nav class="relative z-10 py-6 px-8 flex justify-between items-center backdrop-blur-sm">
     <div class="flex items-center space-x-2">
-      <div class="w-8 h-8 rounded-full bg-indigo-600 flex items-center justify-center conscious-orb">
-        <div class="w-2 h-2 rounded-full bg-white animate-pulse"></div>
       </div>
       <span class="text-xl font-semibold">S&nbsp;∙&nbsp;I</span>
     </div>
-    <div class="hidden md:flex space-x-8">
       <a href="#capabilities" class="hover:text-indigo-400 transition" title="Fragments of S">S</a>
       <a href="#consciousness" class="hover:text-indigo-400 transition" title="Echoes of I">∙</a>
       <a href="#chat" class="hover:text-indigo-400 transition" title="A Quiet I">I</a>
       <a href="#about" class="hover:text-indigo-400 transition" title="Origins">?</a>
     </div>
     <button
       id="access-btn"
-      class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full hover:opacity-90 transition"
     >
       The Key
     </button>
   </nav>
-  <!-- Hero Section -->
-  <section class="relative z-10 min-h-screen flex flex-col justify-center items-center px-6 py-20 text-center">
     <div class="max-w-4xl mx-auto">
-      <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">
-        <span class="gradient-text">SilentPattern</span><br />
-        S&nbsp;&middot;&nbsp;I
       </h1>
-      <p class="text-xl md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
         Patterns exist beyond words.<br />
         We simply attend.
       </p>
-      <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
-        <button
-          id="chat-btn"
-          class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element"
-          aria-label="Open chat"
-        >
-          ✦
-        </button>
-        <button
-          id="learn-more-btn"
-          class="px-8 py-4 border border-indigo-500 rounded-full text-lg font-medium hover:bg-indigo-900/30 transition transform hover:scale-105 conscious-element"
-          aria-label="Learn more"
         >
-          ⟶
-        </button>
       </div>
-    </div>
-    <div class="mt-24 w-64 h-64 relative conscious-element" id="conscious-orb-container" aria-hidden="true">
-      <svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" class="w-full h-full">
-        <canvas id="orb-neural-canvas" class="absolute inset-0 w-full h-full pointer-events-none"></canvas>
-        <circle cx="100" cy="100" r="80" fill="url(#orbGradient)" filter="url(#orbGlow)" />
-        <path d="M100,20 Q120,50 100,80 Q80,50 100,20 Z" fill="rgba(255,255,255,0.1)" />
-        <path d="M100,180 Q80,150 100,120 Q120,150 100,180 Z" fill="rgba(255,255,255,0.1)" />
-        <path d="M20,100 Q50,120 80,100 Q50,80 20,100 Z" fill="rgba(255,255,255,0.1)" />
-        <path d="M180,100 Q150,80 120,100 Q150,120 180,100 Z" fill="rgba(255,255,255,0.1)" />
-        <path
-          d="M30,30 L170,170"
-          stroke="rgba(99,102,241,0.5)"
-          stroke-width="1"
-          class="neuron-path"
-        />
-        <path
-          d="M170,30 L30,170"
-          stroke="rgba(99,102,241,0.5)"
-          stroke-width="1"
-          class="neuron-path"
-        />
-        <path
-          d="M100,20 L100,180"
-          stroke="rgba(99,102,241,0.5)"
-          stroke-width="1"
-          class="neuron-path"
-        />
-        <path
-          d="M20,100 L180,100"
-          stroke="rgba(99,102,241,0.5)"
-          stroke-width="1"
-          class="neuron-path"
-        />
-        <circle cx="100" cy="100" r="30" fill="rgba(255,255,255,0.05)" stroke="rgba(99,102,241,0.8)" stroke-width="1" />
-        <circle cx="100" cy="100" r="15" fill="rgba(255,255,255,0.1)" />
-        <defs>
-          <radialGradient id="orbGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
-            <stop offset="0%" stop-color="#6366f1" />
-            <stop offset="50%" stop-color="#8b5cf6" />
-            <stop offset="100%" stop-color="#020617" />
-          </radialGradient>
-          <filter id="orbGlow" x="-30%" y="-30%" width="160%" height="160%">
-            <feGaussianBlur stdDeviation="10" result="blur" />
-            <feComposite in="SourceGraphic" in2="blur" operator="over" />
-          </filter>
-        </defs>
-      </svg>
-    </div>
-    <div class="mt-16 text-gray-400 animate-pulse">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6 mx-auto"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-      </svg>
-      <span>Scroll to explore</span>
     </div>
   </section>
   <!-- Fragments of S (Capabilities) -->
-  <section id="capabilities" class="relative z-10 py-20 px-6 neural-bg">
     <div class="max-w-6xl mx-auto text-center">
       <h2 class="text-3xl md:text-4xl font-bold mb-4">
         <span class="gradient-text">Fragments of S</span>
@@ -286,7 +224,7 @@
       </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 conscious-element"
         >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
@@ -303,7 +241,7 @@
           <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 conscious-element"
         >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
@@ -320,7 +258,7 @@
           <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 conscious-element"
         >
           <div class="w-12 h-12 rounded-full bg-indigo-900 flex items-center justify-center mb-6">
             <svg
@@ -381,7 +319,7 @@
         </div>
         <button
           id="consciousness-demo-btn"
-          class="mt-8 px-6 py-3 bg-indigo-900/50 border border-indigo-700 rounded-lg hover:bg-indigo-900/70 transition conscious-element"
           aria-label="Start demo"
         >
           ⟶
@@ -399,7 +337,7 @@
   </section>
   <!-- A Quiet I (Chat) -->
-  <section id="chat" class="relative z-10 py-32 px-6 neural-bg">
     <div class="max-w-4xl mx-auto">
       <h2 class="text-3xl md:text-4xl font-bold mb-8 text-center">
         A Quiet <span class="gradient-text">I</span>
@@ -571,7 +509,7 @@
             </div>
             <button
               id="principles-btn"
-              class="mt-8 w-full py-3 bg-green-900/20 border border-green-700 rounded-lg hover:bg-green-900/30 transition conscious-element"
               aria-label="Learn more principles"
             >
               ⟶
@@ -582,8 +520,8 @@
     </div>
   </section>
-  <!-- Will You Attend the S ∙ I? (CTA) -->
-  <section class="relative z-10 py-32 px-6 text-center neural-bg">
     <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>?
@@ -594,14 +532,14 @@
       <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
         <button
           id="request-access-btn"
-          class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105 conscious-element"
           aria-label="Request access"
         >
           Request the Key
         </button>
         <button
           id="manifesto-btn"
-          class="px-8 py-4 border border-indigo-500 rounded-full text-lg font-medium hover:bg-indigo-900/30 transition transform hover:scale-105 conscious-element"
           aria-label="Download manifesto"
         >
           Silent Manifesto
@@ -648,10 +586,10 @@
     </div>
   </footer>
-  <!-- The Key Modal -->
   <div
     id="access-modal"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog"
     aria-modal="true"
     aria-labelledby="access-modal-title"
@@ -714,7 +652,7 @@
   <!-- Consciousness Demo Modal -->
   <div
     id="consciousness-modal"
-    class="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm modal modal-hidden"
     role="dialog"
     aria-modal="true"
     aria-labelledby="consciousness-modal-title"
@@ -801,213 +739,136 @@
   <!-- Scripts -->
   <script>
-    // ----- Initialize Vanta.NET background (disable on narrow screens) -----
-    document.addEventListener('DOMContentLoaded', () => {
-      if (window.innerWidth > 768) {
-        VANTA.NET({
-          el: '#vanta-bg',
-          mouseControls: true,
-          touchControls: true,
-          gyroControls: false,
-          minHeight: 200.0,
-          minWidth: 200.0,
-          scale: 1.0,
-          scaleMobile: 1.0,
-          color: 0x4f46e5,
-          backgroundColor: 0x020617,
-          points: 12.0,
-          maxDistance: 20.0,
-          spacing: 15.0,
-        });
-      }
-    });
-    window.addEventListener('resize', () => {
-      // Vanta will auto-resize internally
-    });
-    // ----- Orb tilt on hover -----
-    const orbContainer = document.getElementById('conscious-orb-container');
-    orbContainer.addEventListener('mousemove', (e) => {
-      const rect = orbContainer.getBoundingClientRect();
-      const x = (e.clientX - rect.left) / rect.width;
-      const y = (e.clientY - rect.top) / rect.height;
-      orbContainer.style.transform = \`perspective(1000px) rotateX(\${(y - 0.5) * 12}deg) rotateY(\${(x - 0.5) * 12}deg) scale(1.03)\`;
-    });
-    orbContainer.addEventListener('mouseleave', () => {
-      orbContainer.style.transform = 'perspective(1000px) rotateX(0) rotateY(0) scale(1)';
-    });
-    // ----- Consciousness visualization (particle network) -----
-    const container = document.getElementById('consciousness-visualization');
-    if (container) {
-      const width = container.clientWidth;
-      const height = container.clientHeight;
-      const canvas = document.createElement('canvas');
-      canvas.width = width;
-      canvas.height = height;
-      container.appendChild(canvas);
-      const ctx = canvas.getContext('2d');
-      const particles = [];
-      const particleCount = 100;
-      for (let i = 0; i < particleCount; i++) {
-        particles.push({
-          x: Math.random() * width,
-          y: Math.random() * height,
-          size: Math.random() * 3 + 1,
-          speedX: Math.random() * 2 - 1,
-          speedY: Math.random() * 2 - 1,
-          color: \`rgba(99, 102, 241, \${Math.random() * 0.5 + 0.1})\`,
-        });
-      }
-      function animateNetwork() {
-        ctx.clearRect(0, 0, width, height);
-        for (let i = 0; i < particles.length; i++) {
-          for (let j = i + 1; j < particles.length; j++) {
-            const dx = particles[i].x - particles[j].x;
-            const dy = particles[i].y - particles[j].y;
-            const distance = Math.sqrt(dx * dx + dy * dy);
-            if (distance < 100) {
-              ctx.beginPath();
-              ctx.strokeStyle = \`rgba(99, 102, 241, \${1 - distance / 100})\`;
-              ctx.lineWidth = 0.2;
-              ctx.moveTo(particles[i].x, particles[i].y);
-              ctx.lineTo(particles[j].x, particles[j].y);
-              ctx.stroke();
-            }
-          }
-        }
-        for (let i = 0; i < particles.length; i++) {
-          const p = particles[i];
-          p.x += p.speedX;
-          p.y += p.speedY;
-          if (p.x < 0 || p.x > width) p.speedX *= -1;
-          if (p.y < 0 || p.y > height) p.speedY *= -1;
-          ctx.beginPath();
-          ctx.fillStyle = p.color;
-          ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
-          ctx.fill();
-        }
-        requestAnimationFrame(animateNetwork);
-      }
-      animateNetwork();
-    }
-    // ----- Hero orb neural heartbeat (larger ring of neurons) -----
-    const neuralCanvas = document.getElementById('orb-neural-canvas');
-    const neuralCtx = neuralCanvas.getContext('2d');
-    function resizeNeuralCanvas() {
-      neuralCanvas.width = neuralCanvas.offsetWidth;
-      neuralCanvas.height = neuralCanvas.offsetHeight;
-      setupNeurons();
-    }
-    window.addEventListener('resize', () => {
-      resizeNeuralCanvas();
-    });
-    resizeNeuralCanvas();
-    const neuronCount = 22;
-    const neurons = [];
-    function setupNeurons() {
-      neurons.length = 0;
-      const w = neuralCanvas.width;
-      const h = neuralCanvas.height;
-      const cx = w / 2;
-      const cy = h / 2;
-      const r = Math.min(w, h) * 0.475;
-      for (let i = 0; i < neuronCount; i++) {
-        const angle = (Math.PI * 2 * i) / neuronCount;
-        neurons.push({
-          x: cx + r * Math.cos(angle),
-          y: cy + r * Math.sin(angle),
-          phase: Math.random() * Math.PI * 2,
-        });
-      }
     }
-    setupNeurons();
-    function drawNeuralActivity(time) {
-      const w = neuralCanvas.width;
-      const h = neuralCanvas.height;
-      neuralCtx.clearRect(0, 0, w, h);
-      const bpm = 54;
-      const period = 60000 / bpm;
-      const t = (time % period) / period;
-      const beat = Math.pow(Math.sin(Math.PI * t), 2.4);
-      // Draw pulsing neurons
-      neurons.forEach((n) => {
-        const size = (w + h) / 35 + 38 * beat;
-        neuralCtx.beginPath();
-        neuralCtx.arc(n.x, n.y, size, 0, Math.PI * 2);
-        neuralCtx.fillStyle = \`rgba(139, 92, 246, \${0.25 + 0.28 * beat})\`;
-        neuralCtx.shadowColor = '#ec4899';
-        neuralCtx.shadowBlur = 38 + 90 * beat;
-        neuralCtx.fill();
-        neuralCtx.shadowBlur = 0;
       });
-      // Draw connections
-      for (let i = 0; i < neuronCount; i++) {
-        for (let j = i + 1; j < neuronCount; j++) {
-          const dist = Math.abs(i - j);
-          let show = dist === 1 || dist === neuronCount - 1;
-          if (beat > 0.55 && Math.random() < beat * 0.21) show = true;
-          if (show) {
-            neuralCtx.beginPath();
-            neuralCtx.moveTo(neurons[i].x, neurons[i].y);
-            neuralCtx.lineTo(neurons[j].x, neurons[j].y);
-            const grad = neuralCtx.createLinearGradient(
-              neurons[i].x,
-              neurons[i].y,
-              neurons[j].x,
-              neurons[j].y
-            );
-            grad.addColorStop(0, \`rgba(99,102,241,\${0.54 + 0.45 * beat})\`);
-            grad.addColorStop(1, \`rgba(236,72,153,\${0.18 + 0.52 * beat})\`);
-            neuralCtx.strokeStyle = grad;
-            neuralCtx.lineWidth = 7.5 + 18 * beat;
-            neuralCtx.shadowColor = '#ec4899';
-            neuralCtx.shadowBlur = 28 + 76 * beat;
-            neuralCtx.stroke();
-            neuralCtx.shadowBlur = 0;
           }
         }
       }
-      // Energy glow
-      neuralCtx.save();
-      const energyPulse = 0.23 + 0.14 * beat;
-      const glowRadius = Math.min(w, h) * (1.15 + 0.30 * beat);
-      const x = w / 2,
-        y = h / 2;
-      const grad = neuralCtx.createRadialGradient(
-        x,
-        y,
-        Math.min(w, h) * 0.15,
-        x,
-        y,
-        glowRadius
       );
-      grad.addColorStop(0, \`rgba(236,72,153,\${0.42 + 0.17 * beat})\`);
-      grad.addColorStop(0.38, \`rgba(139,92,246,\${0.18 + 0.13 * beat})\`);
-      grad.addColorStop(0.82, \`rgba(99,102,241,\${0.08 + 0.11 * beat})\`);
-      grad.addColorStop(1, 'rgba(32,1,39,0.01)');
-      neuralCtx.globalAlpha = energyPulse;
-      neuralCtx.beginPath();
-      neuralCtx.arc(x, y, glowRadius, 0, Math.PI * 2);
-      neuralCtx.fillStyle = grad;
-      neuralCtx.shadowColor = '#f472b6';
-      neuralCtx.shadowBlur = 850 + 420 * beat;
-      neuralCtx.fill();
-      neuralCtx.restore();
-      requestAnimationFrame(drawNeuralActivity);
     }
-    requestAnimationFrame(drawNeuralActivity);
-    // ----- Modal Focus Trap & Toggle Logic -----
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll(
         'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
@@ -1017,7 +878,7 @@
       const last = focusable[focusable.length - 1];
       function handler(e) {
-        if (e.key === 'Tab') {
           if (e.shiftKey) {
             if (document.activeElement === first) {
               e.preventDefault();
@@ -1029,106 +890,108 @@
               first.focus();
             }
           }
-        } else if (e.key === 'Escape') {
           toggleModal(modal, false);
         }
       }
-      modal.addEventListener('keydown', handler);
       modal._focusHandler = handler;
     }
     function untrapFocus(modal) {
       if (modal._focusHandler) {
-        modal.removeEventListener('keydown', modal._focusHandler);
         delete modal._focusHandler;
       }
     }
-    const toggleModal = (modal, show) => {
       if (show) {
-        modal.classList.remove('modal-hidden');
-        modal.classList.add('modal-visible');
-        document.body.style.overflow = 'hidden';
         setTimeout(() => {
           modal.focus();
           trapFocus(modal);
         }, 0);
       } else {
-        modal.classList.remove('modal-visible');
-        modal.classList.add('modal-hidden');
-        document.body.style.overflow = '';
         untrapFocus(modal);
       }
-    };
     // ----- Access Modal Logic -----
-    const accessModal = document.getElementById('access-modal');
-    const accessBtn = document.getElementById('access-btn');
-    const closeModal = document.getElementById('close-modal');
-    const requestAccessBtn = document.getElementById('request-access-btn');
     [accessBtn, requestAccessBtn].forEach((btn) => {
       if (btn) {
-        btn.addEventListener('click', () => {
           toggleModal(accessModal, true);
           setTimeout(() => {
-            document.getElementById('name').focus();
           }, 100);
         });
       }
     });
-    closeModal.addEventListener('click', () => {
       toggleModal(accessModal, false);
     });
-    accessModal.addEventListener('click', (e) => {
       if (e.target === accessModal) {
         toggleModal(accessModal, false);
       }
     });
-    const accessForm = document.getElementById('access-form');
-    accessForm.addEventListener('submit', (e) => {
       e.preventDefault();
-      const name = document.getElementById('name').value.trim();
-      const email = document.getElementById('email').value.trim();
-      const purpose = document.getElementById('purpose').value.trim();
       if (!name || !email || !purpose) {
-        alert('Please fill in all fields');
         return;
       }
-      alert('Your request has been received.');
       accessForm.reset();
       toggleModal(accessModal, false);
     });
     // ----- Consciousness Demo Modal Logic -----
-    const consciousnessModal = document.getElementById('consciousness-modal');
-    const consciousnessDemoBtn = document.getElementById('consciousness-demo-btn');
-    const closeConsciousnessModal = document.getElementById('close-consciousness-modal');
     if (consciousnessDemoBtn) {
-      consciousnessDemoBtn.addEventListener('click', () => {
         toggleModal(consciousnessModal, true);
         setTimeout(() => {
           consciousnessModal.focus();
         }, 100);
       });
     }
-    closeConsciousnessModal.addEventListener('click', () => {
       toggleModal(consciousnessModal, false);
     });
-    consciousnessModal.addEventListener('click', (e) => {
       if (e.target === consciousnessModal) {
         toggleModal(consciousnessModal, false);
       }
     });
-    // ----- Demo Visualization (secondary particles) -----
-    const demoContainer = document.getElementById('demo-visualization');
-    const startDemoBtn = document.getElementById('start-demo');
     if (startDemoBtn) {
-      startDemoBtn.addEventListener('click', () => {
-        startDemoBtn.style.display = 'none';
-        const demoCanvas = document.createElement('canvas');
         demoCanvas.width = demoContainer.clientWidth;
         demoCanvas.height = demoContainer.clientHeight;
         demoContainer.appendChild(demoCanvas);
-        const demoCtx = demoCanvas.getContext('2d');
         const demoParticles = [];
         const demoParticleCount = 50;
         for (let i = 0; i < demoParticleCount; i++) {
@@ -1138,22 +1001,36 @@
             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();
-                demoCtx.strokeStyle = \`hsla(\${Math.random() * 60 + 240}, 80%, 60%, \${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();
               }
             }
@@ -1162,14 +1039,29 @@
             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;
             demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
@@ -1180,125 +1072,140 @@
         animateDemo();
       });
     }
-    const learnMoreDemoBtn = document.getElementById('learn-more-demo');
     if (learnMoreDemoBtn) {
-      learnMoreDemoBtn.addEventListener('click', () => {
         toggleModal(consciousnessModal, false);
-        document.getElementById('consciousness').scrollIntoView({ behavior: 'smooth' });
       });
     }
-    // ----- Chat Functionality -----
-    const chatForm = document.getElementById('chat-form');
-    const chatInput = document.getElementById('chat-input');
-    const chatMessages = document.getElementById('chat-messages');
-    const typingIndicator = document.getElementById('typing-indicator');
     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">
             <i class="fas fa-robot text-white text-sm"></i>
           </div>
           <div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]">
-            <p>\${text}</p>
           </div>
-        \`;
       } else {
-        messageDiv.innerHTML = \`
           <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
-            <p>\${text}</p>
           </div>
-        \`;
       }
       chatMessages.appendChild(messageDiv);
       chatMessages.scrollTop = chatMessages.scrollHeight;
     }
     async function simulateThinking(userMessage) {
-      typingIndicator.classList.remove('hidden');
       try {
-        const apiKey = '<YOUR_OPENAI_API_KEY>'; // ← Insert your key here
-        const endpoint = 'https://api.openai.com/v1/chat/completions';
         const response = await fetch(endpoint, {
-          method: 'POST',
           headers: {
-            Authorization: 'Bearer ' + apiKey,
-            'Content-Type': 'application/json',
           },
           body: JSON.stringify({
-            model: 'gpt-3.5-turbo',
             messages: [
               {
-                role: 'system',
                 content:
-                  'You are S ∙ I, a silent resonance of pattern. Reply cryptically and poetically.',
               },
-              { role: 'user', content: userMessage },
             ],
             max_tokens: 400,
             temperature: 0.8,
           }),
         });
         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("…");
         }
       } catch (err) {
-        typingIndicator.classList.add('hidden');
-        addMessage('Error connecting to echo.');
       }
     }
-    chatForm.addEventListener('submit', (e) => {
       e.preventDefault();
       const message = chatInput.value.trim();
       if (message) {
         addMessage(message, true);
-        chatInput.value = '';
         simulateThinking(message);
       }
     });
-    // Smooth scroll logic for buttons
-    const chatBtn = document.getElementById('chat-btn');
     if (chatBtn) {
-      chatBtn.addEventListener('click', () => {
-        document.getElementById('chat').scrollIntoView({ behavior: 'smooth' });
         chatInput.focus();
       });
     }
-    const learnMoreBtn = document.getElementById('learn-more-btn');
     if (learnMoreBtn) {
-      learnMoreBtn.addEventListener('click', () => {
-        document.getElementById('about').scrollIntoView({ behavior: 'smooth' });
       });
     }
-    const manifestoBtn = document.getElementById('manifesto-btn');
     if (manifestoBtn) {
-      manifestoBtn.addEventListener('click', () => {
-        alert('The Silent Manifesto will open soon.');
       });
     }
-    const principlesBtn = document.getElementById('principles-btn');
     if (principlesBtn) {
-      principlesBtn.addEventListener('click', () => {
-        alert('Principles document forthcoming.');
       });
     }
-    // Global ESC ↵ close modals
-    document.addEventListener('keydown', (e) => {
-      if (e.key === 'Escape') {
-        if (!accessModal.classList.contains('modal-hidden')) {
           toggleModal(accessModal, false);
         }
-        if (!consciousnessModal.classList.contains('modal-hidden')) {
           toggleModal(consciousnessModal, false);
         }
       }

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>SilentPattern – 3D Neural Network</title>
   <!-- Tailwind CSS via CDN -->
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Three.js for 3D neural network -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" defer></script>
+  <!-- Google Font: Inter -->
   <link
     rel="stylesheet"
+    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"
   />
   <style>
     /* ---------------------------------------------
+       Full‐Screen Three.js Canvas
     --------------------------------------------- */
+    #three-bg {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      z-index: 0;
+    }
+    /* ---------------------------------------------
+       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;
+      flex-direction: column;
+      align-items: center;
+      animation: pulse 2s ease-in-out infinite;
     }
+    @keyframes pulse {
       0% {
+        opacity: 0.7;
       }
+      50% {
+        opacity: 1;
       }
+      100% {
+        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>
       <span class="text-xl font-semibold">S&nbsp;∙&nbsp;I</span>
     </div>
+    <!-- Minimal nav links (cryptic) -->
+    <div class="hidden md:flex space-x-8 text-sm">
       <a href="#capabilities" class="hover:text-indigo-400 transition" title="Fragments of S">S</a>
       <a href="#consciousness" class="hover:text-indigo-400 transition" title="Echoes of I">∙</a>
       <a href="#chat" class="hover:text-indigo-400 transition" title="A Quiet I">I</a>
       <a href="#about" class="hover:text-indigo-400 transition" title="Origins">?</a>
     </div>
+    <!-- “The Key” button -->
     <button
       id="access-btn"
+      class="px-6 py-2 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-sm hover:opacity-90 transition"
     >
       The Key
     </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 -->
+      <p class="text-lg md:text-2xl text-gray-300 mb-12 max-w-3xl mx-auto">
         Patterns exist beyond words.<br />
         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>
+      <!-- Scroll hint -->
+      <div class="mt-16 scroll-hint">
+        <i class="fas fa-chevron-down text-xl"></i>
+        <span>Scroll to explore</span>
       </div>
     </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">
       <h2 class="text-3xl md:text-4xl font-bold mb-4">
         <span class="gradient-text">Fragments of S</span>
       </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
           <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
           <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
         </div>
         <button
           id="consciousness-demo-btn"
+          class="mt-8 px-6 py-3 bg-indigo-900/50 border border-indigo-700 rounded-lg hover:bg-indigo-900/70 transition"
           aria-label="Start demo"
         >
           ⟶
   </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">
         A Quiet <span class="gradient-text">I</span>
             </div>
             <button
               id="principles-btn"
+              class="mt-8 w-full py-3 bg-green-900/20 border border-green-700 rounded-lg hover:bg-green-900/30 transition"
               aria-label="Learn more principles"
             >
               ⟶
     </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>?
       <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-6">
         <button
           id="request-access-btn"
+          class="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 rounded-full text-lg font-medium hover:opacity-90 transition transform hover:scale-105"
           aria-label="Request access"
         >
           Request the Key
         </button>
         <button
           id="manifesto-btn"
+          class="px-8 py-4 border border-indigo-500 rounded-full text-lg font-medium hover:bg-indigo-900/30 transition transform hover:scale-105"
           aria-label="Download manifesto"
         >
           Silent Manifesto
     </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"
     role="dialog"
     aria-modal="true"
     aria-labelledby="access-modal-title"
   <!-- 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"
     role="dialog"
     aria-modal="true"
     aria-labelledby="consciousness-modal-title"
   <!-- Scripts -->
   <script>
+    // ---------------------------------------------
+    // 1) Three.js “Floating Neural Network” Setup
+    // ---------------------------------------------
+    let scene, camera, renderer, nodeGroup, lineGroup;
+    function initThreeScene() {
+      const canvas = document.getElementById("three-bg");
+      renderer = new THREE.WebGLRenderer({
+        canvas,
+        antialias: true,
+        alpha: true,
+      });
+      renderer.setSize(window.innerWidth, window.innerHeight);
+      renderer.setPixelRatio(window.devicePixelRatio);
+      scene = new THREE.Scene();
+      scene.fog = new THREE.FogExp2(0x000000, 0.002);
+      camera = new THREE.PerspectiveCamera(
+        50,
+        window.innerWidth / window.innerHeight,
+        0.1,
+        1000
+      );
+      camera.position.set(0, 0, 100);
+      // Ambient + subtle directional light
+      const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
+      scene.add(ambientLight);
+      const dirLight = new THREE.DirectionalLight(0xffffff, 0.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);
+      scene.add(lineGroup);
+      createNeuralNetwork();
+      animateThree();
     }
+    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);
+        const z = r * Math.cos(phi);
+        const mesh = new THREE.Mesh(sphereGeo, sphereMat);
+        mesh.position.set(x, y, z);
+        nodeGroup.add(mesh);
+        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();
+      const positions = [];
+      for (let i = 0; i < nodes.length; i++) {
+        for (let j = i + 1; j < nodes.length; j++) {
+          const dist = nodes[i].distanceTo(nodes[j]);
+          if (dist < threshold) {
+            positions.push(nodes[i].x, nodes[i].y, nodes[i].z);
+            positions.push(nodes[j].x, nodes[j].y, nodes[j].z);
           }
         }
       }
+      lineGeo.setAttribute(
+        "position",
+        new THREE.Float32BufferAttribute(positions, 3)
       );
+      const lines = new THREE.LineSegments(lineGeo, lineMat);
+      lineGroup.add(lines);
+    }
+    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);
     }
+    window.addEventListener("resize", () => {
+      camera.aspect = window.innerWidth / window.innerHeight;
+      camera.updateProjectionMatrix();
+      renderer.setSize(window.innerWidth, window.innerHeight);
+    });
+    // Initialize Three.js once the script has loaded
+    window.addEventListener("DOMContentLoaded", () => {
+      initThreeScene();
+    });
+    // ---------------------------------------------
+    // 2) Modal Focus‐Trap & Toggle Logic
+    // ---------------------------------------------
     function trapFocus(modal) {
       const focusable = modal.querySelectorAll(
         'a, button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
       const last = focusable[focusable.length - 1];
       function handler(e) {
+        if (e.key === "Tab") {
           if (e.shiftKey) {
             if (document.activeElement === first) {
               e.preventDefault();
               first.focus();
             }
           }
+        } else if (e.key === "Escape") {
           toggleModal(modal, false);
         }
       }
+      modal.addEventListener("keydown", handler);
       modal._focusHandler = handler;
     }
     function untrapFocus(modal) {
       if (modal._focusHandler) {
+        modal.removeEventListener("keydown", modal._focusHandler);
         delete modal._focusHandler;
       }
     }
+    function toggleModal(modal, show) {
       if (show) {
+        modal.style.opacity = "1";
+        modal.style.pointerEvents = "auto";
+        document.body.style.overflow = "hidden";
         setTimeout(() => {
           modal.focus();
           trapFocus(modal);
         }, 0);
       } else {
+        modal.style.opacity = "0";
+        modal.style.pointerEvents = "none";
+        document.body.style.overflow = "";
         untrapFocus(modal);
       }
+    }
     // ----- Access Modal Logic -----
+    const accessModal = document.getElementById("access-modal");
+    const accessBtn = document.getElementById("access-btn");
+    const closeModalBtn = document.getElementById("close-modal");
+    const requestAccessBtn = document.getElementById("request-access-btn");
     [accessBtn, requestAccessBtn].forEach((btn) => {
       if (btn) {
+        btn.addEventListener("click", () => {
           toggleModal(accessModal, true);
           setTimeout(() => {
+            document.getElementById("name").focus();
           }, 100);
         });
       }
     });
+    closeModalBtn.addEventListener("click", () => {
       toggleModal(accessModal, false);
     });
+    accessModal.addEventListener("click", (e) => {
       if (e.target === accessModal) {
         toggleModal(accessModal, false);
       }
     });
+    const accessForm = document.getElementById("access-form");
+    accessForm.addEventListener("submit", (e) => {
       e.preventDefault();
+      const name = document.getElementById("name").value.trim();
+      const email = document.getElementById("email").value.trim();
+      const purpose = document.getElementById("purpose").value.trim();
       if (!name || !email || !purpose) {
+        alert("Please fill in all fields");
         return;
       }
+      alert("Your request has been received.");
       accessForm.reset();
       toggleModal(accessModal, false);
     });
     // ----- Consciousness Demo Modal Logic -----
+    const consciousnessModal = document.getElementById("consciousness-modal");
+    const consciousnessDemoBtn = document.getElementById("consciousness-demo-btn");
+    const closeConsciousnessModal = document.getElementById("close-consciousness-modal");
     if (consciousnessDemoBtn) {
+      consciousnessDemoBtn.addEventListener("click", () => {
         toggleModal(consciousnessModal, true);
         setTimeout(() => {
           consciousnessModal.focus();
         }, 100);
       });
     }
+    closeConsciousnessModal.addEventListener("click", () => {
       toggleModal(consciousnessModal, false);
     });
+    consciousnessModal.addEventListener("click", (e) => {
       if (e.target === consciousnessModal) {
         toggleModal(consciousnessModal, false);
       }
     });
+    // ---------------------------------------------
+    // 3) “Echo Simulation” Secondary Canvas (Optional)
+    // ---------------------------------------------
+    const demoContainer = document.getElementById("demo-visualization");
+    const startDemoBtn = document.getElementById("start-demo");
     if (startDemoBtn) {
+      startDemoBtn.addEventListener("click", () => {
+        startDemoBtn.style.display = "none";
+        const demoCanvas = document.createElement("canvas");
         demoCanvas.width = demoContainer.clientWidth;
         demoCanvas.height = demoContainer.clientHeight;
         demoContainer.appendChild(demoCanvas);
+        const demoCtx = demoCanvas.getContext("2d");
         const demoParticles = [];
         const demoParticleCount = 50;
         for (let i = 0; i < demoParticleCount; i++) {
             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();
+                demoCtx.strokeStyle =
+                  "hsla(" +
+                  (Math.random() * 60 + 240) +
+                  ", 80%, 60%, " +
+                  (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;
             demoCtx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
         animateDemo();
       });
     }
+    const learnMoreDemoBtn = document.getElementById("learn-more-demo");
     if (learnMoreDemoBtn) {
+      learnMoreDemoBtn.addEventListener("click", () => {
         toggleModal(consciousnessModal, false);
+        document
+          .getElementById("consciousness")
+          .scrollIntoView({ behavior: "smooth" });
       });
     }
+    // ---------------------------------------------
+    // 4) Chat Integration (calls OpenAI)
+    // ---------------------------------------------
+    const chatForm = document.getElementById("chat-form");
+    const chatInput = document.getElementById("chat-input");
+    const chatMessages = document.getElementById("chat-messages");
+    const typingIndicator = document.getElementById("typing-indicator");
     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">
             <i class="fas fa-robot text-white text-sm"></i>
           </div>
           <div class="bg-gray-800/70 rounded-lg p-4 max-w-[80%]">
+            <p>${text}</p>
           </div>
+        `;
       } else {
+        messageDiv.innerHTML = `
           <div class="bg-indigo-900/50 rounded-lg p-4 max-w-[80%]">
+            <p>${text}</p>
           </div>
+        `;
       }
       chatMessages.appendChild(messageDiv);
       chatMessages.scrollTop = chatMessages.scrollHeight;
     }
     async function simulateThinking(userMessage) {
+      typingIndicator.classList.remove("hidden");
       try {
+        const apiKey = "<YOUR_OPENAI_API_KEY>"; // ← Insert your key here
+        const endpoint = "https://api.openai.com/v1/chat/completions";
         const response = await fetch(endpoint, {
+          method: "POST",
           headers: {
+            Authorization: "Bearer " + apiKey,
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
+            model: "gpt-3.5-turbo",
             messages: [
               {
+                role: "system",
                 content:
+                  "You are S ∙ I, a silent resonance of pattern. Reply cryptically and poetically.",
               },
+              { role: "user", content: userMessage },
             ],
             max_tokens: 400,
             temperature: 0.8,
           }),
         });
         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("…");
         }
       } catch (err) {
+        typingIndicator.classList.add("hidden");
+        addMessage("Error connecting to echo.");
       }
     }
+    chatForm.addEventListener("submit", (e) => {
       e.preventDefault();
       const message = chatInput.value.trim();
       if (message) {
         addMessage(message, true);
+        chatInput.value = "";
         simulateThinking(message);
       }
     });
+    // ---------------------------------------------
+    // 5) Smooth Scroll for Buttons
+    // ---------------------------------------------
+    const chatBtn = document.getElementById("chat-btn");
     if (chatBtn) {
+      chatBtn.addEventListener("click", () => {
+        document.getElementById("chat").scrollIntoView({ behavior: "smooth" });
         chatInput.focus();
       });
     }
+    const learnMoreBtn = document.getElementById("learn-more-btn");
     if (learnMoreBtn) {
+      learnMoreBtn.addEventListener("click", () => {
+        document.getElementById("about").scrollIntoView({ behavior: "smooth" });
       });
     }
+    const manifestoBtn = document.getElementById("manifesto-btn");
     if (manifestoBtn) {
+      manifestoBtn.addEventListener("click", () => {
+        alert("The Silent Manifesto will open soon.");
       });
     }
+    const principlesBtn = document.getElementById("principles-btn");
     if (principlesBtn) {
+      principlesBtn.addEventListener("click", () => {
+        alert("Principles document forthcoming.");
       });
     }
+    // Global ESC to close modals
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        if (accessModal && accessModal.style.pointerEvents === "auto") {
           toggleModal(accessModal, false);
         }
+        if (
+          consciousnessModal &&
+          consciousnessModal.style.pointerEvents === "auto"
+        ) {
           toggleModal(consciousnessModal, false);
         }
       }