/*@import "normalize.css";*/

#clients {
    display: grid;
    place-items: center;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background: hsl(0 0% 2%);
}

#clients::before {
    --line: hsl(0 0% 95% / 0.25);
    --size: 60px;
    content: "";
/*
    height: 100vh;
    width: 100vw;
*/
    position: fixed;
    background: linear-gradient(90deg,
            var(--line) 1px,
            transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size),
        linear-gradient(var(--line) 1px, transparent 1px var(--size)) 0 -5vmin / var(--size) var(--size);
    mask: linear-gradient(-15deg, transparent 60%, white);
    top: 0;
/*    z-index: -1;*/
}

#wrapper-slider-logo {
    position: absolute;
    top: 0;
    & .resizable {
        overflow: clip;
        container-type: size;
        scale: var(--scale);
        width: 100vw;
        height: 200px;
        min-height: 100px;
        min-width: 300px;
        max-width: calc(100% - 2rem);
    }

    & .resizable[data-spill="true"] .container-slider-logo::after {
        content: "";
        position: fixed;
        top: 50%;
        left: 50%;
        background: hsl(10 0% 50% / 0.25);
        width: calc(var(--scale) * 10000vw);
        height: calc(var(--scale) * 10000vh);
        pointer-events: none;
        translate: -50% -50%;
        mask: linear-gradient(white, white) 50% 50% / 100% 100% no-repeat,
            linear-gradient(white, white) 50% 50% / 100cqi 100cqh no-repeat;
        mask-composite: exclude;
    }
}

.container-slider-logo {
    height: 100%;
    width: 100%;
    position: relative;
    mask: linear-gradient(90deg, transparent, black 15% 85%, transparent);
    width: 100%;
    display: grid;
    min-height: 100px;
    min-width: 300px;
    pointer-events: none;

    & .blur {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 25%;
        z-index: 2;
        pointer-events: none;

        &.blur--right {
            right: 0;
        }

        &.blur--left {
            left: 0;
            rotate: 180deg;
        }

        & div {
            position: absolute;
            inset: 0;
            z-index: var(--index);
            mask: linear-gradient(90deg,
                    transparent calc(var(--index) * calc((100 / var(--blurs)) * 1%)),
                    black calc((var(--index) + 1) * calc((100 / var(--blurs)) * 1%)),
                    black calc((var(--index) + 2) * calc((100 / var(--blurs)) * 1%)),
                    transparent calc((var(--index) + 3) * calc((100 / var(--blurs)) * 1%)));
            backdrop-filter: blur(calc((var(--index, 0) * var(--blur, 0)) * 1px));
        }
    }

    & .ul-logos {
        display: flex;
        gap: 0.5rem;
        padding: 0;
        margin: 0;
        list-style-type: none;
        height: 100%;
        width: fit-content;
        padding: 0;
        align-items: center;
        pointer-events: none;

        & li {
            height: 80%;
            aspect-ratio: 16 / 9;
            font-size: clamp(2rem, 4vw + 1rem, 8rem);
            display: grid;
            place-items: center;

            & svg {
                fill: white;
                height: 65%;
            }
        }
    }
}

[data-play-state="running"] :is(.ul-logos, .ul-logos li) {
    animation-play-state: running !important;
}

/* The animation stuff */
@media (prefers-reduced-motion: no-preference) {
    [data-translate="items"] .ul-logos {
        gap: 0;
    }

    [data-translate="items"][data-direction="horizontal"].container-slider-logo {
        padding-inline: 0;
    }

    [data-translate="items"] .ul-logos li {
        --duration: calc(var(--speed) * 1s);

        @media (width>768px) {
            --speed: 80;
        }

        --delay: calc((var(--duration) / var(--count)) * (var(--index, 0) * -1));
        animation: slide var(--duration) var(--delay) infinite linear paused;
        translate: var(--origin-x) var(--origin-y);
    }

    [data-translate="items"][data-direction="horizontal"] .ul-logos li {
        --origin-x: calc(((var(--count) - var(--index)) + var(--inset, 0)) * 100%);
        --origin-y: 0;
        --destination-x: calc(calc((var(--index) + 1 + var(--outset, 0)) * -100%));
        --destination-y: 0;
    }

    @keyframes slide {
        100% {
            translate: var(--destination-x) var(--destination-y);
        }
    }
}