.scroll-watcher {
	height: 10px;
	position: fixed;

}

@media (prefers-reduced-motion: no-preference) {
	@screen sm {
		.animate-fade-in {
			animation: none;
		}

	}
	.animate-fade-in {
		animation: fade-in linear forwards;
		animation-timeline: view();
		animation-range-start: entry;
		animation-range-end: contain 100px;
		opacity: 0;
		scale: 0.8;
		will-change: scale, opacity;
	}
	.animate-fade-out-left {
		animation: fade-out-to-left linear forwards;
		animation-timeline: view();
		will-change: scale, opacity;
		animation-range-start: cover 70%;
		animation-range-end: exit 10%;
	}


	.right-to-left {
		animation: right-to-left forwards;
		animation-timeline: view();
		animation-range-start: entry;
		animation-range-end: contain 150px;
		translate: 50% 0;
		will-change: translate;
	}

	.left-to-right {
		animation: right-to-left forwards;
		animation-timeline: view();
		animation-range-start: entry;
		animation-range-end: contain 150px;
		translate: -50% 0;
		will-change: translate;
	}

	.bottom-to-top {
		animation: right-to-left forwards;
		animation-timeline: view();
		animation-range-start: entry;
		animation-range-end: contain 150px;
		translate: 0 50%;
		will-change: translate;
	}

	@keyframes fade-in {
		to {
			scale: 1;
			opacity: 1;
		}
	}

	@keyframes right-to-left {
		to {
			translate: 0 0;
		}
	}

	@keyframes left-to-right {
		to {
			translate: 0 0;
		}
	}

	@keyframes bottom-to-top {
		to {
			translate: 0 0;
		}
	}

	@keyframes fade-out-to-left {
		to {
			translate: -600px 0;
			opacity: 0;
		}

	}

}