/* Configuração base para elementos animados */
.act-fade-in,
.act-slide-up,
.act-slide-left,
.act-slide-right,
.act-zoom-in,
.act-rotate-in {
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

/* Estado inicial - elementos invisíveis */
.act-fade-in:not(.act-visible),
.act-slide-up:not(.act-visible),
.act-slide-left:not(.act-visible),
.act-slide-right:not(.act-visible),
.act-zoom-in:not(.act-visible),
.act-rotate-in:not(.act-visible) {
  opacity: 0;
}

/* Transformações específicas por tipo */
.act-slide-up:not(.act-visible) {
  transform: translateY(var(--act-distance, 20px));
}

.act-slide-left:not(.act-visible) {
  transform: translateX(calc(var(--act-distance, 20px) * -1));
}

.act-slide-right:not(.act-visible) {
  transform: translateX(var(--act-distance, 20px));
}

.act-zoom-in:not(.act-visible) {
  transform: scale(0.9);
}

.act-rotate-in:not(.act-visible) {
  transform: rotate(-4deg);
}

/* Estado visível - animação completa */
.act-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Otimização para performance */
@media (prefers-reduced-motion: reduce) {

  .act-fade-in,
  .act-slide-up,
  .act-slide-left,
  .act-slide-right,
  .act-zoom-in,
  .act-rotate-in {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}