/* ============================================================================
   IMPLANTA ANIMATIONS CSS  (6º/último na ordem de carga — ver docs/CSS_ARCHITECTURE.md)
   Keyframes, classes de animação e efeitos visuais.
   NÃO PODE: estilos estáticos de componente/layout.
   AO ALTERAR: bumpar ?v= em templates/base.html E CACHE_NAME em static/pwa/sw.js.
   NOTA: os keyframes não usados (slideIn*, pulse, spin etc.) foram removidos
   na higienização — estão em docs/css-removido-2026-07.css se precisar.
   ============================================================================ */

/* =================== KEYFRAMES =================== */

/* FadeIn - Entrada suave com opacidade e movimento vertical */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* SlideDown - Para alertas e notificações */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =================== CLASSES DE ANIMAÇÃO =================== */

.content-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* =================== REDUCE MOTION (ACESSIBILIDADE) =================== */

/* Respeitar preferência de movimento reduzido do usuário */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}