/* === Subtle Animations (WCAG 2.1 AA) === */

/* --- Bazowe stany --- */
.fade-in,
.slide-up,
.slide-down,
.slide-left,
.slide-right,
.zoom-in,
.zoom-out {
	opacity: 0.95;
	transform: none;
	transition: opacity 0.7s ease-out, transform 0.25s ease-out;
}

/* --- Widoczność --- */
.fade-in.visible,
.slide-up.visible,
.slide-down.visible,
.slide-left.visible,
.slide-right.visible,
.zoom-in.visible,
.zoom-out.visible {
	opacity: 1;
	transform: none;
}

/* --- Kierunki --- */
.slide-up {
	transform: translateY(20px);
}
.slide-down {
	transform: translateY(-20px);
}
.slide-left {
	transform: translateX(-20px);
}
.slide-right {
	transform: translateX(20px);
}

.slide-up.visible,
.slide-down.visible,
.slide-left.visible,
.slide-right.visible {
	transform: translate(0, 0);
}

/* --- Zoom --- */
.zoom-in {
	opacity: 1;
	transform: scale(0.98);
}
.zoom-out {
	opacity: 1;
	transform: scale(1.02);
}

.zoom-in.visible,
.zoom-out.visible {
	transform: scale(1);
	opacity: 1;
}

/* --- Delay helpers --- */
.anim-delay-100 {
	transition-delay: 0.31s;
}
.anim-delay-200 {
	transition-delay: 0.42s;
}
.anim-delay-300 {
	transition-delay: 0.53s;
}
.anim-delay-400 {
	transition-delay: 0.64s;
}
.anim-delay-500 {
	transition-delay: 0.75s;
}

/* === Mobile fallback: slide → slide-up === */
@media screen and (max-width: 600px) {
	.slide-down,
	.slide-left,
	.slide-right {
		transform: translateY(20px);
	}

	.slide-down.visible,
	.slide-left.visible,
	.slide-right.visible {
		transform: translateY(0);
	}
}

/* === Accessibility: prefer-reduced-motion === */
@media (prefers-reduced-motion: reduce) {
	.fade-in,
	.slide-up,
	.slide-down,
	.slide-left,
	.slide-right,
	.zoom-in,
	.zoom-out {
		transition: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}