/* CSS especifico da atividade "before-after-animation". */

/* Entrada em sequência: antes, seta, depois — reforça a narrativa de que
   uma coisa leva à outra, e dá alguma animação de verdade a uma atividade
   cujo nome promete isso mas era 100% estática até aqui. */
@keyframes ad-entrada {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ad-anima {
  animation: ad-entrada .45s ease-out both;
}
.ad-anima-1 { animation-delay: 0s; }
.ad-anima-2 { animation-delay: .15s; }
.ad-anima-3 { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .ad-anima {
    animation: none;
  }
}

/* Destaque de palavra, calculado pelo JS (diffPalavras em before-after-
   animation.js): remoções ganham fundo vermelho fraco no lado "antes";
   inclusões ganham fundo verde fraco no lado "depois". Sem riscado — sobre
   frases inteiras (não só uma palavra solta) o risco atrapalha a leitura
   corrida, o fundo já basta pra sinalizar "isso saiu". Opacidade baixa em
   vez de cor sólida funciona nos dois temas sem precisar de par claro/
   escuro — é a mesma técnica já usada nas caixas antes/depois. */
.ad-removido {
  background: rgba(239, 68, 68, .18);
  border-radius: 3px;
  padding: 0 2px;
}
.ad-adicionado {
  background: rgba(34, 197, 94, .2);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 600;
}