/* assets/css/animacoes.css */

/* Estado inicial (escondido) dos elementos que serão animados */
.animar-fade-in,
.animar-slide-up,
.animar-slide-left,
.animar-slide-right {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Movimentos iniciais */
.animar-slide-up { transform: translateY(50px); }
.animar-slide-left { transform: translateX(-50px); }
.animar-slide-right { transform: translateX(50px); }

/* Estado final (Ativo) - Classe adicionada pelo JavaScript */
.animar-fade-in.visivel,
.animar-slide-up.visivel,
.animar-slide-left.visivel,
.animar-slide-right.visivel {
  opacity: 1;
  transform: translate(0);
}

/* Delays para criar efeito de cascata (um elemento aparecendo após o outro) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }