/**
 * Testimonials Infinite Scroll
 * Duas fileiras: primeira → direita, segunda → esquerda
 * Pausa no hover via JS
 *
 * @package prevente
 */

@layer utilities {
    .testimonials-scroll-container {
        overflow: hidden;
        mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
        -webkit-mask-image: linear-gradient(
            to right,
            transparent,
            black 10%,
            black 90%,
            transparent
        );
    }

    .testimonials-track {
        display: flex;
        gap: 1.5rem;
        will-change: transform;
        width: fit-content;
    }

    .testimonials-track-row-1 {
        animation: scroll-right 40s linear infinite;
    }

    .testimonials-track-row-2 {
        animation: scroll-left 40s linear infinite;
    }

    .testimonials-track.paused {
        animation-play-state: paused !important;
    }

    .testimonials-card {
        flex: 0 0 auto;
        min-width: 20rem;
        max-width: 20rem;
    }

    @media (min-width: 640px) {
        .testimonials-card {
            min-width: 24rem;
            max-width: 24rem;
        }
    }

    @keyframes scroll-right {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-50% - 0.75rem));
        }
    }

    @keyframes scroll-left {
        0% {
            transform: translateX(calc(-50% - 0.75rem));
        }
        100% {
            transform: translateX(0);
        }
    }
}