/* =========================================================
   Animaciones globales de entrada
   =========================================================
   Uso:
     - Añadir la clase `km-anim` + una variante (`km-anim--fade`,
       `km-anim--up`, `km-anim--down`, `km-anim--left`,
       `km-anim--right`, `km-anim--zoom`) al elemento a animar.
     - Para escalonar (stagger), añadir en el elemento
       `style="--km-anim-d: .12s"` con el delay individual.
     - El JS (assets/js/animations.js) usa IntersectionObserver
       para añadir `.is-in` cuando el elemento entra al viewport.
   Respeta `prefers-reduced-motion`.
   ========================================================= */

.km-anim {
	opacity: 0;
	transition:
		opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1),
		transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: var(--km-anim-d, 0s);
	will-change: opacity, transform;
}

.km-anim--up    { transform: translateY(30px); }
.km-anim--down  { transform: translateY(-30px); }
.km-anim--left  { transform: translateX(-40px); }
.km-anim--right { transform: translateX(40px); }
.km-anim--zoom  { transform: scale(0.94); }
.km-anim--fade  { transform: none; }

.km-anim.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.km-anim,
	.km-anim.is-in {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}