Animated Sector Grid Feature Section

<div
  style="font-family: 'Inter', sans-serif; background-color: #ebedea; color: #2d322f; position: relative; width: 100%; overflow: hidden;">
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Oswald:wght@500;600&display=swap"
    rel="stylesheet" />

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

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

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

  <!-- Visual Texture Layer -->
  <div
    style="position: absolute; inset: 0; pointer-events: none; z-index: 50; opacity: 0.035; mix-blend-mode: multiply; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
  </div>

  <section class="w-full">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 h-auto lg:min-h-[70vh]">

      <!-- Sector 01: Alpine -->
      <div class="relative group overflow-hidden h-96 lg:h-full cursor-pointer bg-[#2d322f]"
        style="animation: animationIn 0.8s ease-out 0.1s both;">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b2bd4dcc-aeba-42b1-a228-8e7aea6025f4_3840w.webp?w=800&q=80" alt="Alpine" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
        <div class="absolute inset-0 bg-gradient-to-t from-[#1e2420]/80 to-transparent pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 p-8 z-20 pointer-events-none">
          <span class="font-display text-xs text-white/70 uppercase tracking-[0.2em] mb-2 block drop-shadow-md">Sector 01</span>
          <h3
            class="font-display text-4xl lg:text-5xl font-semibold text-white uppercase tracking-tighter drop-shadow-lg">
            Alpine</h3>
        </div>
        <div
          class="absolute inset-y-0 right-0 w-[70%] md:w-[60%] bg-[#414f3f]/90 backdrop-blur-md translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out z-10 flex flex-col justify-end p-8 border-l border-white/10">
          <div class="w-0 group-hover:w-full h-px bg-white/40 mb-6 transition-all duration-700 delay-300 ease-out">
          </div>
          <p
            class="text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-400 leading-relaxed font-medium">
            High altitude protection and vertical mobility engineered for structural integrity in sub-zero ascents.
          </p>
        </div>
      </div>

      <!-- Sector 02: Trail -->
      <div class="relative group overflow-hidden h-96 lg:h-full cursor-pointer bg-[#2d322f]"
        style="animation: animationIn 0.8s ease-out 0.2s both;">
        <img src="https://images.unsplash.com/photo-1682686581854-5e71f58e7e3f?w=1600&q=80" alt="Trail" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
        <div class="absolute inset-0 bg-gradient-to-t from-[#1e2420]/80 to-transparent pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 p-8 z-20 pointer-events-none">
          <span class="font-display text-xs text-white/70 uppercase tracking-[0.2em] mb-2 block drop-shadow-md">Sector 02</span>
          <h3
            class="font-display text-4xl lg:text-5xl font-semibold text-white uppercase tracking-tighter drop-shadow-lg">
            Trail</h3>
        </div>
        <div
          class="absolute inset-y-0 right-0 w-[70%] md:w-[60%] bg-[#414f3f]/90 backdrop-blur-md translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out z-10 flex flex-col justify-end p-8 border-l border-white/10">
          <div class="w-0 group-hover:w-full h-px bg-white/40 mb-6 transition-all duration-700 delay-300 ease-out">
          </div>
          <p
            class="text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-400 leading-relaxed font-medium">
            Rapid movement configurations optimized for variable ground elements and sudden microclimate shifts.
          </p>
        </div>
      </div>

      <!-- Sector 03: Snow -->
      <div class="relative group overflow-hidden h-96 lg:h-full cursor-pointer bg-[#2d322f]"
        style="animation: animationIn 0.8s ease-out 0.3s both;">
        <img src="https://images.unsplash.com/photo-1507534192483-69914c0692d7?w=1600&q=80" alt="Snow" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
        <div class="absolute inset-0 bg-gradient-to-t from-[#1e2420]/80 to-transparent pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 p-8 z-20 pointer-events-none">
          <span class="font-display text-xs text-white/70 uppercase tracking-[0.2em] mb-2 block drop-shadow-md">Sector 03</span>
          <h3
            class="font-display text-4xl lg:text-5xl font-semibold text-white uppercase tracking-tighter drop-shadow-lg">
            Snow</h3>
        </div>
        <div
          class="absolute inset-y-0 right-0 w-[70%] md:w-[60%] bg-[#414f3f]/90 backdrop-blur-md translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out z-10 flex flex-col justify-end p-8 border-l border-white/10">
          <div class="w-0 group-hover:w-full h-px bg-white/40 mb-6 transition-all duration-700 delay-300 ease-out">
          </div>
          <p
            class="text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-400 leading-relaxed font-medium">
            Extreme thermal isolation layering, providing deep powder resistance and critical core temperature
            maintenance.
          </p>
        </div>
      </div>

      <!-- Sector 04: Remote -->
      <div class="relative group overflow-hidden h-96 lg:h-full cursor-pointer bg-[#2d322f]"
        style="animation: animationIn 0.8s ease-out 0.4s both;">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/55bcfcb3-26eb-42a7-bc3a-e52dab7df5c1_3840w.jpg?w=800&q=80" alt="Remote" class="absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
        <div class="absolute inset-0 bg-gradient-to-t from-[#1e2420]/80 to-transparent pointer-events-none"></div>
        <div class="absolute bottom-0 left-0 p-8 z-20 pointer-events-none">
          <span class="font-display text-xs text-white/70 uppercase tracking-[0.2em] mb-2 block drop-shadow-md">Sector 04</span>
          <h3
            class="font-display text-4xl lg:text-5xl font-semibold text-white uppercase tracking-tighter drop-shadow-lg">
            Remote</h3>
        </div>
        <div
          class="absolute inset-y-0 right-0 w-[70%] md:w-[60%] bg-[#414f3f]/90 backdrop-blur-md translate-x-full group-hover:translate-x-0 transition-transform duration-500 ease-out z-10 flex flex-col justify-end p-8 border-l border-white/10">
          <div class="w-0 group-hover:w-full h-px bg-white/40 mb-6 transition-all duration-700 delay-300 ease-out">
          </div>
          <p
            class="text-white text-sm opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-400 leading-relaxed font-medium">
            Long-range isolation systems engineered for autonomous survival beyond mapped terrain.
          </p>
        </div>
      </div>

    </div>
  </section>
</div>