/* ANIMACIONES SUAVES */

/* Clase base para elementos que se animarán */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Estado visible */
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variación: Entrada desde la izquierda */
.animate-from-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-from-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variación: Entrada desde la derecha */
.animate-from-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.animate-from-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variación: Fade simple (sin movimiento) */
.animate-fade {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.animate-fade.visible {
  opacity: 1;
}

/* Stagger delay para hijos (opcional) */
.stagger-delay-1 { transition-delay: 0.1s; }
.stagger-delay-2 { transition-delay: 0.2s; }
.stagger-delay-3 { transition-delay: 0.3s; }