/* ============================================================
   BEINC — Projects page Brands Marquee
   ============================================================
   Full-bleed black2 background, cream/white logos, edge fades to
   the section background. Uses the same per-logo sizing approach
   as the connector section's brands-strip:
     --logo    inline url('logo.svg') used as the mask image
     --logo-h  hand-tuned visible height (so wide wordmarks shrink
               and compact / square marks grow taller, balancing
               their visual weight)
     --logo-ar the SVG's intrinsic aspect ratio (width ÷ height)
     --bs-scale a component-scoped breakpoint scaler that scales
               BOTH height AND width together so proportions
               always stay correct.
   ============================================================ */

.projects-brands-marquee {
    position: relative;
    width: 100%;
    height: 40vh;
    min-height: 200px;
    background: var(--color-black2);
    overflow: hidden;
    /* Component-scoped breakpoint scale */
    --bs-scale: 0.82;
}

.projects-brands-marquee__viewport {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.projects-brands-marquee__track {
    display: flex;
    width: max-content;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.projects-brands-marquee__set {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.projects-brands-marquee__logo {
    display: inline-block;
    /* Both axes scale with --bs-scale so proportions stay correct
       across breakpoints. */
    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-white);   /* cream tint on black bg */
    -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;
}

.projects-brands-marquee__fade {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(80px, 10vw, 160px);
    pointer-events: none;
    z-index: 2;
    /* Pre-stage: invisible until reveal fades them in. */
    opacity: 0;
}

.projects-brands-marquee__fade--left {
    left: 0;
    background: linear-gradient(to right, var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}

.projects-brands-marquee__fade--right {
    right: 0;
    background: linear-gradient(to left,  var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}


/* ── Tablet ── */
@media (max-width: 1023px) {
    .projects-brands-marquee {
        height: 32vh;
        min-height: 180px;
        --bs-scale: 0.74;
    }
    .projects-brands-marquee__logo { margin: 0 32px; }
}


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