Announcement Bar Marquee

<!--
  A slim full-width banner that loops short messages. The bar owns a solid blue
  surface, so its white text clears AA on any page behind it - no scrim needed.
-->
<style>
  @keyframes marquee-announce-scroll {
    to { transform: translateX(-50%); }
  }
</style>

<section class="w-full overflow-hidden bg-blue-600 py-2 text-white dark:bg-blue-700" aria-label="Announcements">
  <div class="flex w-max animate-[marquee-announce-scroll_26s_linear_infinite] motion-reduce:w-full motion-reduce:animate-none">
    <div class="flex shrink-0 items-center motion-reduce:w-full motion-reduce:flex-wrap motion-reduce:justify-center motion-reduce:gap-y-1">
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Version 3.0 is live</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70" aria-hidden="true"></span></span>
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Free shipping over $50</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70" aria-hidden="true"></span></span>
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Join 10,000+ teams</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70" aria-hidden="true"></span></span>
    </div>
    <div class="flex shrink-0 items-center motion-reduce:hidden" aria-hidden="true">
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Version 3.0 is live</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70"></span></span>
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Free shipping over $50</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70"></span></span>
      <span class="inline-flex shrink-0 items-center gap-4 pr-4"><span class="whitespace-nowrap text-sm font-medium">Join 10,000+ teams</span><span class="h-1.5 w-1.5 shrink-0 rounded-full bg-white/70"></span></span>
    </div>
  </div>
</section>