/* ============================================================
   Animationen: Scroll-Reveal (transform-only, NIE opacity als
   Startzustand - Sektionen bleiben ohne JS voll sichtbar),
   Hero-Einblendung, Micro-Interactions, Reduced-Motion.
   ============================================================ */

/* Default: voll sichtbar (kein JS -> keine leere Seite) */
.reveal {
	transform: none;
	transition: transform 700ms var(--ease-out);
}

/* Wird per JS gesetzt, sobald IntersectionObserver aktiv ist */
.reveal.reveal-armed {
	transform: translateY(30px);
}
.reveal.reveal-armed.is-visible {
	transform: translateY(0);
}

/* Gestaffelte Kinder (Service-Reihen, Kontakt-Infos) */
.reveal-stagger.reveal-armed > * {
	transform: translateY(24px);
	transition: transform 650ms var(--ease-out);
}
.reveal-stagger.reveal-armed.is-visible > * {
	transform: translateY(0);
}

/* Hero: sanfte Einblendung beim Laden (nur transform, Endzustand default sichtbar) */
.hero-inner {
	animation: fpss-hero-in 800ms var(--ease-out) both;
}
@keyframes fpss-hero-in {
	from { transform: translateY(18px); }
	to { transform: translateY(0); }
}

/* Micro-Interactions: Karten/Zeilen leicht anheben bei Hover */
.service-row,
.about-teaser-media,
.contact-teaser-map {
	transition: transform var(--dur-base) var(--ease-out);
}

.slide-img { transition: transform 900ms var(--ease-out); }

/* Burger-Icon Transition */
.burger .icon { transition: transform var(--dur-fast) var(--ease-out); }
.burger[aria-expanded="true"] .icon { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal,
	.reveal.reveal-armed,
	.reveal-stagger.reveal-armed > *,
	.hero-inner,
	.service-media img,
	.slide-img,
	.burger .icon {
		transition: opacity 200ms linear !important;
		animation: none !important;
		transform: none !important;
	}
}