/**
 * Уніфікована карусель логотипу (Aurora / --accent синхрон з .btn-primary).
 *
 * Змінні (--bm-*) задавай на .brand-marquee або на предку з .brand-marquee-layer (напр. секція):
 *
 *   --bm-duration           тривалість прокрутки (напр. 64s)
 *   --bm-direction          normal | reverse — напрямок руху
 *   --bm-tilt               кут rotate для .brand-marquee__skew (0deg = без нахилу)
 *   --bm-anchor-x           горизонталь центру смуги (50%, 75%…)
 *   --bm-anchor-y           вертикаль центру смуги
 *   --bm-band-width         ширина смуги в шарі (напр. 135%)
 *   --bm-band-height        висота смуги (напр. min(42%, 200px))
 *   --bm-band-min-height    мін. висота смуги в шарі
 *   --bm-slide-padding-y / --bm-slide-padding-x  відступи слайда (опційно)
 *   --bm-slide-gap          gap між логотипами (опційно)
 *   --bm-logo-height        висота SVG (clamp рядок)
 *
 * Модифікатор:
 *   .brand-marquee--band    всередині .brand-marquee-layer + __skew (компактніший ряд)
 *
 * HTML-шаблон: includes/brand-marquee-core.html
 * JS: brand-marquee.js (data-brand-marquee на корені .brand-marquee)
 */

.brand-marquee {
    --bm-duration: 64s;
    --bm-direction: normal;
    --bm-tilt: 0deg;
    --bm-anchor-x: 50%;
    --bm-anchor-y: 50%;
    --bm-band-width: 100%;
    --bm-band-height: auto;
    --bm-band-min-height: 0px;
    --bm-slide-padding-y: 7px;
    --bm-slide-padding-x: 24px;
    --bm-slide-gap: clamp(1rem, 2.5vw, 2rem);
    --bm-logo-height: clamp(14px, 2.25vw, 20px);

    --logo-plate: transparent;
    box-sizing: border-box;
    color: #fff;
}

[data-theme="light"] .brand-marquee {
    color: var(--text-primary);
}

[data-theme="light"] .brand-marquee__item {
    filter: drop-shadow(0 0.5px 1px rgba(255, 255, 255, 0.45));
}

.brand-marquee__viewport {
    overflow: hidden;
    background-color: var(--accent-from);
    background-image: linear-gradient(
        100deg,
        var(--accent-from) 0%,
        var(--accent-to) 35%,
        var(--accent-from) 70%,
        var(--accent-to) 100%
    );
    background-size: 280% 100%;
    background-position: 0% 50%;
    animation: btn-primary-accent-flow 5.5s ease-in-out infinite alternate;
}

.brand-marquee__track {
    display: flex;
    width: max-content;
    animation: brand-marquee-scroll var(--bm-duration, 64s) linear infinite;
    animation-direction: var(--bm-direction, normal);
}

.brand-marquee__slide {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--bm-slide-gap);
    padding: var(--bm-slide-padding-y) var(--bm-slide-padding-x);
}

.brand-marquee__item {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 0;
    filter: drop-shadow(0 0.5px 1px rgba(0, 0, 0, 0.2));
}

.brand-marquee .site-logo-svg {
    display: block;
    height: var(--bm-logo-height);
    width: auto;
}

@keyframes brand-marquee-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-marquee__track {
        animation: none;
    }

    .brand-marquee__viewport {
        animation: none;
        background-position: 50% 50%;
    }
}

/* ——— Шар + діагональна смуга (обрізка по position:relative предка) ——— */
.brand-marquee-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
}

/* Контент поверх фонової смуги, якщо шар — перший дочірній елемент секції */
section:has(> .brand-marquee-layer:first-child) > :not(.brand-marquee-layer) {
    position: relative;
    z-index: 1;
}

.brand-marquee__skew {
    position: absolute;
    left: var(--bm-anchor-x, 50%);
    top: var(--bm-anchor-y, 50%);
    width: var(--bm-band-width, 100%);
    height: var(--bm-band-height, auto);
    min-height: var(--bm-band-min-height, 0);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) rotate(var(--bm-tilt, 0deg));
    transform-origin: center center;
}

.brand-marquee-layer .brand-marquee {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: none;
    flex-shrink: 0;
}

.brand-marquee-layer .brand-marquee__viewport {
    border-radius: 0;
}

.brand-marquee--band {
    --bm-slide-padding-y: 6px;
    --bm-slide-padding-x: 18px;
    --bm-slide-gap: clamp(0.75rem, 2vw, 1.25rem);
    --bm-logo-height: clamp(11px, 1.8vw, 16px);
}

/* Діагональна смуга: секції з include brand-marquee-bg-layer (без .value-section — див. нижче) */
.lifestyle-section {
    --bm-tilt: -35deg;
    /* Смуга входить зліва, читання логотипів у звичному напрямку */
    --bm-anchor-x: 28%;
    --bm-anchor-y: 50%;
    --bm-direction: normal;
    --bm-band-width: 135%;
    --bm-band-height: min(42%, 200px);
    --bm-band-min-height: 100px;
}

/*
 * Секції з таким самим тлом смуги, як .value-section (редагуй тут або в .hero.hero--immersive):
 * інші секції з каруселлю лишаються з дефолтами зверху.
 * Змінні: --bm-tilt, --bm-anchor-x/y, --bm-direction, --bm-band-*,
 * швидкість: --bm-duration (у .brand-marquee, можна перевизначити тут).
 */
.value-section {
    --bm-tilt: -35deg;
    --bm-anchor-x: 75%;
    --bm-anchor-y: 75%;
    --bm-direction: normal;
    --bm-band-width: 135%;
    --bm-band-height: min(42%, 200px);
    --bm-band-min-height: 100px;
}

/* Вузький екран: після rotate смуга має перекривати всю ширину «пігулки» */
@media (max-width: 768px) {
    .value-section {
        --bm-band-width: 300%;
        --bm-band-height: min(54%, 260px);
        --bm-band-min-height: 120px;
        --bm-anchor-x: 65%;
        --bm-anchor-y: 72%;
    }

    .lifestyle-section {
        --bm-band-width: 300%;
        --bm-band-height: min(54%, 260px);
        --bm-band-min-height: 120px;
        --bm-anchor-x: 36%;
        --bm-anchor-y: 72%;
    }
}

.hero.hero--immersive {
    --bm-tilt: -35deg;
    --bm-anchor-x: 75%;
    --bm-anchor-y: 75%;
    --bm-direction: normal;
    --bm-band-width: 135%;
    --bm-band-height: min(42%, 200px);
    --bm-band-min-height: 100px;
}