Scrolling Partner Logos Marquee Section

<section class="border-y overflow-hidden bg-black/30 border-white/5 pt-10 pb-10"
  style="mask-image: linear-gradient(90deg, transparent, black 55%, black 55%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 55%, black 55%, transparent);">
  <div class="max-w-7xl mx-auto px-6">
    <p class="text-center text-xs font-medium text-neutral-500 uppercase tracking-widest mb-8">
      Powering world-class editorial teams
    </p>
    <div class="relative flex overflow-x-hidden group">
      <div
        class="animate-marquee whitespace-nowrap flex gap-16 items-center opacity-50 grayscale hover:grayscale-0 transition-all duration-500">
        <!-- Logo placeholders using text for minimalism as per request -->
        <span class="text-xl font-semibold tracking-tight">ACME Corp</span>
        <span class="text-xl font-bold tracking-tighter italic">
              Veridian
            </span>
        <span class="text-xl font-black tracking-tight">KYBER</span>
        <span class="text-xl font-medium tracking-wide">Lumina.ai</span>
        <span class="text-xl font-bold font-serif">Vogue</span>
        <span class="text-xl font-semibold tracking-tight">Stripe</span>
        <span class="text-xl font-bold tracking-tighter italic">
              Linear
            </span>
        <span class="text-xl font-black tracking-tight">Raycast</span>
        <!-- Repeat for infinite scroll illusion -->
        <span class="text-xl font-semibold tracking-tight">ACME Corp</span>
        <span class="text-xl font-bold tracking-tighter italic">
              Veridian
            </span>
        <span class="text-xl font-black tracking-tight">KYBER</span>
        <span class="text-xl font-medium tracking-wide">Lumina.ai</span>
      </div>
      <style>
        .animate-marquee {
          animation: marquee 25s linear infinite;
        }

        @keyframes marquee {
          0% {
            transform: translateX(0);
          }

          100% {
            transform: translateX(-50%);
          }
        }
      </style>
    </div>
  </div>
</section>