Logo Strip Marquee

<!-- An infinite logo marquee with no assets: each logo is a gradient chip with
     initials. The list is rendered twice and the track slides -50%, so the loop
     is seamless. It pauses on hover and, under reduced motion, stops entirely -
     the wrapper is scrollable so the logos stay reachable when the motion is off. -->
<section class="group max-w-3xl overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" aria-roledescription="carousel" aria-label="Trusted by leading teams">
  <style>@keyframes adysreLogoScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}</style>
  <div class="flex w-max [animation:adysreLogoScroll_24s_linear_infinite] group-hover:[animation-play-state:paused] motion-reduce:[animation-play-state:paused]">
    <ul class="flex shrink-0 items-center gap-8 pr-8">
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 text-sm font-semibold text-white">Acme</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-indigo-600 to-violet-600 text-sm font-semibold text-white">Globex</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-teal-700 to-sky-700 text-sm font-semibold text-white">Initech</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-rose-600 to-orange-500 text-sm font-semibold text-white">Umbrella</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-emerald-600 to-teal-600 text-sm font-semibold text-white">Hooli</span></li>
    </ul>
    <ul class="flex shrink-0 items-center gap-8 pr-8" aria-hidden="true">
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-blue-600 to-indigo-600 text-sm font-semibold text-white">Acme</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-indigo-600 to-violet-600 text-sm font-semibold text-white">Globex</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-teal-700 to-sky-700 text-sm font-semibold text-white">Initech</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-rose-600 to-orange-500 text-sm font-semibold text-white">Umbrella</span></li>
      <li><span class="grid h-12 w-24 place-items-center rounded-lg bg-gradient-to-br from-emerald-600 to-teal-600 text-sm font-semibold text-white">Hooli</span></li>
    </ul>
  </div>
</section>