/* ==========================================================
   RUSSOS AMS X1
   DISPLAY.CSS
   DISPLAY / LCD / BOOT INTERFACE
========================================================== */


/* ==========================================================
   DISPLAY MODULE
========================================================== */

.display-module{

    position:absolute;

    top:78px;

    left:82px;
    right:82px;

    bottom:72px;

    display:flex;

    z-index:20;

}


/* ==========================================================
   DISPLAY BEZEL
========================================================== */

.inner-screen-bezel{

    position:relative;

    width:100%;
    height:100%;

    padding:18px;

    overflow:hidden;

    border-radius:4px;

    background:

        linear-gradient(
            180deg,
            #303844 0%,
            #1F252D 18%,
            #11151B 100%
        );

    border-top:6px solid #07090C;
    border-left:5px solid #090C10;
    border-right:3px solid #576170;
    border-bottom:3px solid #6B7788;

    box-shadow:

        inset 0 18px 30px rgba(255,255,255,.025),

        inset 0 -20px 35px rgba(0,0,0,.80),

        inset 10px 0 18px rgba(255,255,255,.02),

        inset -10px 0 18px rgba(0,0,0,.45),

        0 0 35px rgba(0,0,0,.55);

}


/* ==========================================================
   BEZEL INNER EDGE
========================================================== */

.inner-screen-bezel::before{

    content:"";

    position:absolute;

    top:8px;
    left:8px;
    right:8px;
    bottom:8px;

    border-radius:3px;

    border-top:
        1px solid rgba(255,255,255,.05);

    border-left:
        1px solid rgba(255,255,255,.02);

    border-right:
        1px solid rgba(0,0,0,.65);

    border-bottom:
        1px solid rgba(0,0,0,.90);

    pointer-events:none;

}


/* ==========================================================
   BEZEL INNER FRAME
========================================================== */

.inner-screen-bezel::after{

    content:"";

    position:absolute;

    inset:16px;

    border-radius:2px;

    border:
        1px solid rgba(255,255,255,.02);

    pointer-events:none;

}


/* ==========================================================
   RUBBER GASKET
========================================================== */

.display-rubber{

    position:relative;

    width:100%;
    height:100%;

    padding:8px;

    background:#12161B;

    border-radius:2px;

    border:1px solid #050608;

    box-shadow:

        inset 0 0 6px rgba(255,255,255,.02),

        inset 0 0 18px rgba(0,0,0,.95);

}


/* ==========================================================
   DISPLAY GLASS
========================================================== */

.display-glass{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    background:

        linear-gradient(
            180deg,
            #151C24 0%,
            #090B0D 30%,
            #040506 100%
        );

    border-top:
        2px solid rgba(255,255,255,.08);

    border-left:
        1px solid rgba(255,255,255,.03);

    border-right:
        1px solid rgba(0,0,0,.55);

    border-bottom:
        2px solid rgba(0,0,0,.92);

    box-shadow:

        inset 0 0 120px rgba(0,0,0,.88),

        inset 0 -60px 80px rgba(0,0,0,.60),

        0 0 12px rgba(0,0,0,.55);

}


/* ==========================================================
   GLASS REFLECTION
========================================================== */

.display-reflection{

    position:absolute;

    top:-40%;

    left:-30%;

    width:40%;

    height:180%;

    z-index:15;

    pointer-events:none;

    opacity:0;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.035),
            transparent
        );

    transform:
        rotate(28deg)
        translateX(-120px);

}


/* ==========================================================
   DISPLAY NOISE
========================================================== */

.display-noise{

    position:absolute;

    inset:0;

    z-index:30;

    opacity:.012;

    pointer-events:none;

    background-image:

        radial-gradient(
            circle,
            #FFFFFF 1px,
            transparent 1px
        );

    background-size:5px 5px;

}


/* ==========================================================
   LCD CORE
========================================================== */

.terminal-display-core{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

    background:#040506;

    border:1px solid #000;

    box-shadow:

        inset 0 0 80px rgba(0,0,0,.96),

        inset 0 0 25px rgba(0,0,0,.70);

}


/* ==========================================================
   LCD VIGNETTE
========================================================== */

.terminal-display-core::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:25;

    pointer-events:none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 55%,
            rgba(0,0,0,.42) 100%
        );

}


/* ==========================================================
   LCD EDGE DARKENING
========================================================== */

.terminal-display-core::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:26;

    pointer-events:none;

    box-shadow:

        inset 0 0 55px rgba(0,0,0,.65);

}


/* ==========================================================
   DISPLAY CONTENT
========================================================== */

.display-content{

    position:relative;

    width:100%;
    height:100%;

    z-index:10;

}


/* ==========================================================
   DISPLAY DASHBOARD
========================================================== */

.display-dashboard{

    position:relative;

    width:100%;
    height:100%;

    overflow:hidden;

}


/* ==========================================================
   DISPLAY DASHBOARD CONTENT
========================================================== */

.display-dashboard-content{

    position:relative;

    width:100%;
    height:100%;

    overflow:auto;

}


/* ==========================================================
   AMS BOOT OVERLAY
========================================================== */

.display-boot-overlay{

    position:absolute;

    inset:0;

    z-index:500;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#040506;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .45s ease,

        visibility .45s ease;

}


/* ==========================================================
   BOOT ACTIVE
========================================================== */

.terminal-boot .display-boot-overlay{

    opacity:1;

    visibility:visible;

}


/* ==========================================================
   BOOT CONTENT
========================================================== */

.display-boot-content{

    width:100%;

    height:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    font-family:
        Consolas,
        "Courier New",
        monospace;

}


/* ==========================================================
   BOOT BRAND
========================================================== */

.display-boot-brand{

    margin:0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:36px;

    font-weight:800;

    letter-spacing:8px;

    line-height:1;

    color:#DDE5EC;

    opacity:0;

    transform:translateY(6px);

}


/* ==========================================================
   BOOT SUBTITLE
========================================================== */

.display-boot-subtitle{

    margin-top:12px;

    font-size:11px;

    letter-spacing:5px;

    color:#667582;

    opacity:0;

}


/* ==========================================================
   BOOT STATUS LIST
========================================================== */

.display-boot-status{

    width:420px;

    margin-top:36px;

    display:flex;

    flex-direction:column;

    gap:10px;

}


/* ==========================================================
   STATUS LINE
========================================================== */

.boot-status-line{

    display:flex;

    align-items:center;

    gap:14px;

    height:22px;

    font-size:12px;

    letter-spacing:2px;

    color:#4D5A65;

    opacity:.45;

    transition:

        color .3s ease,

        opacity .3s ease;

}


/* ==========================================================
   STATUS INDICATOR
========================================================== */

.boot-status-indicator{

    width:48px;

    flex:0 0 48px;

    text-align:left;

    font-size:11px;

    color:#3C4852;

    white-space:nowrap;

}


/* ==========================================================
   STATUS ACTIVE
========================================================== */

.boot-status-line.active{

    color:#D6E0E8;

    opacity:1;

}


.boot-status-line.active
.boot-status-indicator{

    color:#00F2FE;

}


/* ==========================================================
   STATUS COMPLETE
========================================================== */

.boot-status-line.complete{

    color:#8C9AA5;

    opacity:1;

}


.boot-status-line.complete
.boot-status-indicator{

    color:#00F2FE;

}


/* ==========================================================
   CURRENT BOOT ACTION
========================================================== */

.display-boot-current{

    margin-top:24px;

    min-height:18px;

    font-size:12px;

    letter-spacing:2.5px;

    color:#8B99A5;

    opacity:0;

}


/* ==========================================================
   PROGRESS FRAME
========================================================== */

.display-boot-progress{

    width:420px;

    height:5px;

    margin-top:16px;

    overflow:hidden;

    background:#11171C;

    border:1px solid #1C252D;

    opacity:0;

}


/* ==========================================================
   PROGRESS BAR
========================================================== */

.display-boot-progress-bar{

    width:0%;

    height:100%;

    background:#00F2FE;

    box-shadow:

        0 0 5px rgba(0,242,254,.45),

        0 0 12px rgba(0,242,254,.18);

}


/* ==========================================================
   LOGIN PREPARATION
========================================================== */

.display-boot-login{

    margin-top:18px;

    min-height:18px;

    font-size:12px;

    letter-spacing:2.5px;

    color:#00F2FE;

    opacity:0;

}


/* ==========================================================
   BOOT BRAND ANIMATION
========================================================== */

.terminal-boot .display-boot-brand{

    animation:

        bootBrandIn
        .7s
        ease
        .15s
        forwards;

}


/* ==========================================================
   BOOT SUBTITLE ANIMATION
========================================================== */

.terminal-boot .display-boot-subtitle{

    animation:

        bootFadeIn
        .5s
        ease
        .45s
        forwards;

}


/* ==========================================================
   BOOT STATUS
========================================================== */

.terminal-boot .display-boot-status{

    animation:

        bootFadeIn
        .5s
        ease
        .75s
        forwards;

}


/* ==========================================================
   CURRENT ACTION
========================================================== */

.terminal-boot .display-boot-current{

    animation:

        bootFadeIn
        .5s
        ease
        .9s
        forwards;

}


/* ==========================================================
   PROGRESS
========================================================== */

.terminal-boot .display-boot-progress{

    animation:

        bootFadeIn
        .4s
        ease
        1s
        forwards;

}


.terminal-boot .display-boot-progress-bar{

    animation:

        bootProgress
        5.8s
        cubic-bezier(.2,.7,.2,1)
        1.5s
        forwards;

}


/* ==========================================================
   LOGIN
========================================================== */

.terminal-boot .display-boot-login{

    animation:

        bootLogin
        .5s
        ease
        7s
        forwards;

}


/* ==========================================================
   READY
========================================================== */
.display-login-overlay {
    position: absolute;
    inset: 0;
    z-index: 1000;

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

    background: #040506;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .5s ease,
        visibility .5s ease;
}

.terminal-ready .display-login-overlay {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* ==========================================================
   KEYFRAMES
========================================================== */

@keyframes bootBrandIn{

    from{

        opacity:0;

        transform:
            translateY(6px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


@keyframes bootFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


@keyframes bootProgress{

    from{

        width:0%;

    }

    to{

        width:100%;

    }

}


@keyframes bootLogin{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}


/* ==========================================================
   DISPLAY READY
========================================================== */

.terminal-ready .terminal-display-core{

    opacity:1;

    transform:scale(1);

}


/* ==========================================================
   DISPLAY REFLECTION — READY
========================================================== */

.terminal-ready .display-reflection{

    opacity:.35;

}


/* ==========================================================
   DISPLAY REFLECTION — BOOT
========================================================== */

.terminal-boot .display-reflection{

    opacity:.12;

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

    .display-module{

        left:60px;

        right:60px;

    }

}


@media (max-width:800px){

    .display-module{

        top:65px;

        left:35px;

        right:35px;

        bottom:60px;

    }

    .inner-screen-bezel{

        padding:12px;

    }

    .display-rubber{

        padding:6px;

    }

    .display-boot-brand{

        font-size:20px;

        letter-spacing:4px;

    }

    .display-boot-status{

        width:260px;

    }

    .display-boot-progress{

        width:240px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .display-boot-overlay,
    .display-boot-brand,
    .display-boot-subtitle,
    .display-boot-status,
    .display-boot-current,
    .display-boot-progress,
    .display-boot-login,
    .display-boot-progress-bar{

        animation:none !important;

        transition:none !important;

    }

    .terminal-boot .display-boot-overlay{

        opacity:1;

        visibility:visible;

    }

}
/* ==========================================================
   LOGIN OVERLAY
========================================================== */

.display-login-overlay {

    position:absolute;

    inset:0;

    z-index:100;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    background:#040506;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


/* ==========================================================
   LOGIN NACH BOOT
========================================================== */

.terminal-ready .display-login-overlay {

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}
/* ==========================================================
   RUSSOS AMS
   LOGIN / DASHBOARD EBENE
========================================================== */

.display-content {

    position: relative;

    width: 100%;
    height: 100%;

    z-index: 40 !important;

    display: block;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}


/* ==========================================================
   LOGIN OVERLAY
========================================================== */

.display-login-overlay {

    position: absolute;

    inset: 0;

    z-index: 50 !important;

    display: flex !important;

    align-items: center;

    justify-content: center;

    opacity: 1 !important;

    visibility: visible !important;

    pointer-events: auto !important;

}


/* ==========================================================
   LOGIN FORM
========================================================== */

.display-login-content {

    position: relative;

    z-index: 51 !important;

    opacity: 1 !important;

    visibility: visible !important;

}