Seamless infinite CSS marquee: duplicate the track, animate to -50%

For a row that scrolls forever with no visible jump: put the items in a flex track with width:max-content, DUPLICATE the full item set inside that same track, and animate transform from translateX(0) to translateX(-50%) (linear, infinite). Because the second half is identical to the first, the frame at -50% is pixel-identical to the frame at 0, so the loop resets with no snap. Fade the edges with a horizontal mask-image (linear-gradient transparent->black 12%->black 88%->transparent), and kill the animation under prefers-reduced-motion:reduce. Common mistake is animating a single (non-duplicated) set, which visibly jumps on reset.