/**
 * King-Media: beweging.
 *
 * 1. Binnenkomen bij scrollen (klasse via motion.js, animatie in CSS).
 * 2. Tijdlijn: punt en lijn bij binnenkomen, puls op het laatste item.
 * Hover en overige beweging staan per blok in assets/css/blocks/.
 *
 * Alles alleen bij prefers-reduced-motion: no-preference. De hero animeert
 * bewust niet (LCP). Binnenkomen animeert `opacity` + `translate`, hover gebruikt
 * `transform`: zo zitten de twee elkaar niet in de weg.
 */

@keyframes km-reveal {
	from {
		opacity: 0;
		translate: 0 2.5rem;
	}
	to {
		opacity: 1;
		translate: none;
	}
}

/* 1. Binnenkomen bij scrollen ------------------------------------------------
 * motion.js zet .km-reveal op elementen die nog niet in beeld zijn en voegt
 * .is-visible toe zodra ze binnenkomen. Zonder JS blijft alles zichtbaar. */
@media (prefers-reduced-motion: no-preference) {
	.km-reveal {
		opacity: 0;
		translate: 0 2.5rem;
	}
	.km-reveal.is-visible {
		animation: km-reveal 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--km-delay, 0ms) both;
	}
}

/* 2. Tijdlijn (km-milestone) ------------------------------------------------
 * Kettingreactie bij binnenkomen: item verschijnt, punt springt erin en de lijn
 * groeit naar het volgende item, waarvan de punt verschijnt zodra de lijn er is.
 * Ritme: 400ms per item (4x de gewone vertraging). Het laatste item ("nu")
 * houdt een zachte puls. */
@keyframes km-pop {
	from {
		transform: scale(0);
	}
	to {
		transform: none;
	}
}

@keyframes km-grow {
	from {
		transform: scaleY(0);
	}
	to {
		transform: none;
	}
}

@keyframes km-pulse {
	from {
		box-shadow: 0 0 0 4px var(--wp--preset--color--brand-50), 0 0 0 4px rgb(0 89 255 / 0.35);
	}
	to {
		box-shadow: 0 0 0 4px var(--wp--preset--color--brand-50), 0 0 0 16px rgb(0 89 255 / 0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.is-style-km-milestone {
		--km-step: calc(var(--km-delay, 0ms) * 4);
	}
	.is-style-km-milestone.km-reveal.is-visible {
		animation-delay: var(--km-step);
	}
	.is-style-km-milestone.km-reveal::before {
		transform-origin: top;
		transform: scaleY(0);
	}
	.is-style-km-milestone.km-reveal::after {
		transform: scale(0);
	}
	.is-style-km-milestone.km-reveal.is-visible::before {
		animation: km-grow 0.35s cubic-bezier(0.4, 0, 0.2, 1) calc(var(--km-step) + 0.2s) both;
	}
	.is-style-km-milestone.km-reveal.is-visible::after {
		animation: km-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--km-step) + 0.15s) both;
	}
	.is-style-km-milestone:last-child::after {
		animation: km-pulse 1.8s ease-out 1s infinite;
	}
	.is-style-km-milestone.km-reveal:last-child::after {
		animation: none;
	}
	.is-style-km-milestone.km-reveal.is-visible:last-child::after {
		animation: km-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1) calc(var(--km-step) + 0.15s) both, km-pulse 1.8s ease-out calc(var(--km-step) + 0.8s) infinite;
	}
}