/*
 * Bewegung. Nur auf der Website geladen, nie im Editor.
 * Startzustände gelten nur für Teile, die das Skript vorher markiert hat. Läuft das Skript
 * nicht, bleibt alles sichtbar.
 */

/* Wort für Wort: das Skript hüllt jedes Wort in .klw-w */
.klw-w {
	display: inline-block;
	opacity: 0;
	filter: blur(6px);
	color: var(--wp--preset--color--hell);
	transition: opacity .6s, filter .6s, color .6s;
}
.klw-w.an { opacity: 1; filter: none; color: inherit; }

/* Unsichtbare Kopie des Satzes für Bildschirmleser */
.klw-vorlesen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Nacheinander: Kinder der Gruppe erscheinen der Reihe nach */
.is-style-nacheinander.klw-wartet > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .8s ease, transform var(--wp--custom--bewegung--dauer) var(--wp--custom--bewegung--kurve);
}
.is-style-nacheinander.klw-da > * { opacity: 1; transform: none; }
.is-style-nacheinander > :nth-child(2) { transition-delay: .15s; }
.is-style-nacheinander > :nth-child(3) { transition-delay: .3s; }
.is-style-nacheinander > :nth-child(4) { transition-delay: .45s; }
.is-style-nacheinander > :nth-child(n+5) { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.klw-w { opacity: 1; filter: none; color: inherit; transition: none; }
	.is-style-nacheinander.klw-wartet > * { opacity: 1; transform: none; transition: none; }
}