/* ============================================================
   SOPEA — Animação de entrada
   ------------------------------------------------------------
   Tudo que estava oculto (atributo [hidden]) e passa a aparecer
   entra com um fade curto subindo alguns pixels. Quem aplica a
   classe .sopea-entra é js/animacoes.js, sempre que um [hidden]
   é removido — por isso vale para formulários, mensagens, botões,
   painéis e qualquer coisa nova que use [hidden].

   Só a posição de partida é declarada (keyframes sem "to"): o
   final é o estilo normal do elemento, então não interfere no
   transform/opacity que ele já tenha.
   ============================================================ */

@keyframes sopea-entra {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes sopea-fade {
    from {
        opacity: 0;
    }
}

.sopea-entra {
    animation: sopea-entra 220ms ease-out;
}

/* Modal: o fundo só escurece (deslocar uma camada de tela cheia deixaria
   uma fresta na borda) e o cartão sobe. O .modal também anima quando o
   conteúdo do modal é trocado com o fundo já aberto. */
.modal-overlay.sopea-entra {
    animation: sopea-fade 180ms ease-out;
}

.modal {
    animation: sopea-entra 220ms ease-out;
}

/* ---------- Saída ----------
   Quando um [hidden] é aplicado, js/animacoes.js segura o elemento à vista
   com .sopea-sai enquanto ele some. "forwards" mantém o estado final até o
   script limpar, evitando um quadro com o elemento de volta ao normal. */

@keyframes sopea-sai {
    to {
        opacity: 0;
        transform: translateY(8px);
    }
}

@keyframes sopea-fade-sai {
    to {
        opacity: 0;
    }
}

.sopea-sai {
    animation: sopea-sai 160ms ease-in forwards;
    pointer-events: none;   /* não dá para clicar no que está indo embora */
}

.modal-overlay.sopea-sai {
    animation: sopea-fade-sai 160ms ease-in forwards;
}

.modal-overlay.sopea-sai .modal {
    animation: sopea-sai 160ms ease-in forwards;
}

/* Mesmo respeito ao "reduzir movimento" do sistema já usado no login e no loader. */
@media (prefers-reduced-motion: reduce) {
    .sopea-entra,
    .sopea-sai,
    .modal-overlay.sopea-entra,
    .modal-overlay.sopea-sai,
    .modal-overlay.sopea-sai .modal,
    .modal {
        animation: none;
    }
}