@layer base {

    :root{
        /* --- Palette --- */
        --color-bg: #5D3744 ;
        --color-bg-track: #5D3744 ;
        --color-accent: #FFF67E                                      ;
        --color-accent-light: #FFF67E                                      ;

        --color-glow: #FFF67Ebf;
        --color-glow-accent: #FFF67Ef2;
        --color-glow-light: #FFF67E;

        --color-shadow: #000000;
        
        --color-beam-edge:  #00000000;
        --color-beam-center:  #fff67e39;
    }

     html, body {
        height: 100%;
        max-height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
    }

    :where(*, :before, :after) {
        box-sizing: border-box;
        margin: 0;
        padding: 0
    }

    :where(a) {
        color: inherit;
        text-decoration: inherit
    }

    :where(img, video, audio) {
        width: 100%
    }

    :where(img, video, svg, canvas) {
        height: auto
    }

    :where([role=list]) {
        list-style: none
    }

    body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-accent);
    font-family: "Lucida Console", "Courier New", Courier, Monaco, monospace;
    position: relative;
    overflow-x: hidden;
    text-shadow: 0 0 6px currentColor, 0 0 12px  rgb(from var(--color-glow-light) r g b / .3), 2px 0 8px  rgb(from var(--color-glow-light) r g b / .2);
}

/* --- Scanline & Vignette --- */
    body::before {
        content: " ";
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: repeating-linear-gradient(
                rgb(from var(--color-shadow) r g b / .25) 2px,
                rgb(from var(--color-shadow) r g b / 0) 2px,
                rgb(from var(--color-shadow) r g b / .25) 4px);
        background-size: 100% 4px;
        z-index: 999999;
        pointer-events: none;
        animation: crt-flicker 0.15s infinite;

        box-shadow: inset 0 0 300px rgb(from var(--color-shadow) r g b / .85), inset 0 0 100px var(--color-shadow);
    }
}

@layer components {

/* --- screen effects --- */
    .noise,.os_rgb,.beam {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
    }

    .os_rgb {
        z-index: 99996;
        opacity: .2;
        pointer-events: none;
        mix-blend-mode: multiply;
        background-image: url(/Images/rgb.svg);
        background-position: 50%;
        background-repeat: repeat;
        background-size: .5rem;
    }

    .noise {
        z-index: 99997;
        opacity: .05;
        mix-blend-mode: luminosity;
        background-image: url(Images/noise.gif);
        background-size: 15rem;
    }

    .beam {
        z-index: 99998;
        overflow: hidden;
    }

    .beam::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        height: 300px;
        background: linear-gradient(to bottom,
                var(--color-beam-edge) 0%,
                var(--color-beam-center) 50%,
                var(--color-beam-edge) 100%);
        animation: beam-sweep 12s linear infinite;
    }

/* --- scroll bar --- */
    *::-webkit-scrollbar{
        width: 8px;
    }

    *::-webkit-scrollbar-track{
        background: var(--color-bg-track); 
        box-shadow: inset 0 0 4px rgb(from var(--color-shadow) r g b / .8);
        border-left: 1px solid  rgb(from var(--color-accent) r g b / 0.1);
    }

     *::-webkit-scrollbar-thumb {
        background: var(--color-accent);
        border-radius: 4px;
        box-shadow: 0 0 8px rgb(from var(--color-accent) r g b / 0.6); 
    }

    *::-webkit-scrollbar-thumb:hover {
        background: var(--color-accent-light);
        box-shadow: 0 0 12px rgb(from var(--color-accent) r g b / 0.9);
    }

/* --- nav --- */
    .icons {
        position: fixed;
        inset: 0;
        width: 100%;
        padding-block: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        overflow-y: auto;
        overflow-x: hidden;

    }

    .icons-list {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 96px;
    }

    .icons-item {
        position: relative;
    }

    .icons-icon {
        position: relative;
        display: flex;
        align-items: flex-end;
        background-color: transparent;
        box-shadow: none;
        overflow: visible;
        width: 100px;
        height: 100px;
    }

     .icons-icon::before{
        content: "";
        position: absolute;
        inset: 0;
        
        background-color: var(--color-accent); 
        opacity: .5;

        -webkit-mask-image: var(--icon-url);
        mask-image: var(--icon-url);

        -webkit-mask-mode: luminance;
        mask-mode: luminance;

        -webkit-mask-composite: xor; 
        mask-composite: exclude;

        -webkit-mask-size: contain;
        mask-size: contain;

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;

        -webkit-mask-position: bottom center;
        mask-position: bottom center;
        
        transition: background-color 0.2s ease, filter 0.2s ease, transform 0.4s ease;
     }

    .icons-link:hover .icons-icon::before {
        opacity: 0.95;
        transform: translateY(-4px);
    }

    .icons-icon svg {
        display: none;
    }

    .no-webgpu :is(.icons-icon svg) {
        display: unset;
    }

    .icons-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        text-align: center;
        gap: 22px;
        text-transform: uppercase;
        width: max-content;
        height: auto;
    }
/* --- response --- */
    @media(width>=768px) {
        .icons {
            position: relative;
            inset: unset;
            padding-block: 0;
            height: 100dvh;

             justify-content: center;
            overflow-y: hidden;
        }

        .icons-list {
            display: flex;
            align-items: center;
            gap: 72px;
        }
    }
}
/* --- screen global --- */
@keyframes crt-flicker {
    0% {opacity: 0.99;}
    50% {opacity: 1;}
    100% { opacity: 0.99;}
}
@keyframes beam-sweep {
    0% { top: -340px; }
    100% { top: 100vh;}
}