Logos Marquee Strip

<!--
  Tailwind cannot declare @keyframes, so they travel in a <style> block. The
  loop: two identical groups on a w-max track, slid by -50%. Each group's
  pr-12 mirrors its gap-12 so the seam between the copies is invisible.
  Reduced motion turns the strip into a static wrapped row and drops the clone.
-->
<style>
  @keyframes marquee-logos-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section class="w-full overflow-hidden py-8" aria-label="Trusted by these companies">
  <div class="flex w-max animate-[marquee-logos-scroll_32s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
    <ul class="flex shrink-0 items-center gap-12 pr-12 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-4 motion-reduce:pr-0">
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Adysre Corp</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Northwind</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Globex</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Initech</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Umbrella</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Stark Labs</li>
    </ul>
    <ul class="flex shrink-0 items-center gap-12 pr-12 motion-reduce:hidden" aria-hidden="true">
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Adysre Corp</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Northwind</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Globex</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Initech</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Umbrella</li>
      <li class="whitespace-nowrap text-lg font-semibold tracking-tight text-gray-500 dark:text-gray-400">Stark Labs</li>
    </ul>
  </div>
</section>