/* ============================================================
   Brands Section — Scroll-driven curtain entry/exit
   Desktop/Tablet: clip-path inset animation via GSAP ScrollTrigger
   Mobile: flat section with scroll-triggered reveals
   ============================================================ */


/* ── Section Tokens ── */
:root {
    --brands-bg:        var(--color-white);
    --brands-text:      var(--color-black2);
    --brands-brick-w:   14vw;
    --brands-brick-h:   7vw;
    --brands-brick-pad: 20px;
    --brands-border:    1px dashed var(--color-greyish);
}


/* ============================================================
   DESKTOP / TABLET
   ============================================================ */

/* ── Section Wrapper ── */
.brands-section {
    position: relative;
    z-index: var(--z-elevated);
    margin-top: -100vh;
    pointer-events: none;
}

/* ── Scroll Runway (height set by JS) ── */
.brands-runway {
    position: relative;
}

/* ── Sticky Container — clip-path target ── */
.brands-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    clip-path: inset(10vh 0 10vh 100% round 20px 0 0 20px);
    pointer-events: auto;
}

/* ── Inner Content ── */
.brands-inner {
    width: 100%;
    height: 100%;
    background: var(--brands-bg);
    color: var(--brands-text);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10vh 0;
}

/* ── Heading ── */
.brands-heading {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-medium);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-none);
    text-align: center;
    padding: 0 var(--pad-x);
}

/* ── Subheading ── */
.brands-subheading {
    font-family: var(--font-body);
    font-weight: var(--font-weight-regular);
    font-size: var(--text-base);
    letter-spacing: var(--tracking-body-lg);
    line-height: var(--leading-normal);
    text-align: center;
    margin-top: 20px;
    color: var(--color-greyish);
    padding: 0 var(--pad-x);
}


/* ── Marquee Wrapper ── */
.brands-marquee-wrap {
    width: 100%;
    margin-top: clamp(40px, 5vw, 80px);
    border-top: var(--brands-border);
    border-top-color: transparent;
}

/* ── Marquee Row ── */
.brands-marquee-row {
    overflow: hidden;
    position: relative;
    border-bottom: var(--brands-border);
    border-bottom-color: transparent;
}

/* ── Marquee Track (infinite scroll) ── */
.brands-marquee-track {
    display: flex;
    width: max-content;
}

.brands-marquee-track--rtl {
    animation: brands-marquee-rtl 45s linear infinite;
}

.brands-marquee-track--ltr {
    animation: brands-marquee-ltr 45s linear infinite;
}

@keyframes brands-marquee-rtl {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes brands-marquee-ltr {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}


/* ── Brick (logo container) ── */
.brands-brick {
    width: var(--brands-brick-w);
    height: var(--brands-brick-h);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--brands-brick-pad);
    border-right: var(--brands-border);
    border-right-color: transparent;
}

/* ── Logo ──
      Tinted to the brand's --color-greyish (#C9C3BD) using a brightness/invert
      filter chain: brightness(0) flattens any SVG content to a pure-black
      silhouette, invert(76.5%) lifts it back up to ~rgb(195,195,195) —
      visually identical to #C9C3BD at logo render sizes. The pulse animates
      OPACITY only so the colour never drifts while breathing. */
.brands-brick img {
    max-width: 65%;
    max-height: 55%;
    object-fit: contain;
    display: block;
    filter: brightness(0) invert(76.5%);
    opacity: 1;
}

/* ── Logo Pulse Animation — opacity only ──
   Each logo opens at full brightness, dips to 0.4, and breathes back up.
   3 stagger groups offset by cycle/3 (≈1.67s of a 5s cycle) so neighbouring
   bricks aren't in lockstep. */
@keyframes brands-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

.brands-brick:nth-child(3n+1) img { animation: brands-pulse 5s var(--ease-gentle) infinite; }
.brands-brick:nth-child(3n+2) img { animation: brands-pulse 5s var(--ease-gentle) infinite -1.67s; }
.brands-brick:nth-child(3n+3) img { animation: brands-pulse 5s var(--ease-gentle) infinite -3.33s; }


/* ── Per-logo size overrides ───────────────────────────────
   Tweak logos whose proportions make them read visually heavier
   or lighter than the row average. Each rule applies to all 3
   duplicate instances per row via the alt attribute. Base sits
   at max-width: 65% / max-height: 55% from .brands-brick img. */

/* A bit smaller */
.brands-brick img[alt="Raymond Wood"]    { max-width: 55%; max-height: 45%; }
.brands-brick img[alt="Elmnt"]           { max-width: 55%; max-height: 45%; }
.brands-brick img[alt="Cadence Connect"] { max-width: 55%; max-height: 45%; }
.brands-brick img[alt="Biov8"]           { max-width: 55%; max-height: 45%; }
.brands-brick img[alt="Stella Property"] { max-width: 55%; max-height: 45%; }

/* A bit bigger */
.brands-brick img[alt="Firefly"]         { max-width: 75%; max-height: 65%; }
.brands-brick img[alt="Nicole Slater"]   { max-width: 75%; max-height: 65%; }
.brands-brick img[alt="Mybodycorp"]      { max-width: 75%; max-height: 65%; }
.brands-brick img[alt="Janus Electric"]  { max-width: 75%; max-height: 65%; }


/* ============================================================
   MOBILE  (<=767px)
   ============================================================ */
@media (max-width: 767px) {
    .brands-section {
        margin-top: 0;
        z-index: auto;
        pointer-events: auto;
    }

    .brands-runway {
        height: auto !important;
    }

    .brands-sticky {
        position: relative;
        height: auto;
        clip-path: none !important;
    }

    /* Inner: drop horizontal padding so the marquees can run edge-to-edge.
       Heading and subheading have their own var(--pad-x) padding so they
       still respect the global gutter. */
    .brands-inner {
        padding: var(--pad-y) 0;
    }
    .brands-heading,
    .brands-subheading {
        padding: 0 var(--pad-x);
    }

    /* Subheading shrinks to 14px on mobile (desktop/tablet stay on the
       --text-base scale set in the base styles). */
    .brands-subheading {
        font-size: 14px;
    }

    /* Mobile dashed grid lines: pin the border colours to the greyish token
       so the lines render without needing the JS reveal animation (which
       runs on desktop only). The scaleX/Y reveals from initDesktop don't
       apply here because initMobile is a different code path. */
    .brands-marquee-wrap {
        border-top-color: var(--color-greyish) !important;
    }
    .brands-marquee-row {
        border-bottom-color: var(--color-greyish) !important;
    }
    .brands-brick {
        border-right-color: var(--color-greyish) !important;
    }

    :root {
        --brands-brick-w: 40vw;
        --brands-brick-h: 20vw;
    }

}