/* ==========================================================
   RUSSOS AMS X1
   LOGIN.CSS
   SECURE SYSTEM LOGIN
========================================================== */


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

.display-login-screen{

    position:absolute;

    inset:0;

    z-index:400;

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        radial-gradient(
            ellipse at center,
            rgba(20,30,38,.18),
            #040506 72%
        );

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:

        opacity .6s ease,

        visibility .6s ease;

}


/* ==========================================================
   SYSTEM READY → LOGIN
========================================================== */

.terminal-ready .display-login-screen{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


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

.display-login-content{

    position:relative;

    width:420px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}


/* ==========================================================
   TOP MICRO LABEL
========================================================== */

.display-login-content::before{

    content:"SECURE TERMINAL";

    position:absolute;

    top:-32px;

    left:50%;

    transform:translateX(-50%);

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

    font-size:8px;

    letter-spacing:4px;

    color:#3F4D57;

    white-space:nowrap;

}


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

.login-brand{

    font-family:

        Arial,
        Helvetica,
        sans-serif;

    font-size:32px;

    font-weight:800;

    letter-spacing:8px;

    line-height:1;

    color:#DDE5EC;

    text-shadow:

        0 0 8px rgba(255,255,255,.04);

}


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

.login-subtitle{

    margin-top:11px;

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

    font-size:10px;

    letter-spacing:4px;

    color:#687681;

}


/* ==========================================================
   READY STATUS
========================================================== */

.login-status{

    position:relative;

    margin-top:30px;

    padding-left:18px;

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

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

    color:#00F2FE;

    text-shadow:

        0 0 6px rgba(0,242,254,.25);

}


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

.login-status::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:6px;
    height:6px;

    transform:translateY(-50%);

    border-radius:50%;

    background:#00F2FE;

    box-shadow:

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

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

}


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

.ams-login-form{

    width:100%;

    margin-top:34px;

    display:flex;

    flex-direction:column;

    gap:20px;

}


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

.login-field{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:8px;

}


/* ==========================================================
   FIELD LABEL
========================================================== */

.login-field label{

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

    font-size:10px;

    font-weight:600;

    letter-spacing:2px;

    color:#788793;

}


/* ==========================================================
   INPUT
========================================================== */

.login-field input{

    box-sizing:border-box;

    width:100%;

    height:48px;

    padding:

        0 16px;

    border:

        1px solid #263039;

    border-radius:2px;

    outline:none;

    background:

        linear-gradient(
            180deg,
            #12191F 0%,
            #090D11 100%
        );

    color:#DDE5EC;

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

    font-size:14px;

    letter-spacing:1px;

    box-shadow:

        inset 0 2px 8px rgba(0,0,0,.65),

        inset 0 0 0 1px rgba(255,255,255,.015),

        0 1px 2px rgba(0,0,0,.55);

    transition:

        border-color .2s ease,

        box-shadow .2s ease,

        background .2s ease;

}


/* ==========================================================
   INPUT PLACEHOLDER
========================================================== */

.login-field input::placeholder{

    color:#46535F;

    opacity:1;

}


/* ==========================================================
   INPUT FOCUS
========================================================== */

.login-field input:focus{

    border-color:

        rgba(0,242,254,.55);

    background:

        linear-gradient(
            180deg,
            #151F26 0%,
            #0A1014 100%
        );

    box-shadow:

        inset 0 2px 8px rgba(0,0,0,.65),

        0 0 8px rgba(0,242,254,.08),

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

}


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

.ams-login-button{

    position:relative;

    width:100%;

    height:48px;

    margin-top:2px;

    overflow:hidden;

    border:

        1px solid rgba(0,242,254,.35);

    border-radius:2px;

    outline:none;

    cursor:pointer;

    background:

        linear-gradient(
            180deg,
            #18252C 0%,
            #0B1217 100%
        );

    color:#BDFBFF;

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

    font-size:11px;

    font-weight:700;

    letter-spacing:3px;

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.06),

        inset 0 -3px 6px rgba(0,0,0,.55),

        0 0 8px rgba(0,242,254,.05);

    transition:

        transform .1s ease,

        border-color .2s ease,

        background .2s ease,

        box-shadow .2s ease;

}


/* ==========================================================
   BUTTON LIGHT LINE
========================================================== */

.ams-login-button::before{

    content:"";

    position:absolute;

    top:0;
    left:8%;

    width:84%;

    height:1px;

    background:

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

}


/* ==========================================================
   BUTTON HOVER
========================================================== */

.ams-login-button:hover{

    border-color:

        rgba(0,242,254,.65);

    background:

        linear-gradient(
            180deg,
            #1B2A31 0%,
            #0D161B 100%
        );

    box-shadow:

        inset 0 1px 1px rgba(255,255,255,.07),

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

        0 0 24px rgba(0,242,254,.04);

}


/* ==========================================================
   BUTTON PRESS
========================================================== */

.ams-login-button:active{

    transform:

        translateY(1px)
        scale(.99);

    box-shadow:

        inset 0 3px 6px rgba(0,0,0,.75),

        0 0 5px rgba(0,242,254,.05);

}


/* ==========================================================
   SECURITY INFORMATION
========================================================== */

.login-security{

    margin-top:24px;

    display:flex;

    align-items:center;

    gap:10px;

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

    font-size:8px;

    letter-spacing:2.5px;

    color:#3E4B55;

}


/* ==========================================================
   SECURITY LINE
========================================================== */

.login-security::before,
.login-security::after{

    content:"";

    width:42px;

    height:1px;

    background:

        rgba(255,255,255,.035);

}


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

.terminal-ready .display-login-content{

    animation:

        loginAppear
        .7s
        cubic-bezier(.2,.7,.2,1)
        .1s
        both;

}


@keyframes loginAppear{

    from{

        opacity:0;

        transform:
            translateY(10px);

    }

    to{

        opacity:1;

        transform:
            translateY(0);

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:800px){

    .display-login-content{

        width:
            calc(100% - 50px);

    }


    .login-brand{

        font-size:25px;

        letter-spacing:6px;

    }


    .login-subtitle{

        font-size:8px;

        letter-spacing:3px;

    }


    .login-status{

        font-size:10px;

    }

}
/* ==========================================================
   LOGIN ERROR
========================================================== */

.login-error{

    width:100%;

    box-sizing:border-box;

    padding:11px 14px;

    border:1px solid rgba(220,70,70,.30);

    background:
        rgba(120,25,25,.12);

    color:#D98989;

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

    font-size:10px;

    letter-spacing:1px;

    text-align:left;

}