/**
 * wm:marquee — CSS-движок бесшовной ленты.
 *
 * Логика: track содержит 2 копии items, animation translateX(0 → -50%).
 * После цикла вторая копия становится на место первой = seamless loop.
 *
 * Скорость через --wm-marquee-speed (выставляется inline-style на корне).
 * Pause-on-hover через :hover на корне с data-pause="Y".
 * Reduced-motion отключает анимацию (accessibility).
 *
 * Тут ТОЛЬКО структура и анимация — декор карточек в style.css шаблонов.
 */

.wm-marquee {
    --wm-marquee-speed: 30s;
    --wm-marquee-gap: var(--wintra-module-gap, 24px);
    --wm-marquee-per-view: 6;
    /* --wm-marquee-item-width выставляется JS на основе реального viewport
     * (clientWidth - gap * (per-view - 1)) / per-view. Резерв на случай
     * до-JS рендера = ровная доля 100%. */
    --wm-marquee-item-width: calc(100% / var(--wm-marquee-per-view));
    position: relative;
    width: 100%;
    overflow: hidden;
}

.wm-marquee__viewport {
    overflow: hidden;
    width: 100%;
}

.wm-marquee__track {
    display: flex;
    gap: var(--wm-marquee-gap);
    /* НЕ ставим width: max-content — это создаёт циклику (track зависит от
     * items, items зависят от track). Items имеют фиксированную ширину в px
     * (--wm-marquee-item-width выставляется JS), flex авто-растягивает track
     * под суммарную ширину. translateX(-50%) сдвигает половину computed width
     * track = одна копия items за viewport. */
    align-items: center;
    will-change: transform;
    animation: wm-marquee-scroll var(--wm-marquee-speed) linear infinite;
}

/* Направление вправо — обратное keyframes. */
.wm-marquee[data-direction="right"] .wm-marquee__track {
    animation-direction: reverse;
}

/* Pause on hover — управляется через атрибут, чтобы шеф мог отключить. */
.wm-marquee[data-pause="Y"]:hover .wm-marquee__track,
.wm-marquee[data-pause="Y"]:focus-within .wm-marquee__track {
    animation-play-state: paused;
}

/* Item-блок в ленте — фиксированная ширина по WM_PER_VIEW.
 * 100% / per-view минус gap (упрощение: gap делится приблизительно равномерно).
 * Шаблоны могут переопределять ширину через свой CSS. */
.wm-marquee__item {
    /* Ширина item = --wm-marquee-item-width (выставляется JS из viewport/per-view).
     * До инициализации JS — fallback 100%/per-view (может выглядеть кривовато
     * из-за track:max-content, но JS дотянет за миллисекунды). */
    flex: 0 0 var(--wm-marquee-item-width);
    width: var(--wm-marquee-item-width);
    box-sizing: border-box;
    text-decoration: none;
    color: inherit;
}

/* Адаптив: на мобильных меньше per-view (но шеф может перекрыть в шестерёнке). */
@media (max-width: 960px) {
    .wm-marquee { --wm-marquee-per-view: 4; }
}
@media (max-width: 640px) {
    .wm-marquee { --wm-marquee-per-view: 3; }
}

/* === Grayscale-фильтр (для логотипов; v14-настройки) ==================== */
.wm-marquee--grayscale .wm-marquee__item img {
    filter: grayscale(1);
    opacity: 0.48;
    transition: filter 0.45s ease, opacity 0.45s ease, transform 0.45s ease;
    will-change: filter, opacity, transform;
}
.wm-marquee--grayscale .wm-marquee__item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.08);
}

/* === Keyframes ========================================================= */
@keyframes wm-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* === Accessibility — reduced motion отключает анимацию ================= */
@media (prefers-reduced-motion: reduce) {
    .wm-marquee__track {
        animation: none;
    }
}