/* Letters dansen: zie letters-dansen.js. Kleur = paletkleur "primary" (goud). */

.ld-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ld-woord {
	white-space: nowrap;
}

.ld-letter {
	display: inline-block;
	position: relative;
}

.ld-b {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	color: var(--wp--preset--color--primary);
}

.ld-letter.ld-aan .ld-a {
	animation: ld-weg-links 2.1s 0.35s ease-in-out forwards;
}

.ld-letter.ld-r.ld-aan .ld-a {
	animation-name: ld-weg-rechts;
}

.ld-letter.ld-aan .ld-b {
	animation: ld-in-van-rechts 1.4s ease-in-out forwards;
}

.ld-letter.ld-r.ld-aan .ld-b {
	animation-name: ld-in-van-links;
}

@keyframes ld-weg-links {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(-150%); }
}

@keyframes ld-weg-rechts {
	from { opacity: 1; transform: translateX(0); }
	to { opacity: 0; transform: translateX(150%); }
}

@keyframes ld-in-van-rechts {
	from { opacity: 0; transform: translateX(150%); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes ld-in-van-links {
	from { opacity: 0; transform: translateX(-150%); }
	to { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ld-letter .ld-a,
	.ld-letter .ld-b {
		animation: none !important;
	}
}