/* ==========================================================
   VOIDVPN — GLOBAL SPACE BACKGROUND
========================================================== */

html {
    min-height: 100%;
    background: #030306;
}

body {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background: #030306;
}

.void-space-layer {
    position: fixed;
    inset: 0;
    z-index: 0;

    overflow: hidden;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(126, 34, 206, 0.25),
            transparent 34%
        ),
        radial-gradient(
            circle at 82% 25%,
            rgba(37, 99, 235, 0.16),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(88, 28, 135, 0.2),
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #030306 0%,
            #05050b 50%,
            #030306 100%
        );
}

.void-space-layer::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 54px 54px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.9),
            transparent 94%
        );
}

.void-space-stars,
.void-space-comets {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.void-space-star {
    position: absolute;

    width: var(--star-size);
    height: var(--star-size);

    min-width: 2px;
    min-height: 2px;

    border-radius: 50%;
    background: #ffffff;

    box-shadow:
        0 0 5px rgba(255, 255, 255, 0.95),
        0 0 12px rgba(192, 132, 252, 0.72);

    animation:
        voidStarTwinkle
        var(--star-duration)
        ease-in-out
        var(--star-delay)
        infinite;
}

@keyframes voidStarTwinkle {
    0%,
    100% {
        opacity: 0.28;
        transform: scale(0.8);
    }

    50% {
        opacity: 1;
        transform: scale(1.35);
    }
}

.void-space-comet {
    position: absolute;

    top: var(--comet-top);
    left: -280px;

    width: var(--comet-length);
    height: 2px;

    opacity: 0;
    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(139, 92, 246, 0.1),
            rgba(192, 132, 252, 0.72),
            #ffffff
        );

    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 12px rgba(168, 85, 247, 0.9));

    transform:
        rotate(var(--comet-angle))
        translate3d(0, 0, 0);

    transform-origin: right center;

    animation:
        voidCometFly
        var(--comet-duration)
        linear
        var(--comet-delay)
        infinite;
}

.void-space-comet::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -2px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: #ffffff;

    box-shadow:
        0 0 8px #ffffff,
        0 0 18px rgba(192, 132, 252, 0.95);

    transform: translateY(-50%);
}

@keyframes voidCometFly {
    0% {
        opacity: 0;

        transform:
            rotate(var(--comet-angle))
            translate3d(0, 0, 0);
    }

    4% {
        opacity: 0.95;
    }

    22% {
        opacity: 0;
    }

    100% {
        opacity: 0;

        transform:
            rotate(var(--comet-angle))
            translate3d(160vw, 0, 0);
    }
}


body > *:not(.void-space-layer) {
    z-index: 1;
}


.login-body,
.login-page,
body.void-theme-page {
    background: transparent !important;
}

.login-background {
    display: none !important;
}

@media (max-width: 700px) {
    .void-space-comet {
        --comet-length: 125px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .void-space-star,
    .void-space-comet {
        animation: none !important;
    }

    .void-space-comet {
        display: none;
    }
}


/* ==========================================================
   SPACE BACKGROUND — SAFE CONTENT LAYER
========================================================== */

/*
   Не меняем position у Sidebar, модальных окон
   и других самостоятельных компонентов.
*/

body > *:not(
    .void-space-layer
):not(
    .dashboard-sidebar
):not(
    script
):not(
    style
) {
    z-index: 1;
}


/* ==========================================================
   VOID SPACE — CABINET LAYOUT SAFETY
========================================================== */

/*
 * Фон не должен участвовать в потоке документа.
 */

body > .devices-background,
body > .dashboard-background {
    position: fixed !important;
    inset: 0 !important;
}

/*
 * Боковые панели должны оставаться фиксированными.
 */

body > .devices-sidebar,
body > .dashboard-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
}

/*
 * Overlay также не должен занимать место в документе.
 */

body > .devices-sidebar-overlay,
body > .dashboard-sidebar-overlay {
    position: fixed !important;
}

/*
 * Основной контент остаётся нормальным блоком,
 * а не получает случайное смещение.
 */

body > .devices-main,
body > .dashboard-main {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
}


/* ==========================================================
   VOID SPACE — ALL CABINET PAGES LAYOUT SAFETY
========================================================== */

/* Фон всегда остаётся вне потока документа */

body > .dashboard-background,
body > .devices-background,
body > .billing-background,
body > .download-background,
body > .settings-background {
    position: fixed !important;
    inset: 0 !important;

    margin: 0 !important;

    pointer-events: none !important;
}


/* Боковые панели не должны толкать контент вниз */

body > .dashboard-sidebar,
body > .devices-sidebar,
body > .billing-sidebar,
body > .download-sidebar,
body > .settings-sidebar {
    position: fixed !important;

    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    margin: 0 !important;
}


/* Затемнение мобильного меню также вне потока */

body > .dashboard-sidebar-overlay,
body > .devices-sidebar-overlay,
body > .billing-sidebar-overlay,
body > .download-sidebar-overlay,
body > .settings-sidebar-overlay {
    position: fixed !important;
}


/* Основной контент начинается сверху */

body > .dashboard-main,
body > .devices-main,
body > .billing-main,
body > .download-main,
body > .settings-main {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: none;
}