/*
 * Motion system
 * Feedback visual discreto para ferramentas operacionais. As transições usam
 * apenas propriedades compostas para preservar fluidez em telas grandes.
 */

:root {
    --motion-duration-fast: 140ms;
    --motion-duration-base: 220ms;
    --motion-duration-slow: 280ms;
    --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

body.motion-ready .auth-shell,
body.motion-ready .validation-shell {
    animation: exage-page-enter var(--motion-duration-slow) var(--motion-ease-out) both;
}

/*
 * Nao aplicar transform no conteudo autenticado. Um transform persistente no
 * ancestral de um modal altera o posicionamento fixed do Bootstrap e deixa o
 * backdrop acima do dialogo. A entrada continua suave apenas com opacidade.
 */
body.motion-ready .app-main {
    animation: exage-page-fade var(--motion-duration-slow) var(--motion-ease-out) both;
}

@keyframes exage-page-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

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

@keyframes exage-page-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

button,
.btn,
[role="button"] {
    transition:
        color var(--motion-duration-fast) var(--motion-ease-standard),
        background-color var(--motion-duration-fast) var(--motion-ease-standard),
        border-color var(--motion-duration-fast) var(--motion-ease-standard),
        box-shadow var(--motion-duration-fast) var(--motion-ease-standard),
        transform var(--motion-duration-fast) var(--motion-ease-standard);
}

button:not(:disabled):active,
.btn:not(:disabled):active,
[role="button"]:active {
    transform: scale(0.98);
}

.modal.fade .modal-dialog {
    transform: translateY(12px) scale(0.985);
    transition: transform var(--motion-duration-base) var(--motion-ease-out);
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.dropdown-menu {
    transform: translateY(-4px);
    transform-origin: top right;
    transition:
        opacity var(--motion-duration-fast) var(--motion-ease-out),
        transform var(--motion-duration-fast) var(--motion-ease-out);
}

.dropdown-menu.show {
    transform: translateY(0);
}

.is-motion-image-loading {
    background:
        linear-gradient(
            100deg,
            var(--surface-muted, #eef1f5) 32%,
            var(--surface-subtle, #f8fafc) 45%,
            var(--surface-muted, #eef1f5) 58%
        );
    background-size: 220% 100%;
    animation: exage-image-skeleton 1.25s linear infinite;
    opacity: 0.68;
}

.exage-skeleton {
    background:
        linear-gradient(
            100deg,
            var(--surface-muted, var(--ex-surface, #eef1f5)) 32%,
            var(--surface-subtle, var(--ex-background, #f8fafc)) 45%,
            var(--surface-muted, var(--ex-surface, #eef1f5)) 58%
        );
    background-size: 220% 100%;
    border-radius: 0.45rem;
    display: block;
    min-height: 0.72rem;
    animation: exage-image-skeleton 1.25s linear infinite;
}

.exage-skeleton--title {
    height: 1.1rem;
    width: min(15rem, 72%);
}

.exage-skeleton--text {
    height: 0.72rem;
    width: 100%;
}

.exage-skeleton--text-short {
    height: 0.72rem;
    width: 58%; 
}

.exage-skeleton-stack {
    display: grid;
    gap: 0.55rem;
    width: min(100%, 34rem);
}

.exage-skeleton-option {
    display: grid;
    gap: 0.45rem;
    padding: 0.65rem 0.75rem;
}

.barcode-lookup-status[data-state="loading"] {
    align-items: center;
    display: flex;
    gap: 0.55rem;
}

.barcode-lookup-status[data-state="loading"]::before {
    background: var(--ex-primary, #c62828);
    border-radius: 50%;
    content: "";
    flex: 0 0 0.65rem;
    height: 0.65rem;
    opacity: 0.7;
    transform: scale(0.9);
}

@keyframes exage-image-skeleton {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -120% 0;
    }
}

form.is-submitting button[type="submit"],
form.is-submitting input[type="submit"] {
    cursor: wait;
}

.motion-button-spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin-right: 0.45em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: exage-button-spinner 650ms linear infinite;
    vertical-align: -0.08em;
}

@keyframes exage-button-spinner {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}