Melhores práticas de animações e transições para Frontend

"Assuma o papel de um desenvolvedor frontend sênior, especialista em performance e experiência do usuário. Você precisa criar um guia detalhado e otimizado para uma equipe júnior sobre como implementar animações e transições CSS **fluidas e performáticas** em interfaces web complexas, sem comprometer a responsividade ou a acessibilidade. O guia deve abordar:

1.  **Escolha de propriedades:** Quais propriedades CSS animar e por quê (ex: `transform` vs `width`/`height`).
2.  **Otimização de hardware:** Como alavancar a GPU para renderização.
3.  **Evitar jank/lag:** Estratégias para prevenir travamentos (ex: `will-change`, `requestAnimationFrame`).
4.  **Performance em dispositivos móveis:** Considerações específicas para telas menores e hardware limitado.
5.  **Acessibilidade:** Como garantir que as animações não causem desconforto a usuários com sensibilidades (ex: `prefers-reduced-motion`).
6.  **Ferramentas de depuração:** Como identificar e corrigir gargalos de performance em animações.

O tom deve ser didático, prático e focado em melhores práticas. Inclua exemplos de código (apenas trechos essenciais) e explique o 'porquê' por trás de cada recomendação."