Animated Hardware Pipeline Timeline Section

<!-- Hardware Pipeline Section (drop-in, self-contained) -->
<section id="hardware-pipeline"
  class="sm:py-32 overflow-hidden border-y bg-[#0a0a0c] border-zinc-900 pt-24 pb-24 relative shadow-[inset_0_20px_40px_rgba(0,0,0,0.5),inset_0_-20px_40px_rgba(0,0,0,0.5)]">
  <style>
    /* If you already have these tactile classes globally, delete this <style> block. */
    .tactile-base {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    .tactile-inset {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(255, 255, 255, 0.03));
      box-shadow:
        inset 0 2px 10px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .tactile-glass {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    }

    /* Vertical "scan" light on the center rail */
    @keyframes text-slide {
      0% {
        transform: translateY(-60%);
        opacity: 0;
      }

      20% {
        opacity: 1;
      }

      80% {
        opacity: 1;
      }

      100% {
        transform: translateY(220%);
        opacity: 0;
      }
    }
  </style>

  <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
    <div class="text-center max-w-2xl mx-auto mb-20 scroll-animate">
      <h2 class="text-3xl font-normal tracking-tight text-zinc-100">
        The hardware pipeline
      </h2>
      <p class="mt-4 text-base text-zinc-400">
        A physical approach to routing data through distributed nodes.
      </p>
    </div>

    <div class="relative max-w-3xl mx-auto scroll-animate">
      <!-- Center Rail -->
      <div
        class="absolute left-8 md:left-1/2 top-0 bottom-0 w-4 -translate-x-1/2 tactile-inset rounded-full z-0 flex justify-center py-4">
        <div class="w-1 h-full bg-zinc-800 rounded-full relative overflow-hidden">
          <div
            class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-transparent via-indigo-500 to-transparent animate-[text-slide_3s_linear_infinite] shadow-[0_0_15px_#6366f1]">
          </div>
        </div>
      </div>

      <!-- Row 1 -->
      <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-8 mb-16 group pl-20 md:pl-0">
        <div class="md:hidden w-full mb-4">
          <h3 class="text-lg font-normal text-zinc-100">Data Ingestion</h3>
          <p class="text-sm text-zinc-500 mt-1">
            High-bandwidth physical uplinks pull datasets into the secure enclave.
          </p>
        </div>

        <div class="md:w-1/2 md:pr-12 md:text-right hidden md:block">
          <h3 class="text-lg font-normal text-zinc-100">Data Ingestion</h3>
          <p class="text-sm text-zinc-500 mt-1">
            High-bandwidth physical uplinks pull datasets into the secure enclave.
          </p>
        </div>

        <div
          class="absolute left-8 md:left-1/2 -translate-x-1/2 w-10 h-10 rounded-full tactile-base border border-zinc-700 flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
          <div
            class="w-3 h-3 rounded-full bg-zinc-800 shadow-inner border border-zinc-900 group-hover:bg-zinc-300 transition-colors">
          </div>
        </div>

        <div class="md:w-1/2 md:pl-12 w-full">
          <div class="tactile-glass p-5 rounded-xl border border-zinc-800/50 flex items-center gap-4">
            <div class="w-10 h-10 rounded tactile-inset flex items-center justify-center text-zinc-400">
              <iconify-icon icon="solar:database-linear" width="20"></iconify-icon>
            </div>

            <div class="flex-1">
              <div class="h-2 w-full bg-zinc-900 rounded overflow-hidden shadow-inner">
                <div
                  class="h-full w-0 [.is-visible_&]:w-3/4 bg-zinc-600 rounded transition-all duration-[1500ms] delay-[300ms] ease-out">
                </div>
              </div>

              <div class="text-xs font-mono text-zinc-500 mt-2">
                INGEST_RATE: 400GB/s
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Row 2 -->
      <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-8 mb-16 group pl-20 md:pl-0">
        <div class="md:w-1/2 md:pr-12 md:text-right w-full order-2 md:order-1 mt-4 md:mt-0">
          <div class="tactile-glass p-5 rounded-xl border border-zinc-800/50 flex items-center gap-4">
            <div class="flex-1 text-right">
              <div class="text-xs font-mono text-zinc-500 mb-2">
                TRAIN_STATUS: ACTIVE
              </div>

              <div class="flex gap-1 justify-end">
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-indigo-500 rounded-full shadow-[0_0_8px_#6366f1] transition-all duration-500 delay-[600ms] ease-out">
                </div>
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-indigo-500 rounded-full shadow-[0_0_8px_#6366f1] transition-all duration-500 delay-[750ms] ease-out">
                </div>
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-zinc-800 rounded-full transition-all duration-500 delay-[900ms] ease-out">
                </div>
              </div>
            </div>

            <div class="w-10 h-10 rounded tactile-inset flex items-center justify-center text-indigo-400">
              <iconify-icon icon="solar:magic-stick-3-linear" width="20"></iconify-icon>
            </div>
          </div>
        </div>

        <div
          class="absolute left-8 md:left-1/2 -translate-x-1/2 w-10 h-10 rounded-full tactile-base border border-zinc-700 flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform order-1 md:order-2">
          <div
            class="w-3 h-3 rounded-full bg-indigo-500 shadow-[0_0_10px_#6366f1] border border-zinc-900 transition-colors">
          </div>
        </div>

        <div class="md:w-1/2 md:pl-12 order-1 md:order-3 md:hidden">
          <h3 class="text-lg font-normal text-zinc-100">Distributed Training</h3>
          <p class="text-sm text-zinc-500 mt-1">
            Multi-GPU orchestration via physical NVLink bridges.
          </p>
        </div>

        <div class="md:w-1/2 md:pl-12 hidden md:block order-3">
          <h3 class="text-lg font-normal text-zinc-100">Distributed Training</h3>
          <p class="text-sm text-zinc-500 mt-1">
            Multi-GPU orchestration via physical NVLink bridges.
          </p>
        </div>
      </div>

      <!-- Row 3 -->
      <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-8 mb-16 group pl-20 md:pl-0">
        <div class="md:w-1/2 md:pr-12 md:text-right hidden md:block">
          <h3 class="text-lg font-normal text-zinc-100">Model Compilation</h3>
          <p class="text-sm text-zinc-500 mt-1">
            Automated ONNX/TensorRT optimization for bare-metal inference.
          </p>
        </div>

        <div
          class="absolute left-8 md:left-1/2 -translate-x-1/2 w-10 h-10 rounded-full tactile-base border border-zinc-700 flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform">
          <div
            class="w-3 h-3 rounded-full bg-emerald-500 shadow-[0_0_10px_#10b981] border border-zinc-900 transition-colors">
          </div>
        </div>

        <div class="md:w-1/2 md:pl-12 w-full">
          <div class="tactile-glass p-5 rounded-xl border border-zinc-800/50 flex items-center gap-4">
            <div class="w-10 h-10 rounded tactile-inset flex items-center justify-center text-emerald-400">
              <iconify-icon icon="solar:cpu-linear" width="20"></iconify-icon>
            </div>

            <div class="flex-1">
              <div class="h-2 w-full bg-zinc-900 rounded overflow-hidden shadow-inner">
                <div
                  class="h-full w-0 [.is-visible_&]:w-2/3 bg-emerald-500 rounded shadow-[0_0_8px_#10b981] transition-all duration-[1500ms] delay-[1000ms] ease-out">
                </div>
              </div>

              <div class="text-xs font-mono text-zinc-500 mt-2">
                COMPILE_TARGET: TENSOR_RT
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Row 4 -->
      <div class="relative z-10 flex flex-col md:flex-row items-start md:items-center gap-8 mb-16 group pl-20 md:pl-0">
        <div class="md:w-1/2 md:pr-12 md:text-right w-full order-2 md:order-1 mt-4 md:mt-0">
          <div class="tactile-glass p-5 rounded-xl border border-zinc-800/50 flex items-center gap-4">
            <div class="flex-1 text-right">
              <div class="text-xs font-mono text-zinc-500 mb-2">
                LATENCY: 12ms
              </div>

              <div class="flex gap-1 justify-end">
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-orange-500 rounded-full shadow-[0_0_8px_#f97316] transition-all duration-500 delay-[1300ms] ease-out">
                </div>
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-orange-500 rounded-full shadow-[0_0_8px_#f97316] transition-all duration-500 delay-[1450ms] ease-out">
                </div>
                <div
                  class="w-0 [.is-visible_&]:w-6 h-1.5 bg-orange-500 rounded-full shadow-[0_0_8px_#f97316] transition-all duration-500 delay-[1600ms] ease-out">
                </div>
              </div>
            </div>

            <div class="w-10 h-10 rounded tactile-inset flex items-center justify-center text-orange-400">
              <iconify-icon icon="solar:routing-2-linear" width="20"></iconify-icon>
            </div>
          </div>
        </div>

        <div
          class="absolute left-8 md:left-1/2 -translate-x-1/2 w-10 h-10 rounded-full tactile-base border border-zinc-700 flex items-center justify-center shadow-xl group-hover:scale-110 transition-transform order-1 md:order-2">
          <div
            class="w-3 h-3 rounded-full bg-orange-500 shadow-[0_0_10px_#f97316] border border-zinc-900 transition-colors">
          </div>
        </div>

        <div class="md:w-1/2 md:pl-12 order-1 md:order-3 md:hidden">
          <h3 class="text-lg font-normal text-zinc-100">Global Edge Routing</h3>
          <p class="text-sm text-zinc-500 mt-1">
            Weights distributed to physically adjacent NVMe storage nodes.
          </p>
        </div>

        <div class="md:w-1/2 md:pl-12 hidden md:block order-3">
          <h3 class="text-lg font-normal text-zinc-100">Global Edge Routing</h3>
          <p class="text-sm text-zinc-500 mt-1">
            Weights distributed to physically adjacent NVMe storage nodes.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    // Adds .is-visible when the section enters viewport, triggering your Tailwind variants:
    // w-0 -> w-3/4, w-2/3, w-6, etc via `[.is-visible_&]:...`
    document.addEventListener("DOMContentLoaded", () => {
      const section = document.querySelector("#hardware-pipeline");
      if (!section) return;

      const io = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            if (entry.isIntersecting) {
              section.classList.add("is-visible");
              io.disconnect(); // run once
              break;
            }
          }
        },
        { threshold: 0.25, rootMargin: "0px 0px -10% 0px" }
      );

      io.observe(section);
    });
  </script>
</section>