/* marquee.css — seamless ticker (hamstercult, mamesuke, hellodotfun, fkc). Duplicate the group once inside .mq-track.
   <div class="mq" style="--speed:30s"><div class="mq-track"><span>WORD ✦</span>…(group)…(same group again, aria-hidden)</div></div>
   Variants: .mq--rev (other direction), .mq--tilt (rotated tape), .mq--pause-hover. Pauses off-screen when scroll-reveal.js marks [data-onscreen=false]. */
.mq{overflow:hidden;white-space:nowrap;border-block:3px solid var(--ink-dark,#000);background:var(--accent,#c2ff20);color:var(--accent-ink,#000);
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:inline-flex;width:max-content;animation:mq-crawl var(--speed,28s) linear infinite}
.mq-track>*{padding:.55em 1.2em;font:800 clamp(1rem,2vw,1.6rem)/1 var(--font-display,Impact);text-transform:uppercase;letter-spacing:.02em}
.mq--rev .mq-track{animation-direction:reverse}
.mq--tilt{transform:rotate(-1.6deg);margin-block:-.5rem}
.mq--pause-hover:hover .mq-track,[data-onscreen="false"] .mq-track,.mq[data-onscreen="false"] .mq-track{animation-play-state:paused}
@keyframes mq-crawl{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}}