.hero-intro {
	opacity: 0;
	transform: scale(5) translateY(-6vh);
	transform-origin: center top;
}

.hero-intro.is-falling {
	animation: hero-fall-in 950ms cubic-bezier(0.2, 0.9, 0.25, 1) forwards;
}

.hero-intro.is-falling[data-intro-delay="1"] {
	animation-delay: 180ms;
}

.hero-intro.is-falling[data-intro-delay="2"] {
	animation-delay: 340ms;
}

.hero-intro.intro-done {
	animation: none;
	opacity: 1;
	transform: none;
}

@keyframes hero-fall-in {
	0% {
		opacity: 0;
		transform: scale(5) translateY(-6vh);
	}

	55% {
		opacity: 1;
		transform: scale(0.94) translateY(0.35rem);
	}

	78% {
		transform: scale(1.035) translateY(0);
	}

	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-intro,
	.hero-intro.is-falling {
		animation: none;
		opacity: 1;
		transform: none;
	}
}