Pause-on-Hover Marquee

<!--
  play-state:paused on hover AND focus-within: the pause has to be reachable by
  keyboard too, so the items are links and tabbing into one stops the loop. That
  is what lets a reader actually click a moving target.
-->
<style>
  @keyframes marquee-pause-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section class="w-full overflow-hidden py-6" aria-label="Browse categories">
  <div class="flex w-max animate-[marquee-pause-scroll_30s_linear_infinite] [animation-play-state:running] hover:[animation-play-state:paused] focus-within:[animation-play-state:paused] motion-reduce:w-full motion-reduce:animate-none">
    <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-3 motion-reduce:pr-0">
      <li><a href="#" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">Design</a></li>
      <li><a href="#" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">Engineering</a></li>
      <li><a href="#" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">Product</a></li>
      <li><a href="#" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:border-gray-300 hover:text-gray-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:text-gray-100 dark:focus-visible:ring-blue-400">Marketing</a></li>
    </ul>
    <ul class="flex shrink-0 items-center gap-3 pr-3 motion-reduce:hidden" aria-hidden="true">
      <li><a href="#" tabindex="-1" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Design</a></li>
      <li><a href="#" tabindex="-1" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Engineering</a></li>
      <li><a href="#" tabindex="-1" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Product</a></li>
      <li><a href="#" tabindex="-1" class="inline-flex whitespace-nowrap rounded-full border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300">Marketing</a></li>
    </ul>
  </div>
</section>