:root {
    --enter-stagger: 70ms;
    --enter-duration: 420ms;
    --enter-ease: cubic-bezier(.16, 1, .3, 1);
    --dd-blur: 12px;
    --dd-blur-fade-duration: 180ms;
}

.is-preloading .dynamic-header,
.is-preloading .menu-button,
.is-preloading #notificationBtn,
.is-preloading .profile-button,
.is-preloading .welcome-header,
.is-preloading .welcome-header h1,
.is-preloading .stats-grid .stat-card,
.is-preloading .stat-card .stat-value,
.is-preloading .mod-title,
.is-preloading .dev-title,
.is-preloading .mod-cards .mod-card,
.is-preloading .dev-card-wrapper .mod-card,
.is-preloading .improvement-box,
.is-preloading .sidebar,
.is-preloading .sidebar .nav-item,
.is-preloading .stat-bar-wrapper {
    opacity: 0 !important;
    visibility: hidden !important;
}

@keyframes enterFromTop {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.997);
    }

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

.entrance-item {
    opacity: 0;
    transform: translateY(-8px) scale(.997);
    will-change: opacity, transform;
}

.entering {
    animation-name: enterFromTop;
    animation-duration: var(--enter-duration);
    animation-timing-function: var(--enter-ease);
    animation-fill-mode: both;
    animation-delay: var(--enter-delay, 0ms);
}

.entered {
    opacity: 1;
    transform: none;
    will-change: auto;
}

.dynamic-header {
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
}

.glass-dropdown::before,
.notification-dropdown::before,
.profile-dropdown::before,
.nav-dropdown::before,
#notificationDropdown::before,
#profileDropdown::before,
#navDropdown::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    background: rgba(0, 0, 0, 0.14);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    transition: backdrop-filter var(--dd-blur-fade-duration) ease, -webkit-backdrop-filter var(--dd-blur-fade-duration) ease, opacity var(--dd-blur-fade-duration) ease;
}

.glass-dropdown.show::before,
.notification-dropdown.show::before,
.profile-dropdown.show::before,
.nav-dropdown.show::before,
#notificationDropdown.show::before,
#profileDropdown.show::before,
#navDropdown.show::before {
    backdrop-filter: blur(var(--dd-blur));
    -webkit-backdrop-filter: blur(var(--dd-blur));
    opacity: 1;
    transition-duration: var(--dd-blur-fade-duration);
}

@media (prefers-reduced-motion: reduce) {

    .is-preloading .dynamic-header,
    .is-preloading .menu-button,
    .is-preloading #notificationBtn,
    .is-preloading .profile-button,
    .is-preloading .welcome-header,
    .is-preloading .welcome-header h1,
    .is-preloading .stats-grid .stat-card,
    .is-preloading .stat-card .stat-value,
    .is-preloading .mod-title,
    .is-preloading .dev-title,
    .is-preloading .mod-cards .mod-card,
    .is-preloading .dev-card-wrapper .mod-card,
    .is-preloading .improvement-box,
    .is-preloading .sidebar,
    .is-preloading .sidebar .nav-item,
    .is-preloading .stat-bar-wrapper {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .entrance-item,
    .entering {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        will-change: auto !important;
    }

    .glass-dropdown::before,
    .notification-dropdown::before,
    .profile-dropdown::before,
    .nav-dropdown::before,
    #notificationDropdown::before,
    #profileDropdown::before,
    #navDropdown::before {
        transition: none !important;
        backdrop-filter: blur(var(--dd-blur)) !important;
        -webkit-backdrop-filter: blur(var(--dd-blur)) !important;
        opacity: 1 !important;
    }
}