/* iEmpyrean particle loading screen */
html.neo-loading-active,
html.neo-loading-active body {
    overflow: hidden;
}

html.neo-loading-active body > :not(#neo-loading-root) {
    visibility: hidden;
}

.neo-loading-screen {
    --neo-loading-bg-a: #3f3251;
    --neo-loading-bg-b: #002025;
    --neo-loading-white: #fff;
    position: fixed;
    inset: 0;
    z-index: 99999;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    user-select: none;
    background: linear-gradient(45deg, var(--neo-loading-bg-a) 2%, var(--neo-loading-bg-b) 100%);
}

.neo-loading-screen[hidden] {
    display: none !important;
}

.neo-loading-screen .neo-loading-center,
.neo-loading-screen .neo-loading-particles {
    position: absolute;
    inset: 0;
}

.neo-loading-screen .neo-loading-center {
    display: grid;
    place-items: center;
    z-index: 3;
}

.neo-loading-screen .neo-loading-particles {
    left: -51%;
    top: -51%;
    width: 202%;
    height: 202%;
    transform: scale3d(0.5, 0.5, 1);
    pointer-events: none;
}

.neo-loading-screen #neo-particles-background {
    z-index: 1;
    background: linear-gradient(45deg, var(--neo-loading-bg-a) 2%, var(--neo-loading-bg-b) 100%);
}

.neo-loading-screen #neo-particles-foreground {
    z-index: 2;
}

.neo-loading-screen .neo-loading-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: grid;
    place-items: center;
}

.neo-loading-screen .neo-loading-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.neo-loading-screen .neo-loading-loader::after {
    content: "";
    position: absolute;
    inset: 0 60px 0 0;
    overflow: hidden;
    transform-origin: 60px 60px;
    animation: neo-loading-spin 1.2s linear infinite;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
}

.neo-loading-screen .neo-loading-loader-line {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.neo-loading-screen .neo-loading-mark {
    position: relative;
    z-index: 2;
    width: 36px;
    height: 24px;
}

.neo-loading-screen canvas {
    display: block;
    width: 100%;
    height: 100%;
}

@keyframes neo-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .neo-loading-screen .neo-loading-loader::after {
        animation: none;
    }
}