/* Brand Logos Marquee Styles */

.marquee-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    mask: linear-gradient(
        to right,
        transparent,
        white 10%,
        white 90%,
        transparent
    );
    -webkit-mask: linear-gradient(
        to right,
        transparent,
        white 10%,
        white 90%,
        transparent
    );
}

.marquee-track {
    display: flex;
    align-items: center;
    gap: 48px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    animation: marquee 60s linear infinite;
    will-change: transform;
}

@media (min-width: 640px) {
    .marquee-track {
        gap: 64px;
    }
}

.marquee-item {
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.client-logo {
    height: 80px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

@media (min-width: 768px) {
    .client-logo {
        height: 100px;
    }
}

@media (min-width: 1024px) {
    .client-logo {
        height: 128px;
    }
}

.client-logo:hover {
    opacity: 0.8;
}

/* Marquee animation */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Pause animation on hover */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    .marquee-container {
        mask: none;
        -webkit-mask: none;
    }
    
    .marquee-item[aria-hidden="true"] {
        display: none;
    }
}

/* Dark theme adjustments */
.bg-dark .client-logo {
    filter: brightness(0) invert(1);
}

/* Loading state */
.marquee-container[data-loading="true"] .client-logo {
    opacity: 0.3;
}

/* Focus states for accessibility */
.marquee-item:focus-within {
    outline: 2px solid #F1002C;
    outline-offset: 2px;
    border-radius: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .client-logo {
        filter: none;
        opacity: 1;
    }
}

/* Alternative layout for very small screens */
@media (max-width: 480px) {
    .marquee-track {
        gap: 32px;
    }
    
    .client-logo {
        height: 60px;
    }
}

/* Print styles */
@media print {
    .marquee-container {
        overflow: visible;
        mask: none;
        -webkit-mask: none;
    }
    
    .marquee-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }
    
    .marquee-item[aria-hidden="true"] {
        display: none;
    }
    
    .client-logo {
        height: 48px;
        filter: none;
        opacity: 1;
    }
}