/**
 * Client logo carousel — see js/mx-logos.js.
 *
 * The logos themselves are transparent. They sit on light chips rather than
 * directly on the dark section, because this particular set cannot work any
 * other way: SBM and OTO IMPREZA are navy and disappear on #1d1d1d, while
 * ORLEN paczka and LINK4 have their wordmarks knocked out of a coloured
 * shape, so recolouring them white turns them into solid blobs. A light chip
 * is the only treatment under which all five read, and it keeps brand colours.
 */
.mx-logos {
    position: relative;
    overflow: hidden;
    padding: 28px 0;
    /* Fades the strip into the section instead of cutting logos off sharply. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.mx-logos__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 16px;
    animation: mx-logos-scroll var(--mx-logos-duration, 40s) linear infinite;
}

.mx-logos:hover .mx-logos__track,
.mx-logos:focus-within .mx-logos__track {
    animation-play-state: paused;
}

@keyframes mx-logos-scroll {
    from { transform: translate3d(0, 0, 0); }
    /* The track holds the list twice, so half a turn is a seamless loop. */
    to   { transform: translate3d(-50%, 0, 0); }
}

.mx-logos__item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 200px;
    height: 96px;
    padding: 14px 20px;
    margin: 0;
    background: #fff;
    border-radius: 12px;
}

.mx-logos__item img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    object-fit: contain;
}

@media (max-width: 640px) {
    .mx-logos { padding: 20px 0; }
    .mx-logos__track { gap: 12px; }
    .mx-logos__item {
        width: 152px;
        height: 76px;
        padding: 10px 14px;
    }
}

/* Motion is decoration here; the logos are all reachable without it. */
@media (prefers-reduced-motion: reduce) {
    .mx-logos {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mx-logos__track { animation: none; }
}