/* =========================================================
   Marquee: names scroll in from the right, edges fade out

   Default state: a plain, wrapped list of names (what crawlers,
   no-JS visitors and reduced-motion visitors get).
   marquee.js adds .is-ready to turn it into the scrolling version.
   ========================================================= */

.marquee__track {
    display: flex;
}

.marquee__group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    row-gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---------- Scrolling version ---------- */
.marquee.is-ready {
    overflow: hidden;
    /* Fades both edges to transparent, so it works on any background */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 12%,
        #000 88%,
        transparent 100%
    );
}

.marquee.is-ready .marquee__track {
    width: max-content;
    animation: marquee-scroll var(--marquee-duration, 40s) linear infinite;
    will-change: transform;
}

/* Pause while hovering so names can be read */
.marquee.is-ready:hover .marquee__track {
    animation-play-state: paused;
}

.marquee.is-ready .marquee__group {
    flex-wrap: nowrap;
    flex-shrink: 0;
    justify-content: flex-start;
    width: auto;
}

/* Two identical groups sit side by side, so moving by -50% loops seamlessly */
@keyframes marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee.is-ready .marquee__track {
        animation: none;
    }
}