Animated Headphone Collection Product Grid

<section id="collection" class="bg-[#fdfdfd] text-neutral-900 py-24 md:py-32 relative overflow-hidden">
  <!-- Required Scripts & External Resources -->
  <script src="https://code.iconify.design/3/3.1.0/iconify.min.js"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
  <link
    href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap"
    rel="stylesheet">

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

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

    .animate-on-scroll {
      opacity: 0;
    }

    .animate-on-scroll.animate {
      animation: animationIn 0.8s ease-out forwards;
      opacity: 1;
    }

    .font-bricolage {
      font-family: 'Bricolage Grotesque', sans-serif;
    }

    .font-serif {
      font-family: 'Playfair Display', serif;
    }
  </style>

  <!-- Section Number Decor -->
  <div
    class="absolute top-12 left-6 md:left-12 z-0 opacity-10 font-bricolage font-bold text-[12rem] leading-none text-black pointer-events-none select-none">
    02
  </div>

  <!-- Background Pattern Overlay -->
  <div class="absolute inset-0 opacity-[0.03] pointer-events-none"
    style="background-image: radial-gradient(#000 1px, transparent 1px); background-size: 32px 32px;"></div>

  <div class="w-full max-w-7xl mx-auto px-6 md:px-12 relative z-10">
    <!-- Header Area -->
    <div class="flex flex-col md:flex-row justify-between items-start md:items-end mb-20 gap-8 animate-on-scroll"
      style="animation-delay: 0.1s;">
      <div>
        <span class="text-xs uppercase tracking-[0.3em] text-neutral-400 font-medium mb-4 block">Storefront</span>
        <h2 class="text-5xl md:text-7xl leading-[0.95] tracking-tighter font-bricolage font-light text-neutral-900">
          Define Your <br>
          <span class="text-neutral-300 font-bricolage font-light">Zone.</span>
        </h2>
      </div>

      <div class="flex gap-8 items-baseline border-b border-neutral-100 pb-2">
        <button class="text-2xl md:text-3xl text-neutral-900 font-bricolage font-light border-b-2 border-black pb-1">Wireless</button>
        <button class="text-2xl md:text-3xl text-neutral-300 hover:text-neutral-500 transition-colors font-bricolage font-light pb-1">Studio</button>
        <button class="text-2xl md:text-3xl text-neutral-300 hover:text-neutral-500 transition-colors font-bricolage font-light pb-1">IEMs</button>
      </div>
    </div>

    <!-- Product Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Sony Card -->
      <div
        class="group relative h-[520px] w-full bg-[#151515] rounded-[32px] overflow-hidden flex flex-col justify-between p-8 transition-transform duration-500 hover:-translate-y-2 hover:shadow-2xl animate-on-scroll"
        style="animation-delay: 0.2s;">
        <div class="absolute top-0 right-0 p-6 opacity-40 z-20 group-hover:opacity-100 transition-opacity">
          <div
            class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center bg-white/5 backdrop-blur-sm text-white">
            <iconify-icon icon="solar:arrow-right-up-linear" width="24"></iconify-icon>
          </div>
        </div>
        <div class="absolute inset-0 w-full h-full">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/d0132965-d635-4cc3-96b9-5b6a4ca43505_800w.webp" class="w-full h-full object-cover opacity-80 group-hover:scale-105 transition-transform duration-700" alt="Sony Headphones">
          <div class="absolute inset-0 bg-gradient-to-t from-[#151515] via-transparent to-transparent"></div>
        </div>
        <div class="mt-auto relative z-10">
          <div class="mb-4">
            <iconify-icon icon="simple-icons:sony" width="64" height="24" class="text-white/80"></iconify-icon>
          </div>
          <h3 class="text-white text-3xl tracking-tight leading-none mb-4 font-bricolage font-light">WH-1000XM5</h3>
          <div class="flex justify-between items-center text-white/90 border-t border-white/10 pt-5">
            <span class="text-xl font-serif italic">$348.00</span>
            <span class="text-xs tracking-wide uppercase text-white/50">Noise Canceling</span>
          </div>
        </div>
      </div>

      <!-- Apple Card -->
      <div
        class="group relative h-[520px] w-full bg-[#151515] rounded-[32px] overflow-hidden flex flex-col justify-between p-8 transition-transform duration-500 hover:-translate-y-2 hover:shadow-2xl animate-on-scroll"
        style="animation-delay: 0.3s;">
        <div class="absolute top-0 right-0 p-6 opacity-40 z-20 group-hover:opacity-100 transition-opacity">
          <div
            class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center bg-white/5 backdrop-blur-sm text-white">
            <iconify-icon icon="solar:arrow-right-up-linear" width="24"></iconify-icon>
          </div>
        </div>
        <div class="absolute inset-0 w-full h-full">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/c45e189e-5294-4568-b996-758eaf785907_800w.webp" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-90" alt="AirPods Max">
          <div class="absolute inset-0 bg-gradient-to-t from-[#151515] via-transparent to-transparent"></div>
        </div>
        <div class="mt-auto relative z-10">
          <div class="mb-4">
            <iconify-icon icon="simple-icons:apple" width="28" height="28" class="text-white/80"></iconify-icon>
          </div>
          <h3 class="text-white text-3xl tracking-tight leading-none mb-4 font-bricolage font-light">AirPods Max</h3>
          <div class="flex justify-between items-center text-white/90 border-t border-white/10 pt-5">
            <span class="text-xl font-serif italic">$549.00</span>
            <span class="text-xs tracking-wide uppercase text-white/50">Spatial Audio</span>
          </div>
        </div>
      </div>

      <!-- Bose Card -->
      <div
        class="group relative h-[520px] w-full bg-[#151515] rounded-[32px] overflow-hidden flex flex-col justify-between p-8 transition-transform duration-500 hover:-translate-y-2 hover:shadow-2xl animate-on-scroll"
        style="animation-delay: 0.4s;">
        <div class="absolute top-0 right-0 p-6 opacity-40 z-20 group-hover:opacity-100 transition-opacity">
          <div
            class="w-12 h-12 rounded-full border border-white/20 flex items-center justify-center bg-white/5 backdrop-blur-sm text-white">
            <iconify-icon icon="solar:arrow-right-up-linear" width="24"></iconify-icon>
          </div>
        </div>
        <div class="absolute inset-0 w-full h-full">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f1d42919-2b84-4a2a-96bd-c8853e0e8143_800w.webp" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700 opacity-80" alt="Bose Headphones">
          <div class="absolute inset-0 bg-gradient-to-t from-[#151515] via-transparent to-transparent"></div>
        </div>
        <div class="mt-auto relative z-10">
          <div class="mb-4">
            <iconify-icon icon="simple-icons:bose" width="64" height="24" class="text-white/80"></iconify-icon>
          </div>
          <h3 class="text-white text-3xl tracking-tight leading-none mb-4 font-bricolage font-light">QC Ultra</h3>
          <div class="flex justify-between items-center text-white/90 border-t border-white/10 pt-5">
            <span class="text-xl font-serif italic">$429.00</span>
            <span class="text-xs tracking-wide uppercase text-white/50">Immersion Mode</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Bottom Action -->
    <div class="mt-16 flex justify-center animate-on-scroll" style="animation-delay: 0.5s;">
      <button class="group flex items-center gap-3 px-8 py-4 bg-neutral-900 text-white rounded-full hover:bg-neutral-800 transition-all shadow-lg hover:shadow-xl">
                <span class="font-bricolage font-medium tracking-wide">View Full Collection</span>
                <iconify-icon icon="solar:arrow-right-linear" width="20" class="group-hover:translate-x-1 transition-transform"></iconify-icon>
            </button>
    </div>
  </div>

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

            document.querySelectorAll('#collection .animate-on-scroll').forEach(el => {
                observer.observe(el);
            });
        })();
  </script>
</section>