/* fx/marquee — oneindige horizontale loop, pure CSS.
   Markup: <div class="fx-marquee"><div class="fx-marquee__track"> …items… </div></div>
   Dupliceer de items exact één keer in de track (voor een naadloze loop).
   Snelheid via --fx-marquee-dur; richting via .fx-marquee--reverse. */
.fx-marquee{overflow:hidden;--fx-marquee-dur:32s}
.fx-marquee__track{
  display:flex;width:max-content;gap:var(--fx-marquee-gap,1.5rem);
  animation:fx-marquee var(--fx-marquee-dur) linear infinite;
}
.fx-marquee--reverse .fx-marquee__track{animation-direction:reverse}
.fx-marquee:hover .fx-marquee__track{animation-play-state:paused}
@keyframes fx-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .fx-marquee__track{animation:none;flex-wrap:nowrap;overflow-x:auto}
}