/* Subtle fade-in for page content. Only active once JS has tagged the page. */
.wh-fade-js .wh-fade {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.8s ease-out, transform 0.8s ease-out;
	transition-delay: var(--wh-fade-delay, 0s);
	will-change: opacity, transform;
}
/* Direction variations */
.wh-fade-js .wh-fade.wh-from-left {
	transform: translateX(-24px);
}
.wh-fade-js .wh-fade.wh-from-right {
	transform: translateX(24px);
	transition-duration: 1s;
}
.wh-fade-js .wh-fade.wh-from-top {
	transform: translateY(-14px);
}
.wh-fade-js .wh-fade.is-visible {
	opacity: 1;
	transform: none;
}

/* Selling page: the teal rule under the statement draws out once the statement is in */
.wh-fade-js .wh-statement.wh-fade::after {
	width: 0;
	transition: width 0.8s ease-out 0.5s;
}
.wh-fade-js .wh-statement.wh-fade.is-visible::after {
	width: 72px;
}

@media (prefers-reduced-motion: reduce) {
	.wh-fade-js .wh-fade,
	.wh-fade-js .wh-fade::after {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wh-fade-js .wh-statement.wh-fade::after {
		width: 72px;
	}
}