:root {
    --motion-fast: 200ms;
    --motion-standard: 280ms;
    --motion-emphasis: 420ms;
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: motion-page-out 180ms var(--motion-ease-in-out) both;
}

::view-transition-new(root) {
    animation: motion-page-in 320ms var(--motion-ease) both;
}

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

@keyframes motion-page-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes motion-slide-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes motion-toast-in {
    from {
        opacity: 0;
        transform: translate3d(16px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes motion-validation-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

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

.main-body {
    animation: motion-page-in 360ms var(--motion-ease) both;
}

.motion-reveal {
    opacity: 0;
    transition: opacity 360ms var(--motion-ease);
}

.motion-reveal.is-visible {
    opacity: 1;
}

.motion-reveal:nth-of-type(2) { transition-delay: 35ms; }
.motion-reveal:nth-of-type(3) { transition-delay: 70ms; }
.motion-reveal:nth-of-type(4) { transition-delay: 105ms; }

.btn,
button,
.form-control,
.form-select,
.form-check-input,
.nav-link-custom,
.dropdown-item,
.page-link,
.accordion-button,
.list-group-item-action,
.landing-nav-link,
.btn-landing-primary {
    transition-timing-function: var(--motion-ease);
}

.btn:not(:disabled):not(.disabled):active,
button:not(:disabled):active {
    transform: scale(0.98);
}

.form-control,
.form-select,
.form-check-input {
    transition-property: border-color, box-shadow, background-color, color;
    transition-duration: var(--motion-standard);
}

.form-control.is-invalid,
.form-select.is-invalid,
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    animation: motion-validation-shake 260ms var(--motion-ease-in-out);
}

.table-hover tbody tr {
    transition: background-color var(--motion-standard) var(--motion-ease), color var(--motion-standard) var(--motion-ease);
}

.table tbody tr:nth-child(-n + 6) {
    animation: motion-slide-up 320ms var(--motion-ease) both;
}

.table tbody tr:nth-child(2) { animation-delay: 25ms; }
.table tbody tr:nth-child(3) { animation-delay: 50ms; }
.table tbody tr:nth-child(4) { animation-delay: 75ms; }
.table tbody tr:nth-child(5) { animation-delay: 100ms; }
.table tbody tr:nth-child(6) { animation-delay: 125ms; }

.modal.fade .modal-dialog {
    transition: transform var(--motion-emphasis) var(--motion-ease);
}

.modal.fade:not(.show) .modal-dialog {
    transform: translateY(8px) scale(0.985);
}

.dropdown-menu.show,
.notification-center-menu.show {
    animation: motion-slide-up 220ms var(--motion-ease) both;
    transform-origin: top center;
}

.tab-pane.fade {
    transition: opacity var(--motion-standard) var(--motion-ease);
}

.toast.show,
.alert.show {
    animation: motion-toast-in 280ms var(--motion-ease) both;
}

.motion-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: motion-spinner 700ms linear infinite;
}

.motion-skeleton {
    color: transparent !important;
    border-radius: 0.35rem;
    background: linear-gradient(90deg, rgba(148, 163, 184, 0.12) 25%, rgba(148, 163, 184, 0.28) 50%, rgba(148, 163, 184, 0.12) 75%);
    background-size: 200% 100%;
    animation: motion-skeleton 1.4s ease-in-out infinite;
}

@keyframes motion-skeleton {
    to { background-position: -200% 0; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    a .bi,
    button .bi {
        transition: transform var(--motion-standard) var(--motion-ease);
    }

    button:hover .bi,
    a:hover .bi {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    html,
    :root {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation: none !important;
        transition-duration: 0s !important;
        view-transition-name: none !important;
    }

    .motion-reveal {
        opacity: 1;
    }
}