/* ==========================================================================
   Бегущие строки (бегущая лента) — HONDA CLUB
   Отдельный файл, подключён из сниппета head.
   Логика блоков как на avtoservice-vip: две ленты, вторая едет обратно,
   каждая строка дублирована для бесшовности цикла.
   Дизайн — Honda: серебристо-серый фон с переливами, обводка тушью,
   красные разделители.
   ========================================================================== */

.hmarquee-wrap{
    position: relative;
    padding: 38px 0;
    background: #d3d3d1;            /* базовый серебристый серый (Honda) */
    overflow: hidden;
    isolation: isolate;
    border-top: 1px solid rgba(25,25,25,.07);
    border-bottom: 1px solid rgba(25,25,25,.07);
}

/* --------------------------------------------------------------------------
   СЛОЙ ПЕРЕЛИВОВ
   Повторяющийся градиент с ФИКСИРОВАННЫМ периодом (480px). Анимация сдвигает
   слой ровно на один период — поэтому цикл бесшовный и полосы реально видны.
   Наклон -2deg задан в самих keyframes (постоянный), чтобы полосы шли
   диагонально, как отблеск на металле, и при этом сдвиг по X совпадал с
   периодом градиента.

   Диапазон яркости 200..250 (дельта 50 уровней против прежних 34) — это то,
   что делает перелив различимым глазом.
   -------------------------------------------------------------------------- */
.hmarquee-wrap::before{
    content: "";
    position: absolute;
    top: -60px;
    bottom: -60px;
    left: -50%;
    right: -50%;                     /* ширина 200% — с запасом на сдвиг и наклон */
    z-index: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        90deg,
        #c8c8c6   0px,
        #d9d9d6  90px,
        #fafaf8 190px,               /* светлая полоса — «отблеск» */
        #e2e2df 300px,
        #cdcdca 400px,
        #c8c8c6 480px                /* период замкнут на старт */
    );
    animation: hmarqueeSheen 11.2s linear infinite;
    will-change: transform;
    backface-visibility: hidden;
}

/* Лёгкая глубина по краям. Раньше здесь был белый блик opacity .55 —
   именно он «смывал» полосы. Теперь прозрачность снижена до .22. */
.hmarquee-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(90% 130% at 50% -25%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 60%),
        radial-gradient(110% 150% at 50% 130%, rgba(110,110,108,.14) 0%, rgba(110,110,108,0) 62%);
}

.hmarquee-tilt{
    position: relative;
    z-index: 1;
    width: 110%;
    margin-left: -5%;
    transform: rotate(-2deg);
    transform-origin: center;
    backface-visibility: hidden;
    contain: paint;
    overflow: hidden;
}

.hmarquee{
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}
.hmarquee + .hmarquee{
    margin-top: 20px;
}

.hmarquee__track{
    display: inline-flex;
    width: max-content;
    will-change: transform;
    animation-duration: 44s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.hmarquee span{
    display: inline-block;
    padding-right: 56px;
    font-size: clamp(26px, 3.6vw, 52px);
    font-weight: 900;
    line-height: 1.16;
    text-transform: uppercase;
    letter-spacing: -.01em;

    /* первая строка — контурная */
    color: transparent;
    -webkit-text-stroke: 1.4px var(--ink);
}

/* красный разделитель между повторами.
   --red2, а не --red: на сером фоне #ed1c24 даёт контраст 2.75 (ниже порога),
   #c61017 — 3.52, проходит AA для крупного текста и остаётся заметно красным. */
.hmarquee span::after{
    content: "•";
    margin-left: 56px;
    color: var(--red2);
    -webkit-text-stroke: 0;
}

/* вторая строка — заливка тушью */
.hmarquee--right span{
    color: var(--ink);
    -webkit-text-stroke: 0;
}

.hmarquee--left .hmarquee__track{
    animation-name: hmarqueeLeft;
}
.hmarquee--right .hmarquee__track{
    animation-name: hmarqueeRight;
}

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

/* Сдвиг переливов ровно на период градиента (480px) при постоянном наклоне.
   Один цикл = один период => стык не виден. */
@keyframes hmarqueeSheen{
    from{ transform: rotate(-2deg) translate3d(0, 0, 0); }
    to  { transform: rotate(-2deg) translate3d(-480px, 0, 0); }
}

/* --- мобильная адаптация --- */
@media (max-width: 899px){
    .hmarquee-wrap{ padding: 28px 0; }
    .hmarquee + .hmarquee{ margin-top: 14px; }
    .hmarquee span{
        padding-right: 36px;
        -webkit-text-stroke-width: 1.1px;
    }
    .hmarquee span::after{ margin-left: 36px; }
    .hmarquee__track{ animation-duration: 30s; }

    /* Слой переливов: на узком экране -50%/-50% (это всего ~190px) меньше
       периода сдвига 480px — правый край уезжал и обнажал фон.
       Фиксируем по 560px с каждой стороны: это больше периода, поэтому
       блок накрыт на всём протяжении анимации при любой ширине. */
    .hmarquee-wrap::before{
        left: -560px;
        right: -560px;
        animation-duration: 14.4s;
    }

    /* Тёмно-серый радиальный слой снизу на узком блоке сжимается в плотную
       полосу у нижнего края и читается как выезжающая тёмная плашка.
       На мобильной убираем его совсем — остаётся только перелив,
       как на десктопе, плюс лёгкий белый блик сверху. */
    .hmarquee-wrap::after{
        background:
            radial-gradient(90% 130% at 50% -25%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 60%);
    }
}

/* --- уважение к prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce){
    .hmarquee__track{
        animation: none;
        transform: none;
    }
    .hmarquee{
        overflow-x: auto;
        scrollbar-width: none;
    }
    .hmarquee::-webkit-scrollbar{ display: none; }

    /* переливы замирают в статичном положении — фон остаётся серым, но не двигается */
    .hmarquee-wrap::before{
        animation: none;
        transform: rotate(-2deg) translate3d(0, 0, 0);
    }
}