/* ============================================================
   Brands Marquee — Scroll-driven infinite logo strip
   - Desktop/Tablet/Mobile: continuous horizontal marquee
   - Direction tied to scroll direction (down=RTL, up=LTR)
   - Idle: keeps drifting in last direction at slow baseline speed
   - Faster scroll = faster marquee speed (additive)
   - Edge fades blend logos into the section background
   ============================================================ */


/* ── Section ── */
.brands-marquee {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 200px;
    background: var(--color-white);
    overflow: hidden;
}


/* ── Marquee Viewport ──
   Stretches from screen left edge to the right global padding
   (so the right edge sits exactly where the vertical dashed line is). */
.brands-marquee__viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: var(--pad-x);
    display: flex;
    align-items: center;
    overflow: hidden;
}


/* ── Track (single element transformed by JS) ── */
.brands-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}


/* ── A "set" is one full pass of all logos. Track has 2 sets for seamless wrap ── */
.brands-marquee__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* ── Single logo cell ──
   Outer span carries the recolor mask; inner <img> only provides
   layout width via its intrinsic aspect ratio (visually hidden). */
.brands-marquee__logo {
    display: inline-block;
    height: 32px;
    /* 25px on each side → 50px total space between adjacent logos */
    margin: 0 25px;
    background-color: var(--color-greyish);
    -webkit-mask-image: var(--logo);
            mask-image: var(--logo);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    flex-shrink: 0;
}

.brands-marquee__logo img {
    height: 100%;
    width: auto;
    visibility: hidden;
    display: block;
    pointer-events: none;
    user-select: none;
}


/* ── Edge fades (cream → transparent) ──
   Left fade sits flush at viewport left.
   Right fade sits inside the marquee viewport, ending just before the dashed line. */
.brands-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(80px, 10vw, 160px);
    pointer-events: none;
    z-index: 2;
}

.brands-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
}

.brands-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left, var(--color-white) 0%, rgba(255, 251, 240, 0) 100%);
}


/* ── Vertical dashed guide line ──
   Sits at the right global padding edge, fills full section height. */
.brands-marquee__vline {
    position: absolute;
    top: 0;
    bottom: 0;
    right: var(--pad-x);
    border-right: 1px dashed var(--color-greyish);
    z-index: 3;
    pointer-events: none;
}


/* ── Tablet ── */
@media (max-width: 1023px) {
    .brands-marquee {
        height: 32vh;
        min-height: 180px;
    }

    .brands-marquee__logo {
        height: 30px;
        margin: 0 25px;
    }
}


/* ── Phone ── */
@media (max-width: 767px) {
    .brands-marquee {
        height: 22vh;
        min-height: 140px;
    }

    .brands-marquee__logo {
        height: 26px;
        margin: 0 25px;
    }

    .brands-marquee__fade {
        width: clamp(50px, 14vw, 90px);
    }
}