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

@layer demo {
	body {
		height: 3000vh;
		font-family: "Jura", sans-serif;
	}

	.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;
		border: 10px solid white;
		box-shadow: 0 0 10px 12px rgb(1 1 1 / 0.15);

		background-image: url("galop.webp");
		background-repeat: no-repeat;
		background-size: calc(var(--w) * var(--frames)) 100%;

		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;
		}
	}
}

/* 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: "Sorry, your browser doesn't support animation-timeline";
				position: fixed;
				top: 1rem;
				left: 50%;
				translate: -50% 0;
				font-size: 0.8rem;
				color: red;
			}
		}
	}
}