.blur-fx {
	box-sizing: border-box;
}

.blur-fx-inner {
	display: inline;
}

.blur-fx-word {
	display: inline-block;
	white-space: nowrap;
}

.blur-fx-space {
	display: inline;
	white-space: normal;
}

.blur-fx-char {
	display: inline-block;
	opacity: 0;
	filter: blur(30px);
	will-change: filter, opacity;
}

.blur-fx.is-in-view .blur-fx-char {
	animation:
		blurFxPhase1 var(--fade-duration, 0.9s) cubic-bezier(0.25, 1, 0.5, 1)
			forwards 0s,
		blurFxPhase2 var(--blur-duration, 0.7s) cubic-bezier(0.16, 1, 0.3, 1)
			forwards;
	animation-delay:
		0s,
		calc(
			var(--char-index, 0) * var(--blur-stagger, 0.035s) +
				var(--fade-duration, 0.45s)
		);
}

@keyframes blurFxPhase1 {
	0% {
		opacity: 0;
		filter: blur(30px);
	}
	100% {
		opacity: 1;
		filter: blur(10px);
	}
}

@keyframes blurFxPhase2 {
	0% {
		filter: blur(10px);
	}
	100% {
		filter: blur(0px);
	}
}

@media (max-width: 768px) {
	.blur-fx {
		--fade-duration: 0.7s;
		--blur-duration: 0.5s;
		--blur-stagger: 0.03s;
	}
}

@media (prefers-reduced-motion: reduce) {
	.blur-fx-char {
		opacity: 1 !important;
		filter: none !important;
		animation: none !important;
	}
}