.animar {
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: 
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.animar.aparecer {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* delays */
.delay1 { transition-delay: 0.2s; }
.delay2 { transition-delay: 0.4s; }
.delay3 { transition-delay: 0.6s; }
.delay4 { transition-delay: 0.8s; }



/* ANIMAÇÃO BASE */
.animar {
  opacity: 0;
  transition: all 0.8s ease;
}

/* VEM DA ESQUERDA */
.animar.esquerda {
  transform: translateX(-80px);
}

/* VEM DA DIREITA */
.animar.direita {
  transform: translateX(80px);
}

/* QUANDO APARECE */
.animar.ativo {
  opacity: 1;
  transform: translateX(0);
}