/* =========================================================
   clients-logos — бегущая строка логотипов клиентов.
   Разметка маркизы (.clients-marquee/.clients-logo) — 1:1 из blocks.css
   (раздел 5. TOOLS, лента клиентов) + оформление standalone-секции.
   ========================================================= */

/* Лента клиентов */
.clients-bar {
    padding: 80px 0 0;
}

.clients-link {
    margin-bottom: 80px;
}

.clients-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.clients-marquee-track {
    display: flex;
    width: max-content;
    animation: clients-scroll 30s linear infinite;
}

.clients-marquee:hover .clients-marquee-track {
    animation-play-state: paused;
}

.clients-marquee-group {
    display: flex;
    align-items: center;
    gap: 120px;
    padding-right: 120px;
    flex-shrink: 0;
}

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

.clients-logo {
    height: 50px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    opacity: 0.5;
    filter: brightness(0) invert(1);
    transition: opacity 0.3s ease;
}

.clients-logo:hover {
    opacity: 1;
}

/* Секция-обёртка для варианта на тёмном фоне (главная).
   Отступы подобраны так, чтобы при выносе ленты из tools размеры не изменились:
   было tools(padding 80px 0) + .clients-bar(padding 80px 0 0). */
.clients-bar-section {
    background-color: var(--color-bg-dark);
    color: var(--color-white);
    padding: 0 0 80px;
}

/* Standalone-секция (светлый фон) */
.clients-row {
    padding: 0 0 var(--section-pad);
    background-color: var(--color-bg-gray);
}

.clients-row .clients-logo {
    filter: none;
    opacity: 0.55;
}

.clients-row .clients-logo:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .clients-marquee-group {
        gap: 60px;
        padding-right: 60px;
    }
}