.typefx {
	--typefx-min-size: 2.8rem;
	--typefx-max-size: 8.6rem;
	--typefx-fluid-size: 8vw;
	--typefx-min-weight: 260;
	--typefx-max-weight: 900;

	width: 100%;
	margin: 0;
	font-size: clamp(var(--typefx-min-size), var(--typefx-fluid-size), var(--typefx-max-size));
	font-weight: var(--typefx-min-weight);
	/* Roboto Flex benötigt bei großen variablen Gewichten etwas mehr vertikalen
	 * Paint-Raum. Das verhindert insbesondere WebKit-Clipping an Glyphenkanten. */
	line-height: 1.18;
	letter-spacing: 0.01em;
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
	overflow: visible;
}

.typefx__line {
	display: block;
	width: max-content;
	white-space: nowrap;
	overflow: visible;
}

.typefx__word {
	display: inline-block;
	font-weight: var(--typefx-min-weight);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 14;
	overflow: visible;
	transition: font-weight 90ms linear;
}

/* Auf Touch-Geräten setzt JavaScript nur in konfigurierbaren Abständen neue
 * virtuelle Zielpositionen. Die eigentliche Weight-Bewegung interpoliert der
 * Browser; dadurch bleibt der Effekt auch auf Mobile Safari ruhig und leicht. */
.typefx--simulated .typefx__word {
	transition-duration: 1800ms;
	transition-timing-function: ease-in-out;
}

/* Reale Touch-/Pointer-Eingaben sollen dagegen direkt reagieren. */
.typefx--simulated.typefx--interacting .typefx__word {
	transition-duration: 90ms;
	transition-timing-function: linear;
}

.typefx--measuring .typefx__word {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}