/* ============================================================
   BEINC — Projects page As Seen In
   Same marquee behaviour as the standard as-seen-in section but
   with BOTH a top and bottom dashed rail (revealed on scroll).
   ============================================================ */

.projects-asi {
    background: var(--color-black2);
    padding: var(--space-10) 0;
    position: relative;
}

/* Top + bottom dashed rails — both animate via scaleX 0→1 */
.projects-asi__dash-top,
.projects-asi__dash-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 1;
    transform: scaleX(0);
    pointer-events: none;
}

.projects-asi__dash-top {
    top: 0;
    border-top: var(--guide-border);
    transform-origin: left center;
}

.projects-asi__dash-bottom {
    bottom: 0;
    border-bottom: var(--guide-border);
    transform-origin: right center;
}

.projects-asi__wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Edge fade gradients */
.projects-asi__wrap::before,
.projects-asi__wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    max-width: 160px;
    pointer-events: none;
    z-index: 2;
}

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

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

.projects-asi__track {
    display: flex;
    align-items: center;
    gap: var(--space-9);
    will-change: transform;
}

.projects-asi__logo {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.projects-asi__logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
    /* The logo SVGs declare only `viewBox` (no width/height attrs), so
       Chrome reports naturalWidth=0 and computes a 0-width image. We
       override that with `aspect-ratio` data attributes per-logo below
       — the browser then respects the explicit ratio on a `width: auto`
       img and lays out a sensible width even before decode finishes.
       Falls back to a square if no ratio is supplied. */
    aspect-ratio: var(--logo-aspect, 1);
}


/* 20vh dark breathing space between the As Seen In section and the
   footer. Sits BELOW the ASI's bottom dashed rail. Same height across
   all viewports per spec. */
.projects-asi-spacer {
    height: 20vh;
    background: var(--color-black2);
}


/* ── Responsive ── */
@media (max-width: 1023px) {
    .projects-asi { padding: var(--space-9) 0; }
    .projects-asi__track { gap: var(--space-8); }
    .projects-asi__logo { height: 40px; }
}

@media (max-width: 767px) {
    .projects-asi { padding: var(--space-8) 0; }
    .projects-asi__track { gap: var(--space-7); }
    .projects-asi__logo { height: 32px; }
    .projects-asi__wrap::before,
    .projects-asi__wrap::after { width: 15%; }
}