/*
 * ARGONE motion layer.
 *
 * Motion is intentionally subtle: it clarifies hierarchy and state changes
 * without turning an information-dense business application into a carousel.
 * Keep behavior in feature styles; this file owns shared timing and feel.
 */

@keyframes argone-motion-page-in {
    from {
        opacity: 0;
        transform: translateY(.45rem);
    }

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

@keyframes argone-motion-surface-in {
    from {
        opacity: 0;
        transform: translateY(.3rem) scale(.997);
    }

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

@keyframes argone-motion-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* The route enters once; repeated partial updates stay stable. */
body[data-argone-design-scope="unified"] .app-wrapper > .container-fluid,
body[data-argone-design-scope="unified-auth"] main {
    animation: argone-motion-page-in var(--argone-motion-duration-slow) var(--argone-motion-ease-emphasized) both;
}

/* A restrained stagger gives dense pages a clear reading order. */
body[data-argone-design-scope="unified"] .app-wrapper .argone-content-row > *,
body[data-argone-design-scope="unified-auth"] main > * {
    animation: argone-motion-surface-in var(--argone-motion-duration-standard) var(--argone-motion-ease-standard) both;
}

body[data-argone-design-scope="unified"] .app-wrapper .argone-content-row > :nth-child(2),
body[data-argone-design-scope="unified-auth"] main > :nth-child(2) {
    animation-delay: var(--argone-motion-stagger-step);
}

body[data-argone-design-scope="unified"] .app-wrapper .argone-content-row > :nth-child(3),
body[data-argone-design-scope="unified-auth"] main > :nth-child(3) {
    animation-delay: calc(var(--argone-motion-stagger-step) * 2);
}

body[data-argone-design-scope="unified"] .app-wrapper .argone-content-row > :nth-child(n + 4),
body[data-argone-design-scope="unified-auth"] main > :nth-child(n + 4) {
    animation-delay: calc(var(--argone-motion-stagger-step) * 3);
}

/* Shared surfaces transition together when theme tokens change. */
body[data-argone-design-scope="unified"] .app-wrapper .card,
body[data-argone-design-scope="unified"] .app-wrapper .argone-page-card,
body[data-argone-design-scope="unified"] .app-wrapper .argone-app-page-card,
body.correspondence-body .corr-action-tile {
    transition: background-color var(--argone-motion-duration-standard) var(--argone-motion-ease-standard),
        border-color var(--argone-motion-duration-standard) var(--argone-motion-ease-standard),
        box-shadow var(--argone-motion-duration-standard) var(--argone-motion-ease-standard);
}

/* Clickable surfaces get a small lift, while passive cards remain still. */
body[data-argone-design-scope="unified"] .app-wrapper a.card,
body[data-argone-design-scope="unified"] .app-wrapper a.argone-page-card,
body[data-argone-design-scope="unified"] .app-wrapper .argone-dashboard-stat,
body[data-argone-design-scope="unified"] .app-wrapper .argone-action-list .list-group-item-action,
body.correspondence-body .corr-action-tile,
body.correspondence-body .corr-letter-list-item {
    transition: transform var(--argone-motion-duration-standard) var(--argone-motion-ease-emphasized),
        background-color var(--argone-motion-duration-standard) var(--argone-motion-ease-standard),
        border-color var(--argone-motion-duration-standard) var(--argone-motion-ease-standard),
        box-shadow var(--argone-motion-duration-standard) var(--argone-motion-ease-standard),
        color var(--argone-motion-duration-fast) ease;
}

body[data-argone-design-scope="unified"] .app-wrapper a.card:hover,
body[data-argone-design-scope="unified"] .app-wrapper a.card:focus-visible,
body[data-argone-design-scope="unified"] .app-wrapper a.argone-page-card:hover,
body[data-argone-design-scope="unified"] .app-wrapper a.argone-page-card:focus-visible,
body[data-argone-design-scope="unified"] .app-wrapper .argone-dashboard-stat:hover,
body[data-argone-design-scope="unified"] .app-wrapper .argone-dashboard-stat:focus-visible,
body[data-argone-design-scope="unified"] .app-wrapper .argone-action-list .list-group-item-action:hover,
body[data-argone-design-scope="unified"] .app-wrapper .argone-action-list .list-group-item-action:focus-visible,
body.correspondence-body .corr-action-tile:hover,
body.correspondence-body .corr-action-tile:focus-visible,
body.correspondence-body .corr-letter-list-item:hover,
body.correspondence-body .corr-letter-list-item:focus-visible {
    transform: translateY(-2px);
}

/* Controls share one interaction rhythm across legacy and new views. */
body[data-argone-design-scope="unified"] .app-wrapper .btn,
body[data-argone-design-scope="unified"] .app-wrapper .form-control,
body[data-argone-design-scope="unified"] .app-wrapper .form-select,
body[data-argone-design-scope="unified"] .app-wrapper .form-check-input,
body[data-argone-design-scope="unified"] .app-wrapper .select2-selection,
body[data-argone-design-scope="unified"] .app-wrapper .dropdown-item,
body[data-argone-design-scope="unified"] .app-wrapper .page-link,
body[data-argone-design-scope="unified-auth"] .btn,
body[data-argone-design-scope="unified-auth"] .form-control,
body[data-argone-design-scope="unified-auth"] .form-select,
body[data-argone-design-scope="unified-auth"] .form-check-input,
body[data-argone-design-scope="unified-auth"] .select2-selection,
body[data-argone-design-scope="unified-auth"] .dropdown-item,
body[data-argone-design-scope="unified-auth"] .page-link {
    transition: color var(--argone-motion-duration-fast) ease,
        background-color var(--argone-motion-duration-fast) ease,
        border-color var(--argone-motion-duration-fast) ease,
        box-shadow var(--argone-motion-duration-fast) ease,
        transform var(--argone-motion-duration-fast) var(--argone-motion-ease-emphasized);
}

body[data-argone-design-scope="unified"] .app-wrapper .btn:not(:disabled):not(.disabled):hover,
body[data-argone-design-scope="unified"] .app-wrapper .btn:not(:disabled):not(.disabled):focus-visible,
body[data-argone-design-scope="unified-auth"] .btn:not(:disabled):not(.disabled):hover,
body[data-argone-design-scope="unified-auth"] .btn:not(:disabled):not(.disabled):focus-visible {
    transform: translateY(-1px);
}

body[data-argone-design-scope="unified"] .app-wrapper .btn:not(:disabled):not(.disabled):active,
body[data-argone-design-scope="unified-auth"] .btn:not(:disabled):not(.disabled):active {
    transform: translateY(0);
    transition-duration: 80ms;
}

body[data-argone-design-scope="unified"] .app-wrapper .table tbody tr {
    transition: background-color var(--argone-motion-duration-fast) ease;
}

body[data-argone-design-scope="unified"] .app-wrapper .modal.fade .modal-dialog {
    transform: translateY(-.45rem) scale(.985);
    transition: transform var(--argone-motion-duration-standard) var(--argone-motion-ease-emphasized);
}

body[data-argone-design-scope="unified"] .app-wrapper .modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

body[data-argone-design-scope="unified"] .app-wrapper .toast.show {
    animation: argone-motion-fade-in var(--argone-motion-duration-standard) var(--argone-motion-ease-standard) both;
}

@media (prefers-reduced-motion: reduce) {
    body[data-argone-design-scope="unified"] *,
    body[data-argone-design-scope="unified"] *::before,
    body[data-argone-design-scope="unified"] *::after,
    body[data-argone-design-scope="unified-auth"] *,
    body[data-argone-design-scope="unified-auth"] *::before,
    body[data-argone-design-scope="unified-auth"] *::after {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        transition-delay: 0ms !important;
    }

    body[data-argone-design-scope="unified"] .app-wrapper .btn:hover,
    body[data-argone-design-scope="unified"] .app-wrapper .btn:focus-visible,
    body[data-argone-design-scope="unified-auth"] .btn:hover,
    body[data-argone-design-scope="unified-auth"] .btn:focus-visible,
    body[data-argone-design-scope="unified"] .app-wrapper a.card:hover,
    body[data-argone-design-scope="unified"] .app-wrapper a.card:focus-visible,
    body[data-argone-design-scope="unified"] .app-wrapper .argone-dashboard-stat:hover,
    body[data-argone-design-scope="unified"] .app-wrapper .argone-dashboard-stat:focus-visible,
    body[data-argone-design-scope="unified"] .app-wrapper .argone-action-list .list-group-item-action:hover,
    body[data-argone-design-scope="unified"] .app-wrapper .argone-action-list .list-group-item-action:focus-visible,
    body.correspondence-body .corr-action-tile:hover,
    body.correspondence-body .corr-action-tile:focus-visible,
    body.correspondence-body .corr-letter-list-item:hover,
    body.correspondence-body .corr-letter-list-item:focus-visible {
        transform: none;
    }
}