/* ============================================================
   BEINC — As Seen In Section
   Logo marquee with dashed top/bottom and side fade gradients.
   Default scroll direction: LTR. Reverses to RTL smoothly when
   the user scrolls up (handled in as-seen-in-section.js).
   ============================================================ */

.asi-section {
    background: var(--color-black2);
    padding: var(--space-10) 0;
    margin-bottom: 20vh;
    position: relative;
}

/* Dashed bottom rail only — LTR */
.asi-dash-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    z-index: 1;
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
    border-bottom: var(--guide-border);
}

.asi-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Edge fade gradients */
.asi-wrap::before,
.asi-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10%;
    max-width: 160px;
    pointer-events: none;
    z-index: 2;
}
.asi-wrap::before {
    left: 0;
    background: linear-gradient(to right, var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}
.asi-wrap::after {
    right: 0;
    background: linear-gradient(to left, var(--color-black2) 0%, rgba(25, 23, 22, 0) 100%);
}

.asi-track {
    display: flex;
    align-items: center;
    gap: 88px;
    will-change: transform;
}

/* Logos normalised to a common height; width varies naturally */
.asi-logo {
    flex: 0 0 auto;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asi-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}


/* ── Responsive ── */
@media (max-width: 1023px) {
    .asi-section { padding: var(--space-9) 0; }
    .asi-track { gap: 60px; }
    .asi-logo { height: 40px; }
}

@media (max-width: 767px) {
    .asi-section { padding: var(--space-8) 0; margin-bottom: 10vh; }
    .asi-track { gap: 48px; }
    .asi-logo { height: 32px; }
    .asi-wrap::before,
    .asi-wrap::after { width: 15%; }
}