Scrolling Testimonial Section with Reveal Animation

<section class="md:px-12 md:py-32 text-stone-900 bg-[#EAE8E2] w-full pt-24 pr-6 pb-24 pl-6 relative overflow-hidden">
  <!-- Iconify Script -->
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <style>
    @keyframes friction-scroll {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }

    .animate-friction-cards {
      animation: friction-scroll 50s linear infinite;
    }

    .animate-friction-cards:hover {
      animation-play-state: paused;
    }

    @keyframes revealUp {
      from {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
      }
    }

    .reveal-node {
      opacity: 0;
    }

    .reveal-active {
      animation: revealUp 1s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
    }
  </style>

  <!-- Architect Grid Background -->
  <div class="absolute inset-0 w-full h-full pointer-events-none opacity-40"
    style="background-image: linear-gradient(#d1d1cf 1px, transparent 1px), linear-gradient(90deg, #d1d1cf 1px, transparent 1px); background-size: 100px 100px;">
  </div>

  <div class="z-10 w-full relative">
    <!-- Header -->
    <div class="mb-20 flex flex-col items-center text-center max-w-7xl mx-auto reveal-node">
      <span class="rounded-full border border-stone-300/60 bg-white/80 px-4 py-1.5 text-[10px] font-semibold uppercase tracking-[0.2em] text-stone-500 font-sans backdrop-blur-sm mb-6">
                The Friction Point
            </span>
      <h2 class="max-w-3xl text-4xl font-light tracking-tighter text-stone-900 md:text-6xl font-serif italic"
        style="font-family: 'DM Sans', sans-serif;">
        Is legacy architecture stifling your <span class="text-stone-400">cognitive potential?</span>
      </h2>
    </div>

    <!-- Horizontal Scroll Cards -->
    <div
      class="w-full overflow-hidden [mask-image:linear-gradient(to_right,transparent,black_10%,black_90%,transparent)]">
      <div class="flex w-max animate-friction-cards gap-6 py-4">
        <!-- Card Template (Repeated for effect) -->
        <div
          class="w-[380px] md:w-[420px] relative rounded-2xl border border-stone-200 bg-white/70 backdrop-blur-md p-10 shadow-sm transition-all hover:border-stone-400 hover:shadow-xl group">
          <div
            class="mb-10 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-900 text-white transition-transform group-hover:scale-110">
            <iconify-icon icon="solar:globus-linear" class="text-2xl"></iconify-icon>
          </div>
          <p class="text-xl font-light leading-relaxed text-stone-800 mb-10 font-sans italic">
            "Reducing inference latency by <span class="font-medium text-black">40%</span> is no longer an option—it is
            a requirement for survival."
          </p>
          <div class="flex items-center gap-4 pt-6 border-t border-stone-100">
            <div class="h-10 w-10 rounded-full bg-stone-200 overflow-hidden grayscale">
              <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop" alt="User">
            </div>
            <div>
              <p class="text-xs font-bold uppercase tracking-widest text-stone-900">Elena Rodriguez</p>
              <p class="text-[10px] text-stone-500 font-medium">VP of Engineering</p>
            </div>
          </div>
        </div>

        <div
          class="w-[380px] md:w-[420px] relative rounded-2xl border border-stone-200 bg-white/70 backdrop-blur-md p-10 shadow-sm transition-all hover:border-stone-400 hover:shadow-xl group">
          <div
            class="mb-10 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-900 text-white transition-transform group-hover:scale-110">
            <iconify-icon icon="solar:shield-warning-linear" class="text-2xl"></iconify-icon>
          </div>
          <p class="text-xl font-light leading-relaxed text-stone-800 mb-10 font-sans italic">
            "Compliance cycles are taking weeks. We need
            <span class="font-medium text-black">automated traceability</span> at the neural level."
          </p>
          <div class="flex items-center gap-4 pt-6 border-t border-stone-100">
            <div class="h-10 w-10 rounded-full bg-stone-200 overflow-hidden grayscale">
              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" alt="User">
            </div>
            <div>
              <p class="text-xs font-bold uppercase tracking-widest text-stone-900">Marcus Chen</p>
              <p class="text-[10px] text-stone-500 font-medium">Lead AI Architect</p>
            </div>
          </div>
        </div>

        <div
          class="w-[380px] md:w-[420px] relative rounded-2xl border border-stone-200 bg-white/70 backdrop-blur-md p-10 shadow-sm transition-all hover:border-stone-400 hover:shadow-xl group">
          <div
            class="mb-10 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-900 text-white transition-transform group-hover:scale-110">
            <iconify-icon icon="solar:bolt-circle-linear" class="text-2xl"></iconify-icon>
          </div>
          <p class="text-xl font-light leading-relaxed text-stone-800 mb-10 font-sans italic">
            "Data silos have become the <span class="font-medium text-black">innovation tax</span> we can no longer
            afford to pay."
          </p>
          <div class="flex items-center gap-4 pt-6 border-t border-stone-100">
            <div class="h-10 w-10 rounded-full bg-stone-200 overflow-hidden grayscale">
              <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop" alt="User">
            </div>
            <div>
              <p class="text-xs font-bold uppercase tracking-widest text-stone-900">Sarah Lin</p>
              <p class="text-[10px] text-stone-500 font-medium">Infrastructure Lead</p>
            </div>
          </div>
        </div>

        <!-- Duplicates for Loop -->
        <div
          class="w-[380px] md:w-[420px] relative rounded-2xl border border-stone-200 bg-white/70 backdrop-blur-md p-10 shadow-sm group"
          aria-hidden="true">
          <div class="mb-10 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-900 text-white">
            <iconify-icon icon="solar:globus-linear" class="text-2xl"></iconify-icon>
          </div>
          <p class="text-xl font-light leading-relaxed text-stone-800 mb-10 font-sans italic">"Reducing inference
            latency by <span class="font-medium text-black">40%</span> is no longer an option."</p>
          <div class="flex items-center gap-4 pt-6 border-t border-stone-100">
            <div class="h-10 w-10 rounded-full bg-stone-200 overflow-hidden grayscale"><img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100&h=100&fit=crop">
            </div>
            <div>
              <p class="text-xs font-bold uppercase tracking-widest text-stone-900">Elena Rodriguez</p>
            </div>
          </div>
        </div>
        <div
          class="w-[380px] md:w-[420px] relative rounded-2xl border border-stone-200 bg-white/70 backdrop-blur-md p-10 shadow-sm group"
          aria-hidden="true">
          <div class="mb-10 flex h-12 w-12 items-center justify-center rounded-xl bg-stone-900 text-white">
            <iconify-icon icon="solar:shield-warning-linear" class="text-2xl"></iconify-icon>
          </div>
          <p class="text-xl font-light leading-relaxed text-stone-800 mb-10 font-sans italic">"Compliance cycles are
            taking weeks. We need <span class="font-medium text-black">automated traceability</span>."</p>
          <div class="flex items-center gap-4 pt-6 border-t border-stone-100">
            <div class="h-10 w-10 rounded-full bg-stone-200 overflow-hidden grayscale"><img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop">
            </div>
            <div>
              <p class="text-xs font-bold uppercase tracking-widest text-stone-900">Marcus Chen</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Marquee Labels -->
    <div class="mt-20 flex justify-center reveal-node" style="transition-delay: 200ms;">
      <div class="flex flex-wrap justify-center gap-x-8 gap-y-4 max-w-4xl opacity-40">
        <span class="text-[10px] font-bold uppercase tracking-[0.3em] font-mono">Latency Bloat</span>
        <span class="text-stone-400">•</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.3em] font-mono">Compute Drift</span>
        <span class="text-stone-400">•</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.3em] font-mono">Model Fragility</span>
        <span class="text-stone-400">•</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.3em] font-mono">Legacy Debt</span>
        <span class="text-stone-400">•</span>
        <span class="text-[10px] font-bold uppercase tracking-[0.3em] font-mono">API Throttling</span>
      </div>
    </div>
  </div>

  <script>
    (function() {
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('reveal-active');
                    }
                });
            }, { threshold: 0.1 });

            document.querySelectorAll('.reveal-node').forEach(el => observer.observe(el));
        })();
  </script>
</section>