.word-fade-heading .word-fade-heading__word {
	display: inline-block;
	opacity: 0;
}

.word-fade-heading--animated .word-fade-heading__word {
	animation: word-fade-heading-in var(--word-fade-duration, 750ms) ease forwards;
}

@keyframes word-fade-heading-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.word-fade-heading__word {
		opacity: 1;
	}
}