/* ==================================================
   NEXXUS LOGO TICKER
   Smooth + Fade + Grayscale + Hover Pause
================================================== */

.brand-logo-carousel {
    /* اندازه خود لوگو */
    --logo-width: 175px;
    --logo-height: 84px;

    /* اندازه فضای هر لوگو */
    --logo-item-width: 205px;
    --logo-item-height: 112px;

    /* حدود یک پیکسل بزرگ‌تر شدن */
    --logo-hover-scale: 1.012;
}


/* محدوده اصلی کاروسل جدید */
.brand-logo-carousel .nexus-logo-ticker {
    position: relative;

    width: 100%;
    overflow: hidden;

    direction: ltr;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 3%,
        #000 9%,
        #000 91%,
        rgba(0, 0, 0, 0.25) 97%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0, 0, 0, 0.25) 3%,
        #000 9%,
        #000 91%,
        rgba(0, 0, 0, 0.25) 97%,
        transparent 100%
    );
}


/* مسیر حرکت لوگوها */
.brand-logo-carousel .nexus-logo-track {
    display: flex;
    align-items: center;

    width: max-content;

    transform: translate3d(0, 0, 0);
    will-change: transform;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* هر مجموعه کامل از لوگوها */
.brand-logo-carousel .nexus-logo-group {
    display: flex;
    align-items: center;

    flex-shrink: 0;
    width: max-content;
}


/* فضای هر لوگو */
.brand-logo-carousel .nexus-logo-item {
    width: var(--logo-item-width);
    min-width: var(--logo-item-width);
    height: var(--logo-item-height);

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    padding: 0 14px;
    box-sizing: border-box;
}


/* لینک یا کادر لوگو */
.brand-logo-carousel .nexus-logo-item > a,
.brand-logo-carousel .nexus-logo-item > span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* حالت عادی لوگوها */
.brand-logo-carousel .nexus-logo-item img {
    display: block;

    width: var(--logo-width);
    height: var(--logo-height);

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
    object-position: center;

    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);

    opacity: 0.62;

    transform: scale(1) translateZ(0);
    transform-origin: center center;

    transition:
        filter 300ms ease,
        -webkit-filter 300ms ease,
        opacity 300ms ease,
        transform 300ms ease;

    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;

    cursor: pointer;
}


/* رنگی شدن فوری + حدود یک پیکسل بزرگ‌تر */
.brand-logo-carousel .nexus-logo-item:hover img {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);

    opacity: 1;

    transform:
        scale(var(--logo-hover-scale))
        translateZ(0);
}


/* حذف کنترل‌های کاروسل المنتور */
.brand-logo-carousel .elementor-swiper-button,
.brand-logo-carousel .elementor-swiper-button-prev,
.brand-logo-carousel .elementor-swiper-button-next,
.brand-logo-carousel .swiper-button-prev,
.brand-logo-carousel .swiper-button-next,
.brand-logo-carousel .swiper-pagination,
.brand-logo-carousel .swiper-pagination-bullets,
.brand-logo-carousel .swiper-pagination-bullet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* تبلت */
@media (max-width: 1024px) {
    .brand-logo-carousel {
        --logo-width: 155px;
        --logo-height: 75px;

        --logo-item-width: 180px;
        --logo-item-height: 102px;

        --logo-hover-scale: 1.0133;
    }
}


/* موبایل */
@media (max-width: 767px) {
    .brand-logo-carousel {
        --logo-width: 135px;
        --logo-height: 65px;

        --logo-item-width: 155px;
        --logo-item-height: 90px;

        --logo-hover-scale: 1.0154;
    }

    .brand-logo-carousel .nexus-logo-item {
        padding: 0 10px;
    }

    .brand-logo-carousel .nexus-logo-item img {
        opacity: 0.68;
    }
}





.brand-logo-carousel .nexus-logo-ticker {
    width: 100%;
    overflow: hidden;
    position: relative;

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 8%,
        #000 92%,
        transparent 100%
    );
}

.brand-logo-carousel .nexus-logo-track {
    display: flex;
    width: max-content;
    transform: translate3d(0, 0, 0);

    animation-name: nexus-logo-move;
    animation-duration: var(
        --nexus-duration,
        40s
    );
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    will-change: transform;
}

.brand-logo-carousel .nexus-logo-group {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 48px;
    padding-inline-end: 48px;
}

.brand-logo-carousel .nexus-logo-item {
    width: 110px;
    height: 110px;
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-carousel .nexus-logo-item > a,
.brand-logo-carousel .nexus-logo-item > span {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-logo-carousel .nexus-logo-item img {
    display: block;

    width: auto;
    height: auto;

    max-width: 88%;
    max-height: 84px;

    object-fit: contain;

    filter: grayscale(1);
    opacity: 0.65;

    transform: translateZ(0);

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}

.brand-logo-carousel .nexus-logo-item:hover img {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}

@media (hover: hover) {
    .brand-logo-carousel
    .nexus-logo-ticker:has(
        .nexus-logo-item:hover
    )
    .nexus-logo-track {
        animation-play-state: paused;
    }
}

@keyframes nexus-logo-move {
    from {
        transform: translate3d(
            0,
            0,
            0
        );
    }

    to {
        transform: translate3d(
            -50%,
            0,
            0
        );
    }
}

@media (
    prefers-reduced-motion: reduce
) {
    .brand-logo-carousel
    .nexus-logo-track {
        animation: none;
    }
}