/* Container Pai: Importante para evitar barras de rolagem e melhorar o 3D */
.container-animacao {
  overflow: hidden; /* Evita que o movimento dos filhos altere o tamanho visual da seção */
  perspective: 1000px; /* Dá profundidade para o rotateY */
}

/* Base da Animação */
[data-anime] {
  opacity: 0;
  /* Transição específica (evite 'all') com curva suave */
  transition: transform .6s cubic-bezier(0.2, 0, 0.2, 1), opacity .6s ease;
  /* Força o uso da GPU e evita re-cálculos de layout */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Estados Iniciais */
[data-anime="left"]   { transform: translate3d(-50px, 0, 0); }
[data-anime="right"]  { transform: translate3d(50px, 0, 0); }
[data-anime="top"]    { transform: translate3d(0, -50px, 0); }
[data-anime="bottom"] { transform: translate3d(0, 50px, 0); }

/* Correção: Unificando transformações para não se anularem */
[data-anime="bottom-rotate"] { 
  transform: translate3d(0, 50px, 0) rotateY(180deg); 
}

/* Estado Ativo (Trigger) */
[data-anime].animate {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateY(0deg);
}