Interactive Neural Particle Hero Section

<section
  class="relative w-full h-screen overflow-hidden flex flex-col items-center justify-center bg-[#050505] text-white select-none"
  style="font-family: 'Inter', system-ui, -apple-system, sans-serif; cursor: crosshair;">
  <script src="https://cdn.tailwindcss.com"></script>

  <div id="canvas-container" class="absolute inset-0 z-0">
    <canvas id="neural-canvas" class="w-full h-full block"></canvas>
  </div>

  <nav class="fixed top-0 left-0 w-full p-6 md:p-10 flex justify-between items-start z-30 pointer-events-none">
    <div class="pointer-events-auto group">
      <div class="text-[10px] tracking-[0.4em] font-bold uppercase mb-1">Neuralis / Core 09</div>
      <div class="h-[1px] w-0 group-hover:w-full bg-white transition-all duration-500"></div>
    </div>
    <div class="hidden md:block pointer-events-auto opacity-40 text-[9px] tracking-widest uppercase"
      style="font-family: monospace;">
      Sync Status: Nominal / 144Hz
    </div>
  </nav>

  <div
    class="relative z-20 mx-4 p-8 md:p-12 max-w-sm w-full flex flex-col items-center text-center transition-all duration-700 hover:border-white/30"
    style="background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(24px); border-radius: 2px;">

    <span class="text-[9px] uppercase tracking-[0.4em] text-cyan-400 mb-4 animate-pulse">Establishing Link</span>
    <h1 class="text-7xl md:text-8xl font-black leading-none tracking-tighter mb-6 italic">.82</h1>

    <p class="text-[11px] leading-relaxed opacity-60 mb-10 font-light tracking-wide">
      A generative study of synaptic weight distribution. This iteration visualizes the hidden layers of a
      latent space traversal, mapping high-dimensional noise to tactile geometry.
    </p>

    <div class="w-full pt-8 border-t border-white/5 flex flex-col items-center gap-8">
      <div class="flex justify-between w-full px-4 text-[9px] tracking-widest opacity-80"
        style="font-family: monospace;">
        <div class="flex flex-col items-start">
          <span class="opacity-40 mb-1">GEN</span>
          <span class="font-bold">#A-402</span>
        </div>
        <div class="flex flex-col items-end">
          <span class="opacity-40 mb-1">TYPE</span>
          <span class="font-bold">VECTOR</span>
        </div>
      </div>

      <button id="main-cta" class="group relative px-10 py-4 overflow-hidden border border-white/20 transition-all duration-500 hover:border-cyan-400">
        <span class="relative z-10 text-[10px] font-bold tracking-[0.2em]">INITIALIZE 0.5Ξ</span>
        <div class="absolute inset-0 bg-white scale-x-0 group-hover:scale-x-100 origin-left transition-transform duration-500"></div>
        <style>#main-cta:hover span { color: black; }</style>
      </button>
    </div>
  </div>

  <div class="fixed bottom-10 w-full flex flex-col items-center z-30 pointer-events-none">
    <div class="text-[8px] uppercase tracking-[0.5em] opacity-30 mb-2">Network Hash</div>
    <div id="seed-display"
      class="text-[10px] opacity-60 hover:opacity-100 transition-opacity pointer-events-auto cursor-pointer"
      style="font-family: monospace;">
      0xBE82...F91A
    </div>
  </div>

  <script>
    (function() {
      const canvas = document.getElementById('neural-canvas');
      const ctx = canvas.getContext('2d');
      const seedDisplay = document.getElementById('seed-display');
      let width, height, particles = [], mouse = { x: -1000, y: -1000 };

      function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width * window.devicePixelRatio;
        canvas.height = height * window.devicePixelRatio;
        ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
        initParticles();
      }

      class Particle {
        constructor() {
          this.init();
        }
        init() {
          this.x = Math.random() * width;
          this.y = Math.random() * height;
          this.baseX = this.x;
          this.baseY = this.y;
          this.size = Math.random() * 1.5 + 0.5;
          this.speedX = (Math.random() - 0.5) * 0.5;
          this.speedY = (Math.random() - 0.5) * 0.5;
          this.color = Math.random() > 0.95 ? '#22d3ee' : '#ffffff';
        }
        update() {
          let dx = mouse.x - this.x;
          let dy = mouse.y - this.y;
          let distance = Math.sqrt(dx * dx + dy * dy);
          let force = (100 - distance) / 100;

          if (distance < 100) {
            this.x -= dx * force * 0.05;
            this.y -= dy * force * 0.05;
          }

          this.x += this.speedX;
          this.y += this.speedY;

          if (this.x < 0 || this.x > width) this.speedX *= -1;
          if (this.y < 0 || this.y > height) this.speedY *= -1;
        }
        draw() {
          ctx.fillStyle = this.color;
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fill();
        }
      }

      function initParticles() {
        particles = [];
        const count = width < 768 ? 150 : 400;
        for (let i = 0; i < count; i++) {
          particles.push(new Particle());
        }
      }

      function connect() {
        for (let a = 0; a < particles.length; a++) {
          for (let b = a; b < particles.length; b++) {
            let dx = particles[a].x - particles[b].x;
            let dy = particles[a].y - particles[b].y;
            let distance = Math.sqrt(dx * dx + dy * dy);

            if (distance < 120) {
              let opacity = 1 - (distance / 120);
              ctx.strokeStyle = `rgba(255, 255, 255, ${opacity * 0.15})`;
              ctx.lineWidth = 0.5;
              ctx.beginPath();
              ctx.moveTo(particles[a].x, particles[a].y);
              ctx.lineTo(particles[b].x, particles[b].y);
              ctx.stroke();
            }
          }
        }
      }

      function animate() {
        ctx.clearRect(0, 0, width, height);
        particles.forEach(p => {
          p.update();
          p.draw();
        });
        connect();
        requestAnimationFrame(animate);
      }

      window.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
      });

      window.addEventListener('resize', resize);
      
      seedDisplay.addEventListener('click', () => {
        seedDisplay.innerText = "0x" + Math.random().toString(16).slice(2, 10).toUpperCase() + "...SYNC";
        initParticles();
      });

      document.getElementById('main-cta').addEventListener('click', function() {
        const span = this.querySelector('span');
        span.innerText = "LINK ESTABLISHED";
        this.style.borderColor = '#22d3ee';
        setTimeout(() => { span.innerText = "OWNED"; }, 600);
      });

      resize();
      animate();
    })();
  </script>
</section>