/* =========================================================
   ANOMALIA NETWORK
   CRT Monitor Effects
   Version: 1.0
   ========================================================= */


/* =========================================================
   CRT Effect Variables
   ========================================================= */

:root {
    --crt-scanline-opacity: 0.035;
    --crt-vignette-opacity: 0.65;
    --crt-glow-opacity: 0.16;
    --crt-flicker-opacity: 0.018;
    --crt-channel-offset: 0.35px;
}


/* =========================================================
   CRT Screen Container
   ========================================================= */

body {
    position: relative;

    overflow-x: hidden;

    background-color: var(--color-background);
}


/*
   Todas as camadas CRT utilizam pseudo-elementos fixos.
   Elas não interferem em cliques ou na seleção de conteúdo.
*/

body::before,
body::after {
    position: fixed;
    inset: 0;

    z-index: 9998;

    display: block;

    pointer-events: none;

    content: "";
}


/* =========================================================
   Scanlines
   ========================================================= */

body::before {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, var(--crt-scanline-opacity)) 3px,
            rgba(0, 0, 0, var(--crt-scanline-opacity)) 4px
        );

    opacity: 1;
}


/* =========================================================
   Screen Vignette
   ========================================================= */

body::after {
    background:
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0, 0, 0, 0.18) 72%,
            rgba(0, 0, 0, var(--crt-vignette-opacity)) 100%
        );

    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.48),
        inset 0 0 160px rgba(0, 0, 0, 0.28);
}


/* =========================================================
   Phosphor Screen Glow
   ========================================================= */

#application {
    text-shadow:
        0 0 2px rgba(184, 255, 184, var(--crt-glow-opacity)),
        0 0 8px rgba(91, 255, 110, 0.035);
}


/* Aplicamos brilho um pouco maior somente aos elementos
   mais importantes da interface. */

.terminal-header h1,
.operator-console h2,
.status-module h3,
.system-console h3 {
    text-shadow:
        0 0 2px rgba(184, 255, 184, 0.22),
        0 0 10px rgba(91, 255, 110, 0.08);
}

.operator-console h2 {
    text-shadow:
        calc(var(--crt-channel-offset) * -1) 0 rgba(255, 92, 92, 0.09),
        var(--crt-channel-offset) 0 rgba(108, 168, 255, 0.09),
        0 0 3px rgba(184, 255, 184, 0.25),
        0 0 20px rgba(91, 255, 110, 0.12);
}


/* =========================================================
   Screen Reflection
   ========================================================= */

#application::before {
    position: fixed;
    inset: 0;

    z-index: 9996;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0.025) 0%,
            rgba(255, 255, 255, 0.008) 18%,
            transparent 33%,
            transparent 100%
        );

    pointer-events: none;

    content: "";
}


/* =========================================================
   Screen Flicker Layer
   ========================================================= */

#application::after {
    position: fixed;
    inset: 0;

    z-index: 9997;

    background-color: rgba(
        184,
        255,
        184,
        var(--crt-flicker-opacity)
    );

    opacity: 0;

    pointer-events: none;

    content: "";

    animation: crt-screen-flicker 7s infinite;
}


/* =========================================================
   Subtle Screen Movement
   ========================================================= */

.crt-active {
    animation: crt-screen-shift 12s infinite;
}


/* =========================================================
   CRT Text Effect
   ========================================================= */

.crt-text {
    position: relative;

    text-shadow:
        calc(var(--crt-channel-offset) * -1) 0 rgba(255, 92, 92, 0.12),
        var(--crt-channel-offset) 0 rgba(108, 168, 255, 0.12),
        0 0 4px rgba(91, 255, 110, 0.15);
}


/* =========================================================
   Horizontal Signal Sweep
   ========================================================= */

.crt-sweep::after {
    position: fixed;
    top: -30%;
    left: 0;

    z-index: 9995;

    width: 100%;
    height: 18%;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(91, 255, 110, 0.012) 35%,
            rgba(184, 255, 184, 0.035) 50%,
            rgba(91, 255, 110, 0.012) 65%,
            transparent 100%
        );

    pointer-events: none;

    content: "";

    animation: crt-signal-sweep 11s linear infinite;
}


/* =========================================================
   CRT Panel Texture
   ========================================================= */

.operator-console .container,
.status-module,
.system-console .container {
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.006) 50%,
            rgba(0, 0, 0, 0.008) 50%
        ),
        linear-gradient(
            90deg,
            rgba(255, 92, 92, 0.006),
            rgba(91, 255, 110, 0.003),
            rgba(108, 168, 255, 0.006)
        );

    background-size:
        100% 4px,
        6px 100%;
}


/* =========================================================
   CRT Corners
   ========================================================= */

.crt-frame {
    position: fixed;
    inset: 0;

    z-index: 9999;

    border: 1px solid rgba(184, 255, 184, 0.025);
    border-radius: 12px;

    box-shadow:
        inset 0 0 22px rgba(0, 0, 0, 0.75),
        inset 0 0 70px rgba(0, 0, 0, 0.38);

    pointer-events: none;
}


/* =========================================================
   Effect Control Classes
   ========================================================= */

.crt-disabled::before,
.crt-disabled::after {
    display: none;
}

.no-scanlines::before {
    background: none;
}

.no-vignette::after {
    background: none;
    box-shadow: none;
}

.no-flicker #application::after {
    animation: none;
    opacity: 0;
}


/* =========================================================
   CRT Animations
   ========================================================= */

@keyframes crt-screen-flicker {
    0%,
    2%,
    4%,
    6%,
    8%,
    10%,
    100% {
        opacity: 0;
    }

    3% {
        opacity: 0.22;
    }

    5% {
        opacity: 0.08;
    }

    7% {
        opacity: 0.14;
    }

    9% {
        opacity: 0.05;
    }

    54% {
        opacity: 0;
    }

    54.5% {
        opacity: 0.12;
    }

    55% {
        opacity: 0;
    }
}

@keyframes crt-screen-shift {
    0%,
    96%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    96.5% {
        transform: translate3d(0.15px, 0, 0);
    }

    97% {
        transform: translate3d(-0.15px, 0.1px, 0);
    }

    97.5% {
        transform: translate3d(0, 0, 0);
    }
}

@keyframes crt-signal-sweep {
    0% {
        transform: translateY(-130%);
    }

    100% {
        transform: translateY(760%);
    }
}


/* =========================================================
   Reduced Motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    #application::after,
    .crt-active,
    .crt-sweep::after {
        animation: none !important;
    }

    #application::after {
        opacity: 0;
    }
}


/* =========================================================
   Mobile Adjustments
   ========================================================= */

@media (max-width: 767.98px) {
    :root {
        --crt-scanline-opacity: 0.04;
        --crt-vignette-opacity: 0.38;
        --crt-glow-opacity: 0.12;
    }

    body::after {
        box-shadow:
            inset 0 0 45px rgba(0, 0, 0, 0.38),
            inset 0 0 90px rgba(0, 0, 0, 0.2);
    }

    #application {
        text-shadow:
            0 0 2px rgba(184, 255, 184, 0.1);
    }
}