Animated Field-Tested Operatives Feature Section

<section
  class="max-w-[1400px] mx-auto px-6 lg:px-12 py-32 border-b border-[#2d322f]/10 bg-[#ebedea] text-[#2d322f] antialiased overflow-x-hidden font-sans"
  style="font-family: 'Inter', sans-serif;">
  <script src="https://cdn.tailwindcss.com"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&family=Playfair+Display:ital@0;1&display=swap"
    rel="stylesheet">

  <style>
    .font-display {
      font-family: "Oswald", sans-serif;
    }

    .font-accent {
      font-family: "Playfair Display", serif;
    }

    @keyframes animationIn {
      0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
      }
    }

    .animate-on-scroll {
      animation-play-state: paused !important;
    }

    .animate-on-scroll.animate {
      animation-play-state: running !important;
    }
  </style>

  <div class="mb-20 text-center">
    <div class="flex items-center justify-center gap-3 mb-8">
      <span class="h-px w-10 bg-[#3F556B]/70"></span>
      <span class="text-[11px] font-semibold uppercase tracking-[0.28em] text-[#2d322f]/60">FIELD TESTED</span>
      <span class="h-px w-10 bg-[#3F556B]/70"></span>
    </div>

    <h2
      class="font-display text-5xl md:text-6xl font-semibold tracking-tighter uppercase text-[#2d322f] leading-[0.95]">
      Tested By Those<br />Who Climb<span class="text-[#3F556B]"> before</span><br />
    </h2>

    <p class="mt-8 text-lg md:text-xl text-[#2d322f]/60 max-w-[40ch] mx-auto leading-relaxed">
      Elite operatives validating AEX systems in live alpine conditions.
    </p>

    <div class="mt-10 flex justify-center">
      <span class="h-px w-20 bg-[#3F556B]/40"></span>
    </div>
  </div>

  <div class="grid md:grid-cols-3 gap-8 lg:gap-12 h-auto md:h-[600px]">
    <!-- Card 1 -->
    <div class="group cursor-pointer flex flex-col h-full animate-on-scroll"
      style="animation: animationIn 0.8s ease-out 0.2s both;">
      <div class="aspect-[3/4] md:h-[65%] w-full overflow-hidden bg-[#2d322f] mb-6">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/302bcbcf-41a5-410b-8225-950ce8c63925_3840w.webp?w=800&q=80" alt="Elias Vance" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
      </div>
      <div>
        <h3 class="font-display text-3xl uppercase tracking-tighter text-[#2d322f] mb-1">Elias Vance</h3>
        <p class="text-[10px] uppercase font-semibold text-[#3F556B] tracking-[0.2em] mb-3">FREERIDE / DEEP POWDER /
          CONTROL</p>
        <p class="font-accent italic text-[#2d322f]/70 text-lg mb-4">"Silence and survival are the same thing at
          elevation."</p>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="group cursor-pointer flex flex-col h-full animate-on-scroll"
      style="animation: animationIn 0.8s ease-out 0.4s both;">
      <div class="mb-6 order-1">
        <h3 class="font-display text-3xl uppercase tracking-tighter text-[#2d322f] mb-1">Sarah Thorne</h3>
        <p class="text-[10px] uppercase font-semibold text-[#3F556B] tracking-[0.2em] mb-3">ALL CONDITIONS / HIGH
          CONSEQUENCE</p>
        <p class="font-accent italic text-[#2d322f]/70 text-lg mb-4">"Trust the engineering. Ignore the elements."</p>
      </div>
      <div class="aspect-[3/4] md:h-[65%] w-full overflow-hidden bg-[#2d322f] order-2">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/706d8c8b-1cf5-4e45-b025-b86541e10c75_3840w.webp?w=800&q=80" alt="Sarah Thorne" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700" />
      </div>
    </div>

    <!-- Card 3 -->
    <div class="group cursor-pointer flex flex-col h-full animate-on-scroll"
      style="animation: animationIn 0.8s ease-out 0.6s both;">
      <div class="aspect-[3/4] md:h-[65%] w-full overflow-hidden bg-[#2d322f] mb-6">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/ba725926-bb3d-4966-9d7d-577b7470b473_3840w.webp?w=800&q=80" alt="Marcus Lin" class="w-full h-full object-cover object-top group-hover:scale-105 transition-transform duration-700" />
      </div>
      <div>
        <h3 class="font-display text-3xl uppercase tracking-tighter text-[#2d322f] mb-1">Marcus Lin</h3>
        <p class="text-[10px] uppercase font-semibold text-[#3F556B] tracking-[0.2em] mb-3">BACKCOUNTRY / SUB-ZERO /
          LIGHTWEIGHT</p>
        <p class="font-accent italic text-[#2d322f]/70 text-lg mb-4">"Every gram removed is a degree of freedom gained."
        </p>
      </div>
    </div>
  </div>

  <div class="mt-20 flex justify-center w-full">
    <a href="#"
      class="bg-transparent border border-[#2d322f] px-10 py-4 text-xs font-semibold uppercase tracking-widest text-[#2d322f] hover:bg-[#3F556B] hover:border-[#3F556B] hover:text-white transition-all duration-300">
      View All Operatives
    </a>
  </div>

  <script>
    (function () {
      const io = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            io.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1, rootMargin: "0px 0px -10% 0px" });
      document.querySelectorAll(".animate-on-scroll").forEach((el) => io.observe(el));
    })();
  </script>
</section>