@keyframes scf-clients-scroll-left {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(-50%);
        }
    }

    @keyframes scf-clients-scroll-right {
        0% {
            transform: translateX(0);
        }

        100% {
            transform: translateX(50%);
        }
    }

    .scf-clients-scroll-row {
        display: flex;
        width: max-content;
        animation: scf-clients-scroll-left 30s linear infinite;
    }

    .scf-clients-scroll-row.scf-clients-reverse {
        animation: scf-clients-scroll-right 30s linear infinite;
    }

    .scf-clients-scroll-container {
        position: relative;
        overflow: hidden;
    }

    .scf-clients-scroll-container::before,
    .scf-clients-scroll-container::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 80px;
        pointer-events: none;
        z-index: 10;
    }

    .scf-clients-scroll-container::before {
        left: 0;
        background: linear-gradient(to right, #f9fafb, transparent);
    }

    .scf-clients-scroll-container::after {
        right: 0;
        background: linear-gradient(to left, #f9fafb, transparent);
    }

    .scf-clients-scroll-container:hover .scf-clients-scroll-row,
    .scf-clients-scroll-container.scf-clients-touch-paused .scf-clients-scroll-row {
        animation-play-state: paused;
    }

    .scf-clients-fade-in {
        opacity: 0;
        transition: opacity 1s ease-in;
    }

    .scf-clients-fade-in[data-loaded="true"] {
        opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
        .scf-clients-scroll-row {
            animation: none !important;
        }
    }