/*
 * Marquee — a row of cards that runs slowly from right to left in an endless loop (reference: home-carousel-group on risd.edu).
 * Markup: <section data-marquee> … <div data-marquee-viewport><ul> cards </ul></div>. js/marquee.js repeats the cards, duplicates
 * the set and sets --marquee-duration; the animation moves the track by exactly one set (-50%), so the loop has no jump.
 * Cards need `margin-right` (not `gap`) so that one set is exactly half of the track. The page CSS decides where the viewport
 * begins (the cards leave through its left edge) and how the cards look.
 */

[data-marquee-viewport] { overflow: hidden; touch-action: pan-y; } /* vertical scroll stays native, a horizontal drag is handled by js/marquee.js */

[data-marquee-viewport] > * {
    display:     flex;
    width:       max-content;
    margin:      0;
    padding:     0;
    list-style:  none;
    will-change: transform; /* moved by js/marquee.js */
}

/* Controls: previous / pause-resume / next (created by js/marquee.js, colour follows the section) */
.marquee-controls {
    display:    flex;
    gap:        8px;
    margin-top: 24px;
}
.marquee-controls__btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    padding:         0;
    color:           inherit;
    background:      transparent;
    border:          1px solid currentColor;
    border-radius:   var(--radius);
    cursor:          pointer;
    opacity:         .5;
    transition:      opacity var(--transition), background-color var(--transition);
}
.marquee-controls__btn:hover,
.marquee-controls__btn:focus-visible { opacity: 1; }
.marquee-controls__btn[aria-pressed="true"] { opacity: 1; }

/* Without motion the cards stay still and can be scrolled by hand */
@media (prefers-reduced-motion: reduce) {
    [data-marquee-viewport] { overflow-x: auto; scrollbar-width: none; }
    [data-marquee-viewport]::-webkit-scrollbar { display: none; }
}