body.is-booting .hud,
body.is-booting .system-content {
    visibility: hidden;
}

body.is-online .hud {
    animation:
        hudReveal
        900ms
        cubic-bezier(.2, .75, .2, 1)
        both;
}

body.is-online .hud-header {
    animation:
        headerDrop
        800ms
        ease
        120ms
        both;
}

body.is-online .hud-column--left {
    animation:
        panelLeft
        900ms
        ease
        500ms
        both;
}

body.is-online .hud-column--right {
    animation:
        panelRight
        900ms
        ease
        650ms
        both;
}

body.is-online .hellmode-logo,
body.is-online .core-label,
body.is-online .enter-system {
    animation:
        logoConstruct
        1.1s
        ease
        850ms
        both;
}

body.is-online .core-ring--outer {
    animation:
        rotateClockwise
        22s
        linear
        infinite;
}

body.is-online .core-ring--ticks {
    animation:
        rotateCounter
        32s
        linear
        infinite;
}

body.is-online .core-ring--middle {
    animation:
        rotateCounter
        17s
        linear
        infinite;
}

body.is-online .core-ring--inner {
    animation:
        corePulse
        3s
        ease-in-out
        infinite;
}

body.is-online .core-ring--segments {
    animation:
        rotateClockwise
        13s
        linear
        infinite;
}

body.is-online .threat-radar__sweep {
    animation:
        rotateClockwise
        3.2s
        linear
        infinite;
}

body.is-online .hud-light {
    animation:
        statusPulse
        1.4s
        ease-in-out
        infinite;
}

body.is-online .authorization__track span {
    animation:
        authorizationFill
        1.8s
        ease
        1.8s
        both;
}

body.is-online .metric__fill {
    animation:
        metricFlicker
        2.8s
        ease-in-out
        infinite;
}

.scan-flash.is-active {
    animation:
        scanFlash
        950ms
        ease
        both;
}

@keyframes hudReveal {
    from {
        opacity: 0;
        filter: blur(12px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes headerDrop {
    from {
        opacity: 0;

        transform:
            translateY(-24px)
            scaleX(0.86);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scaleX(1);
    }
}

@keyframes panelLeft {
    from {
        opacity: 0;

        transform:
            translateX(-50px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes panelRight {
    from {
        opacity: 0;

        transform:
            translateX(50px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }
}

@keyframes logoConstruct {
    0% {
        opacity: 0;
        filter:
            blur(14px)
            brightness(3);
    }

    55% {
        opacity: 1;
        filter:
            blur(2px)
            brightness(2);
    }

    100% {
        opacity: 1;
        filter:
            blur(0)
            brightness(1);
    }
}

@keyframes rotateClockwise {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateCounter {
    to {
        transform: rotate(-360deg);
    }
}

@keyframes corePulse {
    50% {
        opacity: 0.42;

        box-shadow:
            0 0 34px
            rgba(255, 44, 18, 0.11);
    }
}

@keyframes statusPulse {
    50% {
        opacity: 0.35;

        transform:
            scale(0.72);
    }
}

@keyframes authorizationFill {
    from {
        transform:
            scaleX(0);

        transform-origin: left;
    }

    to {
        transform:
            scaleX(1);

        transform-origin: left;
    }
}

@keyframes metricFlicker {
    0%,
    94%,
    100% {
        opacity: 1;
    }

    95% {
        opacity: 0.35;
    }

    97% {
        opacity: 0.86;
    }
}

@keyframes scanFlash {
    0% {
        opacity: 0;

        transform:
            translateX(-100%);
    }

    22% {
        opacity: 1;
    }

    100% {
        opacity: 0;

        transform:
            translateX(100%);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration:
            0.001ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }
}

.boot-screen {
    position: fixed;
    inset: 0;

    z-index: 100;

    display: grid;
    place-items: center;

    background: #000;

    transition:
        opacity 650ms ease,
        visibility 650ms ease;
}

.boot-screen.is-complete {
    opacity: 0;
    visibility: hidden;
}

.boot-screen__center {
    width: min(480px, calc(100% - 48px));

    display: grid;
    justify-items: center;

    text-align: center;
}

.boot-screen__mark {
    width: 74px;
    height: 74px;

    display: grid;
    place-items: center;

    margin-bottom: 30px;

    color: var(--hm-red);

    border:
        1px solid
        rgba(255, 52, 18, 0.6);

    transform: rotate(45deg);

    font-size: 19px;
    letter-spacing: 0.08em;

    box-shadow:
        0 0 35px
        rgba(255, 42, 15, 0.14);
}

.boot-screen__mark::first-line {
    transform: rotate(-45deg);
}

.boot-screen__line {
    color:
        rgba(255, 255, 255, 0.68);

    font-size: 10px;
    letter-spacing: 0.32em;
}

.boot-progress {
    width: 100%;
    height: 3px;

    margin-top: 20px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.06);
}

.boot-progress span {
    display: block;

    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--hm-red),
            var(--hm-orange)
        );

    box-shadow:
        0 0 10px
        rgba(255, 62, 18, 0.74);

    transition:
        width 90ms linear;
}

.boot-percentage {
    margin-top: 12px;

    color: var(--hm-red);

    font-size: 9px;
    letter-spacing: 0.2em;
}