:root{--color-text:navy;--color-bg:papayawhip;--color-bg-accent:#ecdcc0;--size:clamp(10rem, 1rem + 40vmin, 30rem);--gap:calc(var(--size) / 14);--duration:60s;--scroll-start:0;--scroll-end:calc(-100% - var(--gap));}
@media (prefers-color-scheme:dark){
:root{--color-text:papayawhip;--color-bg:navy;--color-bg-accent:#2626a0;}
}
*{box-sizing:border-box;}
.marquee{display:flex;overflow:hidden;user-select:none;gap:var(--gap);}
.marquee__group{flex-shrink:0;display:flex;align-items:center;justify-content:space-around;gap:var(--gap);min-width:100%;animation:scroll-x var(--duration) linear infinite;}
@media (prefers-reduced-motion:reduce){
.marquee__group{animation-play-state:paused;}
}
.marquee--vertical{--mask-direction:to bottom;}
.marquee--vertical,.marquee--vertical .marquee__group{flex-direction:column;}
.marquee--vertical .marquee__group{animation-name:scroll-y;}
.marquee--reverse .marquee__group{animation-direction:reverse;animation-delay:-3s;}
@keyframes scroll-x{
from{transform:translateX(var(--scroll-start));}
to{transform:translateX(var(--scroll-end));}
}
@keyframes scroll-y{
from{transform:translateY(var(--scroll-start));}
to{transform:translateY(var(--scroll-end));}
}
.marquee img{border-radius:10px;pointer-events:none;max-width:150px;width:100%;}
.marquee-wrapper{display:flex;flex-direction:column;gap:var(--gap);margin:auto;max-width:100vw;justify-content:center;}
.wrapper--vertical{flex-direction:row;height:560px;}
@keyframes fade{
to{opacity:0;visibility:hidden;}
}