/*
 * Bewegungssystem. Wichtig: Startzustände nutzen ausschließlich transform,
 * nie opacity:0 — sonst bleiben Sections in Screenshots/Crawlern leer,
 * bevor JS geladen hat. Der reale Inhalt ist immer sofort sichtbar.
 */

.reveal {
	transform: translateY(28px);
	transition: transform var(--dur-section) var(--ease-out);
	will-change: transform;
}
.reveal.is-visible { transform: translateY(0); }

.reveal-scale {
	transform: scale(0.96);
	transition: transform var(--dur-section) var(--ease-out);
}
.reveal-scale.is-visible { transform: scale(1); }

/* Staffelung für Karten-Raster */
.stagger > * { transition-delay: calc(var(--stagger-i, 0) * 60ms); }

/* Hero Einblendung beim Laden */
.hero-fade {
	transform: translateY(18px);
	transition: transform 720ms var(--ease-out);
}
.hero-fade.is-ready { transform: translateY(0); }

/* Zähler */
.stat-value { font-variant-numeric: tabular-nums; }

/* Micro-Interactions */
a, .service-card, .btn, .dot, .footer-col a {
	transition-property: transform, color, background-color, border-color, box-shadow;
	transition-timing-function: var(--ease-out);
	transition-duration: var(--dur-ui);
}

.tap-scale:active { transform: scale(0.98); }

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