/**
 * MF Text Reveal — Basisstile.
 *
 * Vor JS-Init bzw. ohne JS: Text ist normal und vollständig sichtbar,
 * kein Layout-Einfluss auf das umgebende Element (z. B. Kadence Row).
 *
 * Ablauf mit JS:
 * 1. ".is-js" wird gesetzt -> Wörter stehen gedimmt UND bereits in der
 *    normalen Textfarbe (hellgrau) da — kein Orange im Ruhezustand.
 * 2. Element kommt in den Viewport -> ".is-revealed" wird gesetzt,
 *    startet pro Wort (per Sprechrhythmus-Delay) eine Keyframe-
 *    Animation: kurz zu Beginn Highlight-Farbe, dann smooth zurück zur
 *    normalen Textfarbe, während opacity parallel auf 1 steigt.
 */

.mf-text-reveal {
	--mf-tr-dim: 0.15;
	--mf-tr-highlight: var(--global-palette1, var(--mf-tr-base-color));
	--mf-tr-duration: 0.8s;
}

.mf-text-reveal .mf-text-reveal__word {
	opacity: 1;
}

.mf-text-reveal.is-js .mf-text-reveal__word {
	/* Ruhezustand: gedimmt, aber bereits in normaler Textfarbe. */
	opacity: var(--mf-tr-dim);
	color: var(--mf-tr-color, var(--mf-tr-base-color));
	will-change: opacity, color;
}

.mf-text-reveal.is-js.is-revealed .mf-text-reveal__word {
	animation: mf-text-reveal-word var(--mf-tr-duration) cubic-bezier(0.33, 0, 0.2, 1) forwards;
}

@keyframes mf-text-reveal-word {
	0% {
		opacity: var(--mf-tr-dim);
		color: var(--mf-tr-color, var(--mf-tr-base-color));
	}
	20% {
		color: var(--mf-tr-highlight);
	}
	100% {
		opacity: 1;
		color: var(--mf-tr-color, var(--mf-tr-base-color));
	}
}

/* Nutzer mit Bewegungsreduktion: Text sofort vollständig sichtbar. */
@media (prefers-reduced-motion: reduce) {
	.mf-text-reveal.is-js .mf-text-reveal__word {
		opacity: 1 !important;
		color: var(--mf-tr-color, var(--mf-tr-base-color)) !important;
		animation: none !important;
	}
}