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

    body {
        height: 3000vh; /* Вернули высоту, чтобы крутилось руками */
        font-family: "Jura", sans-serif;
        background: #000;
        
        /* Добавь это: фиксит баг залипания на мобилах */
        overflow-y: scroll; 
    }
    
 
	.horse {
		--frames: 17; /* number of photos/images in sequence*/
		--steps: calc(var(--frames) - 1);
		--iterations: 80; /* number of times to iterate during the scroll */
		--w: min(80vw, 500px);

		position: fixed;
		inset: 0;
		margin: auto;
		width: var(--w);
		aspect-ratio: 16/9;
		/*height: calc(var(--w) * 9 / 16);*/

        /* Тень теперь на внешних границах обертки, не лезет на картинку */
        /*box-shadow: 0 0 10px 10px #000 inset;  */
        
        /* Скругление углов экрана (по желанию) */
        border-radius: 10px; 


		background: url("galop.webp") #fff;
		background-repeat: no-repeat;
	
	background-size: calc(var(--w) * var(--frames)) auto;

		animation: --body-scroll steps(var(--steps)) both;
		animation-timeline: scroll(root);
		animation-iteration-count: var(--iterations);
	}

	@keyframes --body-scroll {
		to {
			background-position: calc(var(--w) * (var(--frames) - 1) * -1) 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%; /* анимация на весь скролл */
}

@keyframes mouse-fade {
  0% {
    opacity: 1;
  }
  20% {  /* на 20% прокрутки */
    opacity: 0.2;  /* уже 0.2 */
  }
  100% {
    opacity: 0.2;  /* и держится до конца */
  }
}

/* general styling not relevant for this demo */
@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;
        }
    }