/* fx-marquee: an endless strip of short facts, review lines or logos. Pauses on hover/focus, off screen and with the
   button (WCAG 2.2.2). Reduced motion: a still, swipeable row. Only for content that carries information. */
[data-fx~="marquee"]{position:relative;overflow:hidden;--mq-gap:48px;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
[data-fx~="marquee"] .mq-track{display:flex;gap:var(--mq-gap);width:max-content;padding-right:var(--mq-gap);list-style:none;margin:0;padding-left:0}
[data-fx~="marquee"] .mq-track>*{flex:none}
[data-fx~="marquee"].mq-on .mq-track{animation:fxMq var(--mq-dur,40s) linear infinite}
[data-fx~="marquee"][data-dir="right"].mq-on .mq-track{animation-direction:reverse}
[data-fx~="marquee"].mq-on:hover .mq-track,[data-fx~="marquee"].mq-on:focus-within .mq-track,[data-fx~="marquee"].mq-paused .mq-track,[data-fx~="marquee"].mq-off .mq-track{animation-play-state:paused}
@keyframes fxMq{to{transform:translateX(-50%)}}
/* the pause control sits in its own end cap so it never covers words */
.mq-wrap{display:flex;align-items:center;gap:10px}.mq-wrap>[data-fx~="marquee"]{flex:1;min-width:0}
.mq-btn{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;opacity:.75}
.mq-btn:hover{opacity:1}.mq-btn svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){[data-fx~="marquee"]{overflow-x:auto;-webkit-mask:none;mask:none;scroll-snap-type:x proximity}[data-fx~="marquee"] .mq-track{animation:none!important}.mq-btn{display:none}}