* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #020403;
}

body {
    font-family: "Courier New", monospace;
}

/* INTRO */
#intro {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: #020403;
    z-index: 999999;
    isolation: isolate;
}

/* лёгкий CRT */
#intro::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at center,
            rgba(57, 255, 136, .08),
            transparent 55%
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.018) 0 1px,
            transparent 1px 4px
        );

    pointer-events: none;
    z-index: 20;
}

/* =========================
   СТАЛЬНЫЕ ДВЕРИ
========================= */

.door {
    position: absolute;
    top: 0;

    width: 50%;
    height: 100%;

    z-index: 50;

    overflow: hidden;

    background:
        linear-gradient(
            90deg,
            #090b0c,
            #252a2c 48%,
            #111516
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0 22px,
            rgba(255,255,255,.035) 23px,
            transparent 25px
        );

    box-shadow:
        inset 0 0 70px #000,
        inset 0 0 0 2px #050606;

    transition:
        transform 1.15s cubic-bezier(.16,1,.3,1);
}

/* горизонтальные металлические панели */

.door::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 58px,
            rgba(255,255,255,.035) 59px,
            transparent 61px
        );
}

/* центральная металлическая кромка */

.door::after {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 3px;

    background:
        linear-gradient(
            transparent,
            #687174 45%,
            #080909 55%,
            transparent
        );

    box-shadow:
        0 0 15px rgba(180,200,205,.18);
}

.left {
    left: 0;
}

.right {
    right: 0;
}

.left::after {
    right: 0;
}

.right::after {
    left: 0;
}

/* открытие */

.open.left {
    transform: translate3d(-105%, 0, 0);
}

.open.right {
    transform: translate3d(105%, 0, 0);
}

/* =========================
   ТЕРМИНАЛ
========================= */

#terminal {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: min(
        680px,
        calc(100vw - 36px)
    );

    max-height: 80dvh;

    overflow: hidden;

    z-index: 100;

    color: #39ff88;

    text-shadow:
        0 0 9px rgba(57,255,136,.65);

    font-size: clamp(
        11px,
        2.1vw,
        16px
    );

    line-height: 1.55;
}

.header {
    color: #8affb8;
    margin-bottom: 14px;
}

.line {
    min-height: 1.55em;
}

.error {
    color: #ff3b3b !important;

    text-shadow:
        0 0 10px rgba(255,40,40,.7) !important;
}

.ok {
    color: #39ff88;
}

/* =========================
   SCANLINE
========================= */

.scan {
    position: absolute;

    left: 0;
    right: 0;

    top: -5%;

    height: 2px;

    background:
        rgba(57,255,136,.13);

    box-shadow:
        0 0 14px rgba(57,255,136,.3);

    z-index: 110;

    animation:
        scan 2s linear infinite;
}

@keyframes scan {
    to {
        top: 105%;
    }
}

/* исчезновение терминала */

#intro.done #terminal {
    opacity: 0;

    transition:
        opacity .25s ease;
}

/* полное удаление intro */

#intro.hide {
    display: none;
}

/* =========================
   МОБИЛЬНЫЕ
========================= */

@media (max-width: 500px) {

    #terminal {
        width: calc(100vw - 28px);

        font-size: 11px;

        line-height: 1.45;

        max-height: 78dvh;
    }

    .line {
        min-height: 1.45em;
    }
}