:root{--marquee-speed: 100s;--marquee-hover-offset: -50px;--marquee-hover-transition-speed: .7s;--marquee-fade-edges: 10%}.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 var(--marquee-fade-edges),#000 calc(100% - var(--marquee-fade-edges)),rgba(0,0,0,0) 100%);mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 var(--marquee-fade-edges),#000 calc(100% - var(--marquee-fade-edges)),rgba(0,0,0,0) 100%)}.marquee,.marquee>div{display:flex;white-space:nowrap;gap:30px}.marquee>div{animation:animate-marquee var(--marquee-speed) infinite linear;transition:var(--marquee-hover-transition-speed) margin-left ease-out;will-change:transform,margin-left}.marquee:hover>div{animation-play-state:paused;margin-left:var(--marquee-hover-offset)}@keyframes animate-marquee{0%{transform:translate(0) translateZ(0)}to{transform:translate(-100%) translateZ(0)}}