/*
 * Scroll-Reveal: IMMER opacity:1 im Ruhezustand — nur transform wird animiert,
 * sonst bleiben Sections in Full-Page-Screenshots/Crawlern ohne Scroll-Event leer.
 */

.reveal {
	opacity: 1;
}

.js-motion .reveal {
	transform: translateY(22px);
	transition: transform var(--duration-slow) var(--ease-out);
	transition-delay: calc(var(--reveal-i, 0) * 60ms);
}

.js-motion .reveal.is-visible {
	transform: translateY(0);
}

/* Hero: sanfte Einblendung beim Laden */

.js-motion .hero-slide__kicker,
.js-motion .hero-slide__title,
.js-motion .hero-slide__excerpt,
.js-motion .hero-slide__inner .btn {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.js-motion .hero-slide.is-active .hero-slide__kicker { transition-delay: 80ms; }
.js-motion .hero-slide.is-active .hero-slide__title { transition-delay: 160ms; }
.js-motion .hero-slide.is-active .hero-slide__excerpt { transition-delay: 240ms; }
.js-motion .hero-slide.is-active .hero-slide__inner .btn { transition-delay: 320ms; }

.js-motion .hero-slide.is-active .hero-slide__kicker,
.js-motion .hero-slide.is-active .hero-slide__title,
.js-motion .hero-slide.is-active .hero-slide__excerpt,
.js-motion .hero-slide.is-active .hero-slide__inner .btn {
	opacity: 1;
	transform: translateY(0);
}

/* prefers-reduced-motion: nur Opacity/instant, keine Transform-Bewegung */

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

	.js-motion .reveal,
	.js-motion .hero-slide__kicker,
	.js-motion .hero-slide__title,
	.js-motion .hero-slide__excerpt,
	.js-motion .hero-slide__inner .btn {
		transform: none !important;
	}
}