Vertical Scroll Marquee

<!--
  Vertical variant: the track is a column and the transform is on Y. The
  viewport has a fixed height and clips; each group's pb-3 mirrors its gap-3 so
  the vertical seam is invisible. Reduced motion turns the strip into a normal
  scrollable list (overflow-y-auto) and drops the clone.
-->
<style>
  @keyframes marquee-vertical-scroll {
    to { transform: translateY(-50%); }
  }
</style>

<section class="h-64 w-full overflow-hidden motion-reduce:overflow-y-auto" aria-label="Latest activity">
  <div class="flex flex-col animate-[marquee-vertical-scroll_22s_linear_infinite] motion-reduce:animate-none">
    <ul class="flex flex-col gap-3 pb-3 motion-reduce:pb-0">
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden="true"></span>Maya deployed to production</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden="true"></span>New signup from Berlin</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden="true"></span>Invoice #4021 paid</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500" aria-hidden="true"></span>Nightly backup completed</li>
    </ul>
    <ul class="flex flex-col gap-3 pb-3 motion-reduce:hidden" aria-hidden="true">
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>Maya deployed to production</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>New signup from Berlin</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>Invoice #4021 paid</li>
      <li class="flex items-center gap-3 rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-300"><span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>Nightly backup completed</li>
    </ul>
  </div>
</section>