@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, mouse, demo;

@layer demo {
    body {
        height: 6000vh;
        font-family: "Jura", sans-serif;
        background: #000;
        overflow-y: scroll;
    }

    .horse {
        --frames: 17;
        --steps: calc(var(--frames) - 1);
        --iterations: 160;
        --w: min(80vw, 600px);

        position: fixed;
        inset: 0;
        margin: auto;
        width: var(--w);
        aspect-ratio: 16/9;
        border-radius: 10px;

        background: url("galop_02.webp");
        background-repeat: no-repeat;
        background-size: calc(var(--w) * var(--frames)) auto;
        
        margin-bottom: 10vh; /* Сдвинет вниз на 10% высоты экрана. Меняй число как нужно */

        animation: --body-scroll steps(var(--steps)) both;
        animation-timeline: scroll(root);
        animation-iteration-count: var(--iterations);
        z-index: 1;
    }
    
    .horse {
    animation: --body-scroll steps(var(--steps)) both,
               horse-move linear both;
    animation-timeline: scroll(root), scroll(root);
    animation-iteration-count: var(--iterations), 1;
}

@keyframes horse-move {
    from {
        transform: translateX(60vw); /* начинает справа */
    }
    to {
        transform: translateX(-65vw); /* уходит влево */
    }
}
    
    

    .fon {
        --frames: 4;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        padding-bottom: 10vh;

        background: url("fon_03.webp") #fff;
        background-repeat: no-repeat;
        background-size: calc(100vw * 4) auto;
        
        /* Используем !important чтобы пробить слой base */
        animation: fon-scroll linear both !important; 
        animation-timeline: scroll(root) !important;

        z-index: 0;
    }

    /* Анимация лошади */
    @keyframes --body-scroll {
        to {
            background-position: calc(var(--w) * (var(--frames) - 1) * -1) 0;
        }
    }
@keyframes fon-scroll {
    from {
        background-position: calc(100vw * -1) 0; /* сдвиг стал больше */
    }
    to {
        background-position: 0 0;
    }
}



@layer mouse {
    .mouse {
        position: fixed;
        bottom: 4rem;
        left: 50%;
        translate: -50% 0;
        display: block;
        width: 50px;
        height: 50px;
        opacity: 1;
        color: rgb(98, 116, 142);
        display: none;
        animation-name: mouse;
        animation-duration: 1s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-timeline: scroll();
        @supports (animation-timeline: scroll()) {
            display: block;
        }
    }
    @keyframes mouse {
        75% { opacity: 1; }
        100% { opacity: 0; }
    }
}

.icon {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    opacity: 1;
    color: rgba(255, 255, 255, 0.5);

    animation: mouse-fade linear;
    animation-timeline: scroll(root);
    animation-range: 0% 100%;
    
    display: none !important;
}

@keyframes mouse-fade {
    0% { opacity: 1; }
    20% { opacity: 0.2; }
    100% { opacity: 0.2; }
}

@layer base {
    * { box-sizing: border-box; }
    :root { --clr-bg: rgb(248, 244, 238); }

    body {
        min-height: 100svh;
        margin: 0;
        padding: 2rem;
        background-color: var(--clr-bg);
        font-family: system-ui, sans-serif;
        font-size: 1rem;
        color: black;
        line-height: 1.5;
        display: grid;
        place-items: center;

        @supports not (animation-timeline: scroll()) {
            &::before {
                content: "Кина не будет! Электричество кончилось, браузер устарел!";
                position: fixed;
                top: 1rem;
                left: 50%;
                translate: -50% 0;
                font-size: 0.8rem;
                color: red;
            }
        }
    }
}

@media (max-width: 768px) {
    body {
        background-color: #000;
        padding: 0;
    }
}