:root {
    --ui-motion-fast: 160ms;
    --ui-motion-base: 240ms;
    --ui-motion-slow: 420ms;
    --ui-motion-ease: cubic-bezier(.2, .7, .2, 1);
}

.app-toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: grid;
    width: min(440px, calc(100vw - 32px));
    gap: 10px;
    pointer-events: none;
}

.app-toast-container .app-toast {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 14px 44px 14px 16px;
    border-width: 1px;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .2);
    pointer-events: auto;
    animation: app-toast-enter .32s cubic-bezier(.2, .8, .2, 1) both;
}

.app-toast-container .app-toast.alert-success { border-color: #a3cfbb; }
.app-toast-container .app-toast.alert-danger { border-color: #f1aeb5; }
.app-toast-container .app-toast.alert-warning { border-color: #ffda6a; }
.app-toast-container .app-toast.alert-info { border-color: #9eeaf9; }

.app-toast-container .app-toast > .btn-close,
.app-toast-container .app-toast > .billing-save-toast-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.app-toast-container .app-toast.is-closing { animation: app-toast-exit .22s ease forwards; }

@keyframes app-toast-enter {
    from { opacity: 0; transform: translateX(32px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes app-toast-exit {
    to { opacity: 0; transform: translateX(32px); }
}

@media (max-width: 575.98px) {
    .app-toast-container { top: 12px; right: 12px; width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
    .app-toast-container .app-toast { animation-duration: .01ms; }
}

@keyframes ui-fade-up {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

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

@keyframes ui-slide-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

@keyframes ui-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

:where(a, button, input, select, textarea, .btn, .button, .auth-submit) {
    transition:
        color var(--ui-motion-fast) var(--ui-motion-ease),
        background-color var(--ui-motion-fast) var(--ui-motion-ease),
        border-color var(--ui-motion-fast) var(--ui-motion-ease),
        box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
        transform var(--ui-motion-fast) var(--ui-motion-ease);
}

:where(button, .btn, .button, .auth-submit):not(:disabled):active {
    transform: translateY(1px);
}

:where(input, select, textarea, .form-control, .form-select):focus-visible {
    outline-color: #47745b;
}

body.home-page .site-header {
    animation: ui-slide-down var(--ui-motion-slow) var(--ui-motion-ease) both;
}

body.home-page .hero-copy > * {
    animation: ui-fade-up var(--ui-motion-slow) var(--ui-motion-ease) both;
}

body.home-page .hero-copy > :nth-child(2) { animation-delay: 70ms; }
body.home-page .hero-copy > :nth-child(3) { animation-delay: 130ms; }
body.home-page .hero-copy > :nth-child(4) { animation-delay: 190ms; }
body.home-page .hero-copy > :nth-child(5) { animation-delay: 240ms; }

body.home-page .room-panel {
    animation: ui-fade-up 600ms var(--ui-motion-ease) 100ms both;
}

body.home-page .payment-note {
    animation: ui-fade-up 500ms var(--ui-motion-ease) 280ms both;
}

body.home-page .art-orbit.orbit-two {
    animation: ui-float 6s ease-in-out 700ms infinite;
}

body.auth-page .auth-layout {
    animation: ui-fade-up 520ms var(--ui-motion-ease) both;
}

body.auth-page .auth-aside::before {
    animation: auth-image-settle 900ms var(--ui-motion-ease) both;
}

@keyframes auth-image-settle {
    from { opacity: .65; transform: scale(1.035); }
    to { opacity: 1; transform: scale(1); }
}

body.auth-page .auth-aside-copy,
body.auth-page .auth-form-content,
body.auth-page .register-content {
    animation: ui-fade-up 560ms var(--ui-motion-ease) 100ms both;
}

body:not(.auth-page):not(.home-page):not(.customer-page) .sidebar-menu li a {
    transition:
        color var(--ui-motion-fast) var(--ui-motion-ease),
        background-color var(--ui-motion-fast) var(--ui-motion-ease);
}

body:not(.auth-page):not(.home-page):not(.customer-page) .app-data-table tbody tr > * {
    transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
}

body.customer-page main > .card {
    animation: ui-fade-up 460ms var(--ui-motion-ease) both;
}

body.customer-page .navbar {
    animation: ui-slide-down 360ms var(--ui-motion-ease) both;
}

body.home-page [data-motion-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity var(--ui-motion-slow) var(--ui-motion-ease),
        transform var(--ui-motion-slow) var(--ui-motion-ease);
    transition-delay: var(--motion-delay, 0ms);
}

body.home-page [data-motion-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    body.home-page .info-card,
    body.home-page .feature-card,
    body.home-page .steps-grid article,
    body.home-page .mini-room-card,
    body.home-page .invoice-card {
        transition:
            transform var(--ui-motion-base) var(--ui-motion-ease),
            box-shadow var(--ui-motion-base) var(--ui-motion-ease),
            border-color var(--ui-motion-base) var(--ui-motion-ease);
    }

    body.home-page .info-card:hover,
    body.home-page .feature-card:hover,
    body.home-page .steps-grid article:hover,
    body.home-page .mini-room-card:hover,
    body.home-page .invoice-card:hover {
        transform: translateY(-4px);
        border-color: #cfd9cf;
        box-shadow: 0 14px 30px rgba(31, 58, 41, .09);
    }
}

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

    body.home-page [data-motion-reveal] {
        opacity: 1;
        transform: none;
    }
}

@media print {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}