/* ==========================================================================
   MaklerPress Animations
   Version: 1.28.0-dev
   Scroll-Triggered Reveals via Intersection Observer + CSS.
   Animiert wird ausschließlich über transform/opacity (GPU-composited).
   ========================================================================== */

/* --- Basis: Elemente vor Sichtbarkeit --- */
[data-mp-animate] {
	opacity: 0;
	transition-property: opacity, transform;
	transition-timing-function: ease;
	transition-duration: var(--mp-anim-duration, 0.55s);
	transition-delay: var(--mp-anim-delay, 0s);
	will-change: opacity, transform;
}

/* --- Varianten: Ausgangsposition --- */
[data-mp-animate="fade-up"]    { transform: translateY(28px); }
[data-mp-animate="fade-down"]  { transform: translateY(-28px); }
[data-mp-animate="fade-left"]  { transform: translateX(28px); }
[data-mp-animate="fade-right"] { transform: translateX(-28px); }
[data-mp-animate="scale"]      { transform: scale(0.94); }
[data-mp-animate="fade-in"]    { transform: none; }

/* --- Sichtbar-Zustand (gesetzt per JS) --- */
[data-mp-animate].mp-animate--visible {
	opacity: 1;
	transform: none;
}

/* --- Verzögerungen per data-Attribut (werden per JS als CSS-Variable gesetzt) --- */
/* Bsp: data-mp-delay="200" setzt --mp-anim-delay: 200ms */

/* --- Stagger-Kinder: Geschwister erhalten automatisch gestaffelte Delays --- */
.mp-stagger > [data-mp-animate]:nth-child(1) { --mp-anim-delay: 0ms; }
.mp-stagger > [data-mp-animate]:nth-child(2) { --mp-anim-delay: 80ms; }
.mp-stagger > [data-mp-animate]:nth-child(3) { --mp-anim-delay: 160ms; }
.mp-stagger > [data-mp-animate]:nth-child(4) { --mp-anim-delay: 240ms; }
.mp-stagger > [data-mp-animate]:nth-child(5) { --mp-anim-delay: 320ms; }
.mp-stagger > [data-mp-animate]:nth-child(6) { --mp-anim-delay: 400ms; }

/* --- Hover-Effekte für interaktive Elemente --- */
.mp-card {
	transition:
		transform var(--mp-transition-base, 250ms ease),
		box-shadow var(--mp-transition-base, 250ms ease);
}
.mp-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--mp-shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
}

.mp-card__image {
	transition: transform var(--mp-transition-slow, 400ms ease);
	overflow: hidden;
}
.mp-card:hover .mp-card__image {
	transform: scale(1.04);
}

/* --- Reduced Motion: Animationen komplett deaktivieren --- */
@media (prefers-reduced-motion: reduce) {
	[data-mp-animate] {
		opacity: 1;
		transform: none;
		transition: none;
		will-change: auto;
	}
	.mp-card,
	.mp-card__image {
		transition: none;
	}
	.mp-card:hover {
		transform: none;
	}
	.mp-card:hover .mp-card__image {
		transform: none;
	}
}