The trick is duplication: the track holds every item twice, and the animation slides it exactly half its own width. At that point the second copy sits where the first one started, so the loop restarts on an identical frame and you never see a seam. The - 6px accounts for half of the gap between the two copies.
The mask fades the edges, and hovering or focusing inside pauses the strip so people can read it. Anything that moves on its own for more than five seconds should also have a way to stop it (WCAG 2.2.2), which is what the Pause button is for. The copies get aria-hidden="true", so screen readers read the list once.
With reduced motion on, the strip keeps moving at a much slower pace instead of stopping. Change --marquee-duration to tune the speed.