:root {
    --ux-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ux-fast: 180ms;
    --ux-mid: 260ms;
    --ux-slow: 420ms;
}

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

@keyframes ux-fade-down {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ux-soft-pop {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: rgba(157, 176, 210, 0.28) transparent;
}

html::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html::-webkit-scrollbar-track {
    background: transparent;
}

html::-webkit-scrollbar-thumb {
    background: rgba(157, 176, 210, 0.2);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover {
    background: rgba(157, 176, 210, 0.34);
    border: 2px solid transparent;
    background-clip: padding-box;
}

body {
    animation: ux-fade-up var(--ux-slow) var(--ux-ease) both;
}

.header {
    animation: ux-fade-down var(--ux-slow) var(--ux-ease) both;
}

.toolbar,
.hero,
.login-wrap,
.profile-layout,
.add-layout,
.footer {
    animation: ux-fade-up var(--ux-slow) var(--ux-ease) both;
    animation-delay: 70ms;
}

.server-card,
.plan-card,
.add-card,
.preview-card-wrap,
.profile-card,
.login-card {
    animation: ux-soft-pop var(--ux-slow) var(--ux-ease) both;
    animation-delay: 100ms;
}

.servers-grid .server-card:nth-child(2),
.plans-grid .plan-card:nth-child(2) {
    animation-delay: 160ms;
}

.servers-grid .server-card:nth-child(3),
.plans-grid .plan-card:nth-child(3) {
    animation-delay: 220ms;
}

:where(a, button, select, input, textarea, .top-btn, .btn, .submit-btn, .action-btn, .filter-btn, .buy-btn, .join-btn, .select-group) {
    transition:
        transform var(--ux-fast) var(--ux-ease),
        box-shadow var(--ux-mid) var(--ux-ease),
        border-color var(--ux-fast) var(--ux-ease),
        background-color var(--ux-fast) var(--ux-ease),
        color var(--ux-fast) var(--ux-ease),
        filter var(--ux-fast) var(--ux-ease),
        opacity var(--ux-fast) var(--ux-ease);
}

.top-btn:hover,
.btn:hover,
.action-btn:hover,
.filter-btn:hover,
.buy-btn:hover,
.join-btn:hover,
.submit-btn:hover {
    transform: translateY(-1px);
}

.search-wrapper,
.select-group,
.field-input,
.field-textarea,
.metric-description-editor {
    transition:
        border-color var(--ux-fast) var(--ux-ease),
        box-shadow var(--ux-mid) var(--ux-ease),
        background-color var(--ux-fast) var(--ux-ease);
}

.server-card,
.plan-card,
.add-card,
.preview-card-wrap,
.profile-card,
.login-card {
    transition:
        transform var(--ux-mid) var(--ux-ease),
        border-color var(--ux-mid) var(--ux-ease),
        box-shadow var(--ux-mid) var(--ux-ease),
        filter var(--ux-fast) var(--ux-ease);
}

.server-card:hover,
.plan-card:hover,
.add-card:hover,
.preview-card-wrap:hover,
.profile-card:hover,
.login-card:hover {
    filter: brightness(1.02);
}

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

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