/* ==========================================================================
   Scroll-Reveal & Micro-Interactions
   Hard rule: reveal end-state is ALWAYS visible in plain HTML (no opacity:0
   start). We animate position only (transform), never visibility, so a
   headless render without JS still shows full content.
   ========================================================================== */

.reveal {
	transform: translateY(26px);
	transition: transform 760ms var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

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

.reveal--left {
	transform: translateX(-24px);
}

.reveal--left.is-visible {
	transform: translateX(0);
}

.reveal--scale {
	transform: scale(0.97);
}

.reveal--scale.is-visible {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.reveal,
	.reveal--left,
	.reveal--scale {
		transition: none !important;
		transform: none !important;
	}

	.hero-slide {
		transition: none !important;
	}

	* {
		scroll-behavior: auto !important;
	}
}

/* --- Hover elevation (dezent, keine Pflicht-Overlays) ---------------------- */
.elevate {
	transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}

.elevate:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-2px);
}

/* --- Settle-in for the hero on first paint (transform only, never opacity:0
   — the hero must render fully visible even if JS never runs). ------------- */
.hero-slider {
	transform: scale(1.02);
	transition: transform 1100ms var(--ease-out);
}

.hero-slider.is-loaded {
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.hero-slider {
		transform: none;
		transition: none;
	}
}