/**
 * BAIRS — Marquee infinito doble
 * Logo wall que scrollea horizontalmente sin fin, dos filas en sentido opuesto.
 */

.bairs-marquee {
    --marquee-duration: 60s;
    overflow: hidden;
    width: 100%;
    margin: var(--space-4, 16px) 0;
    mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.bairs-marquee-track {
    display: flex;
    gap: var(--space-12, 48px);
    width: max-content;
    animation: bairs-marquee-scroll var(--marquee-duration) linear infinite;
}

.bairs-marquee[data-direction="reverse"] .bairs-marquee-track {
    animation-direction: reverse;
}

@keyframes bairs-marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.bairs-marquee:hover .bairs-marquee-track {
    animation-play-state: paused;
}

.bairs-marquee-item {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-2, 8px);
    filter: grayscale(1) brightness(2.4) contrast(0.6);
    opacity: 0.6;
    transition: filter var(--dur-normal, 320ms) var(--ease-out, ease),
                opacity var(--dur-normal, 320ms) var(--ease-out, ease),
                transform var(--dur-normal, 320ms) var(--ease-out, ease);
}

.bairs-marquee-item:hover {
    filter: none;
    opacity: 1;
    transform: scale(1.05);
}

.bairs-marquee-item img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    .bairs-marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
}