/* ============================================
   BRANDS CAROUSEL - Infinite Auto-Scroll
   ============================================ */

/* Keyframes MUST be global (outside @media) for max browser compatibility */
@keyframes infiniteScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes infiniteScrollMobile {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ============================================
   DESKTOP (769px+)
   ============================================ */
@media (min-width: 769px) {
    .brands-carousel-wrapper {
        margin: 4vw 0 3vw 0 !important;
        padding: 2vw 0 !important;
        background: rgba(255, 255, 255, 0.18) !important;
        backdrop-filter: blur(10px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .brands-carousel-wrapper::before,
    .brands-carousel-wrapper::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        width: 8vw !important;
        height: 100% !important;
        z-index: 2 !important;
        pointer-events: none !important;
    }
    .brands-carousel-wrapper::before {
        left: 0 !important;
        background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(240,243,248,0) 100%) !important;
    }
    .brands-carousel-wrapper::after {
        right: 0 !important;
        background: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(240,243,248,0) 100%) !important;
    }

    .brands-track {
        display: flex !important;
        gap: 2vw !important;
        width: max-content !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        animation: infiniteScroll 30s linear infinite !important;
    }

    .brand-item {
        width: 10vw !important;
        height: 7vw !important;
        padding: 0.8vw !important;
        background: rgba(255, 255, 255, 0.5) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 1.5vw !important;
        border: 1px solid rgba(255, 255, 255, 0.7) !important;
        box-shadow: 0 0.3vw 1vw rgba(0, 0, 0, 0.06) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: visible !important;
    }

    .brand-item a {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
        text-decoration: none !important;
    }

    .brand-item:hover {
        transform: translateY(-0.3vw) !important;
        background: rgba(255, 255, 255, 0.85) !important;
        border-color: rgba(0, 180, 200, 0.4) !important;
        box-shadow:
            0 0.5vw 1.5vw rgba(4, 180, 203, 0.15),
            0 0 0 1px rgba(0, 180, 200, 0.2) !important;
    }

    .brand-item img {
        filter: grayscale(0.3) opacity(0.8) !important;
        transition: filter 0.3s ease !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    .brand-item:hover img {
        filter: grayscale(0) opacity(1) !important;
    }

    /* Pause on hover */
    .brands-carousel-wrapper:hover .brands-track {
        animation-play-state: paused !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .brand-item {
        width: 12vw !important;
        height: 7.5vw !important;
    }
}

/* ============================================
   MOBILE (768px-)
   ============================================ */
@media (max-width: 768px) {
    .section-03 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .section-03 .wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .section-03 > .wrapper > h2,
    .section-03 > .wrapper > p {
        padding-left: 5.3vw !important;
        padding-right: 5.3vw !important;
    }

    .brands-carousel-wrapper {
        margin: 8vw -5.3vw 6vw -5.3vw !important;
        padding: 5vw 0 !important;
        width: calc(100% + 10.6vw) !important;
        max-width: calc(100% + 10.6vw) !important;
        background: rgba(255, 255, 255, 0.25) !important;
        backdrop-filter: blur(10px) saturate(1.4) !important;
        -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.5) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .brands-carousel-wrapper::before,
    .brands-carousel-wrapper::after {
        display: none !important;
    }

    .brands-track {
        display: flex !important;
        gap: 4vw !important;
        width: max-content !important;
        flex-wrap: nowrap !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        animation: infiniteScrollMobile 30s linear infinite !important;
    }

    .brand-item {
        width: 40vw !important;
        min-width: 40vw !important;
        height: 26vw !important;
        padding: 3vw !important;
        background: rgba(255, 255, 255, 0.6) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        border-radius: 3vw !important;
        border: 1px solid rgba(255, 255, 255, 0.8) !important;
        box-shadow: 0 1.5vw 3vw rgba(0, 0, 0, 0.08) !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .brand-item a {
        display: flex !important;
        width: 100% !important;
        height: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .brand-item img {
        filter: grayscale(0.2) opacity(0.9) !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }

    /* Pause on touch */
    .brands-carousel-wrapper.paused .brands-track {
        animation-play-state: paused !important;
    }
}