/* The Scroll Container */
.overflow-scroller {
    display: grid;
    gap: 1rem;
    grid-auto-flow: column;
    grid-auto-columns: 200px;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    /* Lets the children query whether the shelf actually overflows (below). */
    container-type: scroll-state;
    /* "safe" falls back to start-aligned when the shelf overflows, so the
       leftmost covers stay reachable; centered only when everything fits. */
    justify-content: safe center;
    margin-block: 1em;
    padding-block: 1em;
}
/* Scrollbar — thin rounded thumb on an invisible track (Chromium/Safari).
   Setting scrollbar-color/-width would disable these pseudo-elements in
   Chromium, so the standard properties live only in the Firefox guard below. */
.overflow-scroller::-webkit-scrollbar {
    height: 8px;
}
.overflow-scroller::-webkit-scrollbar-track {
    background: transparent;
}
.overflow-scroller::-webkit-scrollbar-thumb {
    background: var(--border-2);
    border-radius: 4px;
}
.overflow-scroller::-webkit-scrollbar-thumb:hover {
    background: var(--text-3);
}

/* Firefox: no ::-webkit-scrollbar — recolor the native thin scrollbar. */
@supports not selector(::-webkit-scrollbar) {
    .overflow-scroller {
        scrollbar-color: var(--border-2) transparent;
        scrollbar-width: thin;
    }
}

/* Keyframes for the fade and scale effect */
@keyframes scroller {
    0%, 100% {
        opacity: 0.5;
        scale: 0.5;
    }
    35%, 65% {
        opacity: 1;
        scale: 1;
    }
}

/* The Cards (Children) */
.overflow-scroller > * {
    scroll-snap-align: center;

    /* Animation properties (shorthand first — it resets the timeline) */
    animation: scroller linear both;
    animation-timeline: view(x);
}

/* On screens wide enough to fit every card there's nothing to scroll, so the
   view(x) timeline can't progress and the edge cards would freeze at their
   shrunken keyframes — pin them to full size instead. The override targets the
   animated properties (!important beats keyframes in the cascade), NOT
   animation-*: Chromium treats animation properties that depend on a
   scroll-state query as a potential timeline cycle and disables the whole
   animation. */
@container not scroll-state(scrollable: x) {
    .overflow-scroller > * {
        opacity: 1 !important;
        scale: 1 !important;
    }
}