/* HERO feature strip — an endless left-to-right ticker.
   The markup ships a single .strip-group; main.js clones it until the track
   is wider than the viewport and sets --strip-shift (the distance of exactly
   one group, gap included) plus --strip-dur, so the loop repeats seamlessly.
   Every item carries a leading dot — in a loop there is no "first" item, so a
   uniform separator is what makes the wrap-around invisible.
   -------------------------------------------------------------------------- */
#hero-strip {
    min-height: var(--h-strip);
    background: black;
    color: #fff;
    display: flex;
    align-items: center;
    padding-block: 8px;
    overflow: hidden; /* clips the copies running off both edges */
}

.strip-track {
    display: flex;
    flex: none; /* never shrink to fit — the track is meant to overflow */
    align-items: center;
    gap: 24px;
    width: max-content;
    /* `reverse` runs the keyframes backwards, so the items travel left → right */
    animation: strip-scroll var(--strip-dur, 30s) linear infinite reverse;
}

.strip-group {
    display: flex;
    flex: none;
    align-items: center;
    gap: 24px; /* must match .strip-track's gap to keep spacing even across copies */
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

    /* display:contents lifts the label and its ::before dot into .strip-group's
       flex flow, so the gap spaces dots and labels evenly. */
    #hero-strip .item {
        display: contents;
    }

        #hero-strip .item::before {
            content: "";
            flex: none;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--orange);
        }

/* Falls back to a still strip when JS never sets --strip-shift. */
@keyframes strip-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(calc(-1 * var(--strip-shift, 0px)), 0, 0);
    }
}

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