Posture Science Feature Section with Flashlight Cards

<div id="section-3-container" class="relative">
  <style>
    .card-flashlight {
      position: relative;
      border-radius: 1rem;
      background: rgba(255, 255, 255, 0.4);
      backdrop-filter: blur(12px);
      border: 1px solid rgba(0, 0, 0, 0.05);
      overflow: hidden;
      transition: transform 0.3s ease;
    }

    .card-flashlight::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.8), transparent 40%);
      z-index: 0;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .card-flashlight::after {
      content: "";
      position: absolute;
      inset: 0;
      padding: 1px;
      border-radius: inherit;
      background: radial-gradient(400px circle at var(--mouse-x) var(--mouse-y), rgba(0, 0, 0, 0.15), transparent 40%);
      -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      z-index: 1;
      opacity: 0;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }

    .card-flashlight:hover::before,
    .card-flashlight:hover::after {
      opacity: 1;
    }

    @keyframes sonar {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(2.5);
        opacity: 0;
      }
    }

    .sonar-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid currentColor;
      animation: sonar 2s cubic-bezier(0, 0, 0.2, 1) infinite;
      pointer-events: none;
    }
  </style>

  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <!-- Transition Feature -->
  <section class="relative h-[80vh] w-full overflow-hidden flex items-center justify-center group">
    <div class="absolute inset-0 bg-black/20 z-10 transition-colors group-hover:bg-black/10"></div>
    <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/b9fef1af-7076-41f8-94ac-87cf3a20563d_3840w.jpg"
         alt="Human Mechanics"
         class="webgl-reveal absolute inset-0 w-full h-full object-cover scale-105 group-hover:scale-100 transition-transform duration-1000 ease-out">
    <div class="relative z-20 text-center text-white max-w-3xl px-6">
      <h2 class="text-4xl md:text-5xl tracking-tight mb-6 leading-tight drop-shadow-lg font-light"
        style="font-family: 'Plus Jakarta Sans', sans-serif;">
        Engineered around human mechanics, anticipating your movement before you make it.
      </h2>
      <div class="flex items-center justify-center gap-3 text-lg opacity-90 drop-shadow-md">
        <div class="w-8 h-[1px] bg-white/60"></div>
        <p style="font-family: 'Geist Sans', sans-serif;">Metrics indicate 98% optimal spinal alignment.</p>
        <div class="w-8 h-[1px] bg-white/60"></div>
      </div>
    </div>
  </section>

  <!-- Scientific Specifications -->
  <section class="py-32 bg-[#F2EFEA]">
    <div class="max-w-[88rem] mx-auto px-6 lg:px-12">
      <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-24 gap-8">
        <h2 class="text-5xl md:text-6xl tracking-tighter font-light"
          style="font-family: 'Plus Jakarta Sans', sans-serif;">The Science of<br>Posture</h2>
        <a href="#"
          class="inline-flex items-center gap-2 bg-[#2C2824] text-[#F2EFEA] px-6 py-3 rounded-full text-sm font-medium transition-transform hover:scale-105">
          <span style="font-family: 'Geist Sans', sans-serif;">Explore Specifications</span>
          <iconify-icon icon="solar:arrow-right-up-linear"></iconify-icon>
        </a>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-start">
        <div class="lg:col-span-4 max-w-sm">
          <p class="text-sm font-medium tracking-tight opacity-50 mb-4 uppercase"
            style="font-family: 'Geist Sans', sans-serif;">( Method )</p>
          <p class="text-xl leading-relaxed opacity-90 mb-8 font-light"
            style="font-family: 'Plus Jakarta Sans', sans-serif;">
            Every structural decision serves a biomechanical purpose. Materials are tested for dynamic tension, ensuring
            longevity without aesthetic compromise.
          </p>
          <div class="relative inline-flex text-[#C48C56] mt-4">
            <iconify-icon icon="solar:asterisk-bold-duotone" class="text-3xl"></iconify-icon>
            <div class="sonar-ring"></div>
          </div>
        </div>

        <div class="lg:col-span-8 grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12 items-end">
          <div class="card-flashlight p-6 pb-8 flex flex-col group cursor-pointer">
            <div class="relative z-10">
              <div class="aspect-square rounded-lg overflow-hidden bg-black/5 mb-6 relative">
                <img src="https://images.unsplash.com/photo-1592078615290-033ee584e267?q=80&w=1000&auto=format&fit=crop"
                     alt="Lounge Detail"
                     class="webgl-reveal w-full h-full object-cover mix-blend-multiply transition-transform duration-700 group-hover:scale-110">
              </div>
              <div class="flex justify-between items-end text-sm">
                <div>
                  <span class="opacity-50 text-xs block mb-1" style="font-family: 'Geist Sans', sans-serif;">01</span>
                  <p class="font-medium tracking-tight" style="font-family: 'Geist Sans', sans-serif;">Kinetic Lounge V1
                  </p>
                </div>
                <span class="opacity-60" style="font-family: 'Geist Sans', sans-serif;">240 Units</span>
              </div>
            </div>
          </div>

          <div class="card-flashlight p-6 pb-8 flex flex-col group cursor-pointer lg:-mt-24">
            <div class="relative z-10">
              <div class="aspect-[4/5] rounded-lg overflow-hidden bg-black/5 mb-6 relative">
                <img src="https://images.unsplash.com/photo-1567538096630-e0c55bd6374c?q=80&w=1000&auto=format&fit=crop"
                     alt="Accent Detail"
                     class="webgl-reveal w-full h-full object-cover mix-blend-multiply transition-transform duration-700 group-hover:scale-110">
              </div>
              <div class="flex justify-between items-end text-sm">
                <div>
                  <span class="opacity-50 text-xs block mb-1" style="font-family: 'Geist Sans', sans-serif;">02</span>
                  <p class="font-medium tracking-tight" style="font-family: 'Geist Sans', sans-serif;">Architectural
                    Accent</p>
                </div>
                <span class="opacity-60" style="font-family: 'Geist Sans', sans-serif;">850+ Units</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script>
    (function() {
      const updateFlashlight = (e) => {
        const card = e.currentTarget;
        const rect = card.getBoundingClientRect();
        card.style.setProperty('--mouse-x', `${e.clientX - rect.left}px`);
        card.style.setProperty('--mouse-y', `${e.clientY - rect.top}px`);
      };
      document.querySelectorAll('.card-flashlight').forEach(card => {
        card.addEventListener('mousemove', updateFlashlight);
      });
      const images = document.querySelectorAll('.webgl-reveal');
      const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            entry.target.style.opacity = "1";
            entry.target.style.transform = "translateY(0) scale(1)";
            observer.unobserve(entry.target);
          }
        });
      }, { threshold: 0.1 });
      images.forEach(img => {
        img.style.opacity = "0";
        img.style.transform = "translateY(20px) scale(1.05)";
        img.style.transition = "opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), transform 1.4s cubic-bezier(0.16, 1, 0.3, 1)";
        observer.observe(img);
      });
    })();
  </script>
</div>