:root {
	--ap-fade-in-duration: 1s;
	--ap-fade-in-easing: ease-out;
	--ap-fade-in-offset: 30px;
}

.ap-fade-in-viewport {
	opacity: 0;
	transform: translateY(var(--ap-fade-in-offset));
	transition:
		opacity var(--ap-fade-in-duration) var(--ap-fade-in-easing),
		transform var(--ap-fade-in-duration) var(--ap-fade-in-easing);
	will-change: opacity, transform;
}

.ap-fade-in-viewport.ap-in-viewport {
	opacity: 1;
	transform: translateY(0);
}

.ap-fade-in-viewport:nth-child(1) {
	transition-delay: 0.05s;
}

.ap-fade-in-viewport:nth-child(2) {
	transition-delay: 0.10s;
}

.ap-fade-in-viewport:nth-child(3) {
	transition-delay: 0.15s;
}

.ap-fade-in-viewport:nth-child(4) {
	transition-delay: 0.20s;
}

.ap-fade-in-viewport:nth-child(5) {
	transition-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {
	.ap-fade-in-viewport {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
}