.logoloop {
    position: relative;
    width: 100%;
    overflow: hidden;
    --logoloop-gap: 32px;
    --logoloop-logoHeight: 40px;
    --logoloop-fadeColor: #0b0b0b;
}

.logoloop__track {
    display: flex;
    width: max-content;
    will-change: transform;
    user-select: none;
    position: relative;
    z-index: 0;
    align-items: center;
    /* Use CSS animation for better mobile performance */
    animation: logoloop-scroll var(--logoloop-duration, 30s) linear infinite;
}

.logoloop:hover .logoloop__track {
    animation-play-state: paused;
}

@keyframes logoloop-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        /* We will set this variable in JS based on the list width */
        transform: translate3d(var(--logoloop-translate-x, -50%), 0, 0);
    }
}


.logoloop__list {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.logoloop__item {
    flex: 0 0 auto;
    margin-right: var(--logoloop-gap);
    display: flex;
    align-items: center;
    justify-content: center;
}

.logoloop__item img {
    height: var(--logoloop-logoHeight);
    width: auto;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

/* Removed grayscale at user request */

/* Fade Effect Removed at user request */
.logoloop--fade::before,
.logoloop--fade::after {
    display: none;
}

/* Hide/Show logic managed in styles.css */