/*
 * Movimento padrão das modais da operação da loja.
 * Mesmo padrão de "Gestão de Insumos": fade do fundo + leve subida da janela.
 * Uso: .ui-modal-backdrop (fundo) > .ui-modal-surface (janela); adicione .ui-modal-closing para animar a saída.
 * Para <dialog> nativo: .ui-modal-dialog (+ .ui-modal-closing na saída).
 */
.ui-modal-backdrop {
    animation: ui-modal-fade-in 180ms ease-out both;
}

.ui-modal-backdrop.ui-modal-closing {
    animation: ui-modal-fade-out 160ms ease-in both;
}

.ui-modal-backdrop > .ui-modal-surface {
    animation: ui-modal-rise-in 220ms cubic-bezier(.2, .7, .2, 1) both;
}

.ui-modal-backdrop.ui-modal-closing > .ui-modal-surface {
    animation: ui-modal-rise-out 180ms ease-in both;
}

.ui-modal-surface:focus {
    outline: 0;
}

dialog.ui-modal-dialog[open] {
    animation: ui-modal-rise-in 220ms cubic-bezier(.2, .7, .2, 1) both;
}

dialog.ui-modal-dialog[open]::backdrop {
    animation: ui-modal-fade-in 180ms ease-out both;
}

dialog.ui-modal-dialog.ui-modal-closing {
    animation: ui-modal-rise-out 180ms ease-in both;
}

dialog.ui-modal-dialog.ui-modal-closing::backdrop {
    animation: ui-modal-fade-out 160ms ease-in both;
}

@keyframes ui-modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes ui-modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes ui-modal-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ui-modal-rise-out {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(8px) scale(.99);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-modal-backdrop,
    .ui-modal-backdrop.ui-modal-closing,
    .ui-modal-backdrop > .ui-modal-surface,
    .ui-modal-backdrop.ui-modal-closing > .ui-modal-surface,
    dialog.ui-modal-dialog[open],
    dialog.ui-modal-dialog[open]::backdrop,
    dialog.ui-modal-dialog.ui-modal-closing,
    dialog.ui-modal-dialog.ui-modal-closing::backdrop {
        animation: none;
    }
}