/* Estados iniciales - elementos ocultos */
.animate-on-scroll {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fade-in-up {
  transform: translateY(50px);
}

.fade-in-down {
  transform: translateY(-50px);
}

.fade-in-left {
  transform: translateX(50px);
}

.fade-in-right {
  transform: translateX(-50px);
}

/* Estados visibles - animaciones activadas */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Animaciones adicionales con delays escalonados */
.animate-on-scroll.delay-100 {
  transition-delay: 0.1s;
}

.animate-on-scroll.delay-200 {
  transition-delay: 0.2s;
}

.animate-on-scroll.delay-300 {
  transition-delay: 0.3s;
}

.animate-on-scroll.delay-400 {
  transition-delay: 0.4s;
}

/* Animación especial para elementos que requieren más atención */
.animate-on-scroll.scale-in {
  transform: scale(0.8);
}

.animate-on-scroll.scale-in.is-visible {
  transform: scale(1);
}

/* Efectos de rotación sutil */
.animate-on-scroll.rotate-in {
  transform: rotate(-5deg) scale(0.9);
}

.animate-on-scroll.rotate-in.is-visible {
  transform: rotate(0deg) scale(1);
}

/* Configuraciones de duración personalizadas */
.animate-slow {
  transition-duration: 1.2s;
}

.animate-fast {
  transition-duration: 0.4s;
}