/* Estilos para animaciones al hacer scroll */

/* Clase base para elementos que se animarán */
.animate {
  opacity: 0;
  transition: all 1s ease-out;
}

/* Animación de fade in */
.fade-in {
  opacity: 0;
}

.fade-in.animated {
  opacity: 1;
}

/* Animación de slide up */
.slide-up {
  opacity: 0;
  transform: translateY(30px);
}

.slide-up.animated {
  opacity: 1;
  transform: translateY(0);
}

/* Animación de slide in desde la izquierda */
.slide-left {
  opacity: 0;
  transform: translateX(-30px);
}

.slide-left.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Animación de slide in desde la derecha */
.slide-right {
  opacity: 0;
  transform: translateX(30px);
}

.slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Animación de zoom in */
.zoom-in {
  opacity: 0;
  transform: scale(0.95);
}

.zoom-in.animated {
  opacity: 1;
  transform: scale(1);
}

/* Diferentes duraciones para crear efectos escalonados */
.delay-100 {
  transition-delay: 100ms;
}

.delay-200 {
  transition-delay: 200ms;
}

.delay-300 {
  transition-delay: 300ms;
}

.delay-400 {
  transition-delay: 400ms;
}

.delay-500 {
  transition-delay: 500ms;
}