/* ============================================================
   Brands Strip — Infinite horizontal marquee
   ============================================================
   Layout
   - Cream (--color-white) full-bleed background.
   - 40vh tall, content vertically centered, --pad-y top/bottom.
   - Two duplicated logo "sets" inside a single track so the JS
     can wrap translateX seamlessly.
   - Each logo is a <span> with a CSS-mask using the SVG logo
     file as its mask-image — the span's background-color sets
     the tint, so all logos render in a single solid grey-ish
     colour regardless of their source SVG colours.
   - Side fades blend logos into the cream background.

   Behaviour
   - Direction + speed driven by js/sections/brands-strip.js
     (idle drift in the last scroll direction, scroll velocity
     adds a smooth boost). Mirrors the projects-page brands
     marquee logic.
   ============================================================ */


.brands-strip {
    position: relative;
    width: 100%;
    height: 40vh;
    padding: var(--pad-y) 0;
    background: var(--color-white);
    overflow: hidden;
    /* Sits above the brand-cube section's fixed canvas (z:2) on pages
       that host both. Mirrors our-story's z-index pattern. */
    z-index: 6;
    /* Component-scoped breakpoint scale — applied to BOTH the per-logo
       height and width so they stay proportional across breakpoints. */
    --bs-scale: 0.82;
}


/* ── Viewport: clips the moving track ──────────────────────── */
.brands-strip-viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}


/* ── Track: the moving row of (two duplicate) sets ─────────── */
.brands-strip-track {
    display: flex;
    width: max-content;
    /* JS sets transform: translate3d(x,0,0); CSS keeps GPU compositing hint */
    will-change: transform;
    transform: translate3d(0, 0, 0);
}


/* ── A single duplicate set of logos ───────────────────────── */
.brands-strip-set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}


/* ── Single logo cell ──────────────────────────────────────── */
/* Uses CSS mask + background-color so every logo renders in a
   single tint (grey-ish) regardless of its source SVG colours.
   Each logo's height is tuned via an inline `--logo-h` custom
   property (set on the span) so logos with very different
   aspect ratios (e.g. very wide wordmarks vs. square marks) can
   be visually balanced — wide logos sit shorter, compact/square
   logos sit taller, so they all read at a similar visual weight. */
.brands-strip-logo {
    display: inline-block;
    /* Both dimensions scale with --bs-scale so the height/width pair
       stays proportional across breakpoints (without this the height
       could shrink while the width stayed at desktop size, leaving
       ugly empty space inside super-wide spans). */
    height: calc(var(--logo-h, 32px) * var(--bs-scale, 1));
    width:  calc(var(--logo-h, 32px) * var(--logo-ar, 4) * var(--bs-scale, 1));
    margin: 0 38px;
    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;
    /* Pre-stage so the JS reveal can fade them in cleanly. */
    opacity: 0;
}


/* ── Side fades: cream → transparent on each edge ──────────── */
.brands-strip-fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(80px, 10vw, 160px);
    pointer-events: none;
    z-index: 2;
    /* Pre-stage — JS reveal fades them in. */
    opacity: 0;
}

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

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


/* ── Tablet (<=1023) ───────────────────────────────────────── */
@media (max-width: 1023px) {
    .brands-strip {
        height: 32vh;
        min-height: 180px;
        --bs-scale: 0.74;      /* scales BOTH logo height + width */
    }
    .brands-strip-logo { margin: 0 32px; }
}


/* ── Phone (<=767) ─────────────────────────────────────────── */
@media (max-width: 767px) {
    .brands-strip {
        height: 22vh;
        min-height: 140px;
        --bs-scale: 0.62;
    }
    .brands-strip-logo { margin: 0 26px; }
    .brands-strip-fade { width: clamp(50px, 14vw, 90px); }
}