:root {
    --anim-fast: 140ms;
    --anim-med: 220ms;
    --anim-slow: 360ms;
    --anim-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --anim-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}

body.modal-open {
    overflow-y: hidden;
}

body {
    animation: page-fade-in var(--anim-slow) var(--anim-ease) both;
}

:where(a, button, input, select, textarea, summary, [role="button"]) {
    transition:
        transform var(--anim-fast) var(--anim-ease),
        box-shadow var(--anim-med) var(--anim-ease),
        background-color var(--anim-med) var(--anim-ease),
        color var(--anim-med) var(--anim-ease),
        border-color var(--anim-med) var(--anim-ease),
        opacity var(--anim-med) var(--anim-ease);
}

a:active,
button:active {
    transform: scale(0.98);
}

:where(
    .home-card,
    .profile-card,
    .user-profile-card,
    .request-card,
    .connection-card,
    .sent-request-card,
    .notification-card,
    .blocked-card,
    .block-user-card,
    .chat-header-card,
    .chat-sidebar-card,
    .user-profile-photo-viewer-card,
    .user-profile-modal-card,
    .edit-group,
    .settings-card,
    .settings-modal-card,
    .help-card,
    .home-hero,
    .notifications-hero,
    .message-search-wrap,
    .interests-panel,
    .edit-interests-panel,
    .edit-input,
    .edit-textarea,
    .edit-age,
    input,
    select,
    textarea
) {
    transition:
        transform var(--anim-med) var(--anim-ease),
        box-shadow var(--anim-med) var(--anim-ease),
        opacity var(--anim-med) var(--anim-ease),
        border-color var(--anim-med) var(--anim-ease),
        background-color var(--anim-med) var(--anim-ease);
    will-change: transform, opacity;
}

:where(
    .chat-menu-list,
    .message-menu-list,
    .user-profile-menu-panel,
    .profile-menu-dropdown,
    .chat-emoji-picker,
    .profile-modal,
    .user-profile-modal,
    .settings-modal,
    .photo-editor-modal,
    .interests-panel,
    .edit-interests-panel,
    .message-toast,
    .chat-toast,
    .home-toast,
    .blocked-toast,
    .block-user-toast,
    .notifications-toast,
    .profile-toast,
    .settings-toast,
    .help-toast,
    .verify-toast,
    .edit-toast,
    .user-profile-toast
) {
    transition:
        opacity var(--anim-med) var(--anim-ease),
        transform var(--anim-med) var(--anim-spring);
    will-change: transform, opacity;
}

:where(
    .home-filter,
    .filter-btn,
    .interest-chip,
    .match-chip,
    .block-user-chip,
    .user-profile-reason-chip,
    .user-profile-safety-switch-btn,
    .block-user-switch-btn
) {
    transition:
        transform var(--anim-fast) var(--anim-ease),
        background-color var(--anim-med) var(--anim-ease),
        border-color var(--anim-med) var(--anim-ease),
        color var(--anim-med) var(--anim-ease),
        box-shadow var(--anim-med) var(--anim-ease);
}

:where(
    .home-card:hover,
    .request-card:hover,
    .connection-card:hover,
    .sent-request-card:hover,
    .blocked-card:hover,
    .notification-card:hover,
    .chat-header-card:hover,
    .chat-sidebar-card:hover,
    .block-user-card:hover,
    .edit-group:hover
) {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px rgba(24, 39, 48, 0.1);
}

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

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}