:root {
    --crt-green: #00ff66;
    --crt-green-dim: #00a844;
    --crt-green-dark: #003d1c;
    --crt-black: #000000;
    --crt-white: #d8ffe5;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--crt-black);
}

body {
    font-family: "Courier New", "Lucida Console", monospace;
    color: var(--crt-green);
}

.crt-screen {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center,
            #06170d 0%,
            #020804 45%,
            #000000 100%
        );
}

.crt-background-logo {
    position: absolute;
    inset: -25%;
    z-index: 1;

    pointer-events: none;

    background-image: url("medias/3x0c3t_LOGO.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: min(65vw, 900px);

    opacity: 0.045;

    filter:
        grayscale(1)
        brightness(1.8)
        contrast(1.3)
        drop-shadow(
            0 0 20px
            rgba(0, 255, 102, 0.4)
        );

    animation:
        logo-background-drift 18s ease-in-out infinite,
        logo-background-flicker 7s steps(1) infinite;
}

@keyframes logo-background-drift {
    0% {
        transform:
            translate3d(-3%, -2%, 0)
            scale(0.92)
            rotate(-2deg);
    }

    25% {
        transform:
            translate3d(2%, 1%, 0)
            scale(0.98)
            rotate(1deg);
    }

    50% {
        transform:
            translate3d(4%, -1%, 0)
            scale(1.04)
            rotate(2deg);
    }

    75% {
        transform:
            translate3d(-2%, 3%, 0)
            scale(0.97)
            rotate(-1deg);
    }

    100% {
        transform:
            translate3d(-3%, -2%, 0)
            scale(0.92)
            rotate(-2deg);
    }
}

@keyframes logo-background-flicker {
    0%,
    18%,
    22%,
    48%,
    52%,
    76%,
    100% {
        opacity: 0.035;
    }

    19% {
        opacity: 0.09;
    }

    20% {
        opacity: 0.025;
    }

    49% {
        opacity: 0.07;
    }

    50% {
        opacity: 0.02;
    }

    77% {
        opacity: 0.055;
    }
}

.logo-ghost {
    position: absolute;
    z-index: 3;

    width: min(35vw, 500px);
    aspect-ratio: 1 / 1;

    pointer-events: none;

    background-image: url("medias/3x0c3t_LOGO.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    opacity: 0;

    filter:
        grayscale(1)
        brightness(1.8)
        contrast(1.4)
        drop-shadow(
            0 0 12px
            rgba(0, 255, 102, 0.5)
        );

    transform:
        translate(-50%, -50%)
        rotate(var(--ghost-rotation, 0deg))
        scale(var(--ghost-scale, 1));

    animation:
        logo-ghost-in 3.5s steps(8) forwards;
}

@keyframes logo-ghost-in {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 0.06;
    }

    18% {
        opacity: 0.015;
    }

    32% {
        opacity: 0.08;
    }

    45% {
        opacity: 0.025;
    }

    65% {
        opacity: 0.055;
    }

    82% {
        opacity: 0.015;
    }

    100% {
        opacity: 0;
    }
}

.crt-header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;

    display: grid;

    grid-template-columns:
        minmax(180px, 1fr)
        minmax(220px, 1.5fr)
        minmax(150px, 1fr)
        minmax(100px, 0.6fr)
        minmax(130px, 0.8fr);

    align-items: center;

    width: 100%;
    min-height: 64px;

    padding: 10px clamp(16px, 2vw, 32px);

    border-bottom:
        1px solid
        rgba(0, 255, 102, 0.28);

    background:
        linear-gradient(
            to bottom,
            rgba(0, 15, 8, 0.94),
            rgba(0, 8, 4, 0.76)
        );

    box-shadow:
        0 0 18px rgba(0, 255, 102, 0.08),
        inset 0 -1px 0 rgba(0, 255, 102, 0.08);

    text-shadow:
        0 0 5px var(--crt-green),
        0 0 12px var(--crt-green-dark);
}

.header-block {
    display: flex;
    align-items: center;

    min-width: 0;
    height: 100%;

    padding: 0 14px;

    font-size: clamp(10px, 0.9vw, 15px);
    letter-spacing: 0.1em;

    white-space: nowrap;
    text-transform: uppercase;
}

.header-brand {
    justify-content: flex-start;
    gap: 12px;
    font-weight: bold;
}

.header-logo {
    width: 34px;
    height: 34px;

    object-fit: contain;

    filter:
        grayscale(1)
        brightness(1.8)
        drop-shadow(
            0 0 5px
            var(--crt-green)
        );

    opacity: 0.85;
}

.header-brand-text {
    font-size: clamp(13px, 1.15vw, 19px);
    color: var(--crt-white);
}

.header-title {
    justify-content: center;
    color: var(--crt-green);
    font-weight: bold;
}

.header-status {
    justify-content: center;
    color: var(--crt-green-dim);
}

.status-label::before {
    content: "●";
    margin-right: 8px;
    color: var(--crt-green);

    animation:
        status-pulse 1.8s infinite;
}

.header-clock {
    justify-content: center;

    color: var(--crt-white);

    font-variant-numeric: tabular-nums;
    letter-spacing: 0.12em;
}

.header-lab {
    justify-content: flex-end;
    color: var(--crt-green-dim);
}

.crt-content {
    position: absolute;

    top: 64px;
    left: 0;

    z-index: 10;

    width: 100%;
    height: calc(100% - 64px);

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;
}

.main-message {
    position: relative;
    z-index: 10;

    font-size: clamp(28px, 6vw, 96px);
    font-weight: bold;

    line-height: 1;
    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: var(--crt-white);

    text-shadow:
        0 0 3px var(--crt-white),
        0 0 10px var(--crt-green),
        0 0 25px var(--crt-green-dark);

    animation:
        flicker 4s infinite,
        text-jitter 0.15s infinite;
}

.main-message span {
    display: inline-block;
}

.sub-message {
    position: relative;
    z-index: 10;

    margin-top: clamp(18px, 3vh, 36px);

    font-size: clamp(10px, 1.4vw, 20px);
    letter-spacing: 0.35em;

    color: var(--crt-green-dim);

    text-shadow:
        0 0 6px
        var(--crt-green-dark);

    animation:
        sub-flicker 7s infinite;
}

.signal-frame {
    position: absolute;

    width: min(70vw, 900px);
    height: 120px;

    pointer-events: none;

    opacity: 0.35;

    border-top:
        1px solid
        var(--crt-green-dark);

    border-bottom:
        1px solid
        var(--crt-green-dark);
}

.signal-line {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background: var(--crt-green);

    opacity: 0.35;

    box-shadow:
        0 0 8px var(--crt-green),
        0 0 18px var(--crt-green-dark);

    animation:
        signal-scan 2.5s linear infinite;
}

.signal-line-1 {
    top: 25%;
    animation-delay: 0s;
}

.signal-line-2 {
    top: 50%;
    animation-delay: 0.7s;
}

.signal-line-3 {
    top: 75%;
    animation-delay: 1.4s;
}

.crt-glow {
    position: absolute;
    inset: -20%;
    z-index: 2;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(0, 255, 102, 0.08) 0%,
            rgba(0, 255, 102, 0.025) 35%,
            transparent 70%
        );

    animation:
        glow-pulse 4s ease-in-out infinite;
}

.crt-scanlines {
    position: absolute;
    inset: 0;
    z-index: 40;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0px,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.18) 3px,
            rgba(0, 0, 0, 0.18) 4px
        );

    opacity: 0.75;
}

.crt-noise {
    position: absolute;
    inset: -50%;
    z-index: 41;

    pointer-events: none;

    opacity: 0.035;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255, 255, 255, 0.8) 0,
            rgba(255, 255, 255, 0.8) 1px,
            transparent 1px,
            transparent 3px
        );

    background-size: 4px 4px;

    animation:
        noise 0.15s steps(2) infinite;
}

.crt-vignette {
    position: absolute;
    inset: 0;
    z-index: 42;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.18) 65%,
            rgba(0, 0, 0, 0.75) 100%
        );
}

.crt-screen::before {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 43;

    pointer-events: none;

    border:
        clamp(8px, 1.5vw, 24px)
        solid
        rgba(0, 0, 0, 0.45);

    border-radius: 2%;

    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.9),
        inset 0 0 180px rgba(0, 0, 0, 0.6);
}

@keyframes flicker {
    0%,
    17%,
    19%,
    42%,
    44%,
    72%,
    100% {
        opacity: 1;
    }

    18%,
    43% {
        opacity: 0.72;
    }

    73% {
        opacity: 0.88;
    }
}

@keyframes sub-flicker {
    0%,
    30%,
    32%,
    100% {
        opacity: 0.8;
    }

    31% {
        opacity: 0.2;
    }
}

@keyframes text-jitter {
    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(0.5px, -0.2px);
    }

    50% {
        transform: translate(-0.4px, 0.3px);
    }

    75% {
        transform: translate(0.2px, 0.1px);
    }
}

@keyframes signal-scan {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }

    15% {
        opacity: 0.45;
    }

    50% {
        opacity: 0.15;
    }

    100% {
        transform: translateY(40px);
        opacity: 0;
    }
}

@keyframes glow-pulse {
    0%,
    100% {
        opacity: 0.7;
    }

    50% {
        opacity: 1;
    }
}

@keyframes noise {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(2%, -1%);
    }

    50% {
        transform: translate(-1%, 2%);
    }

    75% {
        transform: translate(1%, 1%);
    }

    100% {
        transform: translate(-2%, -1%);
    }
}

@keyframes status-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.25;
    }
}

@media (max-width: 1000px) {
    .crt-header {
        grid-template-columns:
            1fr
            1fr
            1fr
            1fr;
    }

    .header-title {
        display: none;
    }

    .header-brand {
        padding-left: 0;
    }

    .header-lab {
        padding-right: 0;
    }
}

@media (max-width: 700px) {
    .crt-header {
        min-height: 54px;
        padding: 8px 10px;
    }

    .header-block {
        padding: 0 6px;
        font-size: 8px;
        letter-spacing: 0.05em;
    }

    .header-logo {
        width: 26px;
        height: 26px;
    }

    .header-brand-text {
        font-size: 11px;
    }

    .header-status {
        justify-content: flex-start;
    }

    .header-clock {
        justify-content: flex-end;
    }

    .header-lab {
        display: none;
    }

    .crt-content {
        top: 54px;
        height: calc(100% - 54px);
    }

    .main-message {
        font-size: clamp(24px, 10vw, 60px);
        letter-spacing: 0.08em;
    }

    .sub-message {
        font-size: 9px;
        letter-spacing: 0.18em;
    }

    .signal-frame {
        width: 85vw;
    }

    .crt-background-logo {
        background-size: 90vw;
    }

    .logo-ghost {
        width: 60vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    .crt-background-logo,
    .logo-ghost,
    .crt-glow,
    .crt-noise,
    .main-message,
    .sub-message,
    .signal-line {
        animation: none !important;
    }
}