/*!
 * animate-subset.css
 *
 * Minimal replacement for animate.css v4 (70 KB -> ~1 KB).
 * Only the three animations this theme actually uses are included:
 *   animate__fadeInDown, animate__fadeInDownBig, animate__fadeInUp
 *
 * If a new animate__* class is ever added to a template, add its
 * @keyframes + class here, or re-enqueue the full animate.css in
 * inc/performance.php.
 */

:root {
	--animate-duration: 1s;
	--animate-delay: 1s;
}

.animate__animated {
	animation-duration: 1s;
	animation-duration: var( --animate-duration );
	animation-fill-mode: both;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translate3d( 0, -100%, 0 );
	}

	to {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.animate__fadeInDown {
	animation-name: fadeInDown;
}

@keyframes fadeInDownBig {
	from {
		opacity: 0;
		transform: translate3d( 0, -2000px, 0 );
	}

	to {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.animate__fadeInDownBig {
	animation-name: fadeInDownBig;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translate3d( 0, 100%, 0 );
	}

	to {
		opacity: 1;
		transform: translate3d( 0, 0, 0 );
	}
}

.animate__fadeInUp {
	animation-name: fadeInUp;
}

/*
 * Above-the-fold headings must never wait on wow.js.
 *
 * wow.js writes an inline `visibility: hidden` onto every `.wow` element and
 * only reveals it once its own (deferred) script has run. On the banner that
 * puts the largest text of the page behind a JS round-trip, which is exactly
 * what Largest Contentful Paint measures. Paint these immediately instead.
 */
.home-banner .banner-title,
.inner-banner .banner-title,
.home-banner .banner-caption,
.inner-banner .banner-caption {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
}

@media ( prefers-reduced-motion: reduce ) {
	.animate__animated {
		animation: none !important;
	}

	.wow {
		visibility: visible !important;
	}
}