/* ============================================================
   marquee.css — two edge-faded rows of auto-scrolling chips
   ============================================================ */

.marquee-sec  { margin-top: var(--space-24); overflow: hidden; }
.marquee-lead { text-align: center; margin-bottom: var(--space-8); }

/* Full-bleed rows with a soft fade at both edges. */
.marquee      { overflow: hidden;
                -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
                        mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }

/* Spacing lives on each chip (margin-right) rather than flex gap, so the
   -50% loop point lands exactly on a chip boundary — no seam or jump. */
.mq-track     { display: inline-flex; white-space: nowrap;
                will-change: transform; animation: mq-scroll 46s linear infinite; }
.mq-track > * { margin-right: var(--space-3); }
/* Chips recolor to primary instantly on hover — no fade. An animated recolor would
   repaint the composited track every frame and jar the moving row. */
.mq-track .button { transition: none; }
.mq-track.rev { animation-duration: 58s; animation-direction: reverse; margin-top: var(--space-3); }
.marquee-sec:hover .mq-track { animation-play-state: paused; }

@keyframes mq-scroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
}