@import "tailwindcss";

@layer base {
    :root {
        --scroll-t: 30s;
        --scroll-c: 6;
        --scroll-w: 300px;
    }
}

@theme {
    @keyframes scroll-to-left {
        to {
            left: calc(var(--scroll-w) * -1);
        }
    }
    --animate-scroll: scroll-to-left var(--scroll-t) linear infinite;
}

@utility scroll-delay-* {
    animation-delay: calc(var(--scroll-t) / var(--scroll-c) * (var(--scroll-c) - --value(integer)) * -1);
}

@utility animate-paused {
    animation-play-state: paused;
}

@utility left-scroll {
    left: max(calc(var(--scroll-w) * var(--scroll-c)), 100%);
}

export default function Page() {
    return (
        <div className="bg-slate-100 py-32">
            <div className="max-w-7xl mx-auto h-30 relative bg-slate-200 overflow-hidden mask-x-from-85% group *:cursor-pointer">
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-0 group-hover:animate-paused"/>
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-1 group-hover:animate-paused"/>
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-2 group-hover:animate-paused"/>
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-3 group-hover:animate-paused"/>
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-4 group-hover:animate-paused"/>
                <div className="w-(--scroll-w) bg-cyan-500 h-full absolute left-scroll animate-scroll scroll-delay-5 group-hover:animate-paused"/>
            </div>
        </div>
    )
}