/* Scroll and load choreography. Everything here is additive: with JavaScript
   disabled or reduced motion switched on, content stays visible and static. */

[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed { opacity: 1; transform: none; }

.no-js [data-reveal] { opacity: 1; transform: none; }

[data-reveal-lines] .line { display: block; overflow: hidden; }
[data-reveal-lines] .line > span {
	display: block;
	transform: translateY(105%);
	transition: transform .9s var(--ease);
	transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal-lines].is-revealed .line > span { transform: none; }

.marquee__track { animation: tfi-marquee 38s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

@keyframes tfi-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

[data-parallax] { will-change: transform; }

.page-enter { animation: tfi-fade .6s var(--ease) both; }

@keyframes tfi-fade {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	[data-reveal],
	[data-reveal-lines] .line > span { opacity: 1 !important; transform: none !important; }

	.cursor { display: none !important; }
}