/**
 * Bewegung – minimal und reduziert.
 *
 * .reveal: Sektionen blenden beim ersten Erscheinen sanft ein (opacity +
 * kurzer Versatz). Ohne JS (kein .has-js) oder bei „Bewegung reduzieren“
 * ist alles sofort sichtbar – Inhalte bleiben NIE unsichtbar.
 * Reveal nutzt „translate“, Hover-Effekte nutzen „transform“ – so
 * überschreiben sich beide nicht gegenseitig.
 */
.has-js .reveal {
	opacity: 0;
	translate: 0 1.5rem;
	transition:
		opacity var(--duration-slow) var(--ease-out),
		translate var(--duration-slow) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.has-js .reveal.is-visible {
	opacity: 1;
	translate: 0 0;
}

.reveal--d1 { --reveal-delay: 90ms; }
.reveal--d2 { --reveal-delay: 180ms; }
.reveal--d3 { --reveal-delay: 270ms; }

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

	.has-js .reveal {
		opacity: 1;
		translate: none;
	}
}