/* Brands carousel: continuous marquee using duplicated logo set
   Assumes the HTML contains two copies of the logo list so the track
   can translate by -50% to produce a seamless loop. */

.brands-icons {
    --gap: 1.5rem;
    overflow: hidden;
    width: auto;
}

.brands-track {
    display: flex;
    gap: var(--gap);
    align-items: center;
    white-space: nowrap;
    /* Duration scales with number of unique logos (set via --logo-count inline) */
    animation: brands-scroll calc(var(--logo-count, 16) * 0.8s) linear infinite;
    /* play animation in reverse so the carousel moves the other way */
    animation-direction: reverse;
    will-change: transform;
}

.brands-track img {
    display: block;
    height: 40px;
    width: auto;
}

.brands-icons:hover .brands-track {
    animation-play-state: paused;
}

@keyframes brands-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Responsive: reduce gap and image size on small screens */
@media (max-width: 720px) {
    .brands-track { gap: 0.75rem; }
    .brands-track img { height: 32px; }
}