/**
 * WP Miasto Stron — animacje wejścia
 *
 * POJEDYNCZE BLOKI (dodaj klasę do bloku):
 *   .fade-in-up, .fade-in-left, .fade-in-right
 *
 * SEKWENCJA / STAGGER (dodaj klasę do RODZICA, np. blok kolumn):
 *   .anim-stagger-up, .anim-stagger-left, .anim-stagger-right
 *   → bezpośrednie dzieci animują się po kolei.
 *
 * NADPISANIE ODSTĘPU (klasa na tym samym rodzicu co stagger):
 *   .stagger-fast (0.1s), .stagger-slow (0.35s)
 *   domyślnie: 0.2s
 *
 * Klasa .wpms-in jest dodawana przez JS, gdy element wejdzie w viewport.
 */

:root {
	--wpms-anim-duration: 0.6s;
	--wpms-anim-distance: 24px;
	--wpms-stagger-gap: 0.2s;
}

/* Nadpisanie odstępu staggera */
.stagger-fast { --wpms-stagger-gap: 0.1s; }
.stagger-slow { --wpms-stagger-gap: 0.35s; }

/* ---- Stan początkowy (ukryte przed animacją) ---- */
.fade-in-up,
.fade-in-left,
.fade-in-right,
.anim-stagger-up > *,
.anim-stagger-left > *,
.anim-stagger-right > * {
	opacity: 0;
	will-change: opacity, transform;
	transition:
		opacity var(--wpms-anim-duration) ease,
		transform var(--wpms-anim-duration) ease;
}

.fade-in-up,
.anim-stagger-up > * {
	transform: translateY(var(--wpms-anim-distance));
}

.fade-in-left,
.anim-stagger-left > * {
	transform: translateX(calc(var(--wpms-anim-distance) * -1));
}

.fade-in-right,
.anim-stagger-right > * {
	transform: translateX(var(--wpms-anim-distance));
}

/* ---- Stan po wejściu w viewport ---- */
.fade-in-up.wpms-in,
.fade-in-left.wpms-in,
.fade-in-right.wpms-in,
.anim-stagger-up.wpms-in > *,
.anim-stagger-left.wpms-in > *,
.anim-stagger-right.wpms-in > * {
	opacity: 1;
	transform: none;
}

/* ---- Stagger: opóźnienie kolejnych dzieci ---- */
.anim-stagger-up.wpms-in > *,
.anim-stagger-left.wpms-in > *,
.anim-stagger-right.wpms-in > * {
	transition-delay: calc(var(--wpms-stagger-gap) * var(--wpms-i, 0));
}

/* ---- Dostępność: respektuj prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
	.fade-in-up,
	.fade-in-left,
	.fade-in-right,
	.anim-stagger-up > *,
	.anim-stagger-left > *,
	.anim-stagger-right > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}