/* =========================
   ANIMACIONES SIN LIBRERÍAS
========================= */

.animate {
  opacity: 0.2;
  transform: translate(0, 0);
  transition: transform 0.8s ease-out, opacity 0.8s ease-out;
  will-change: transform, opacity;
}

.animate.in-view {
  opacity: 1;
  transform: translate(0, 0);
}

/* Direcciones */
.from-left   { transform: translateX(-40px); }
.from-right  { transform: translateX(40px); }
.from-top    { transform: translateY(-40px); }
.from-bottom { transform: translateY(40px); }

/* Opcionales */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* Accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .animate {
    transition: none;
    opacity: 1;
    transform: none;
  }
}