/* ==========================================================
   APP ANDROMEDA
   Login Screen
   ========================================================== */


/* ==========================================================
   1. LAYOUT
   ========================================================== */

.login-page{

    min-height:100vh;

    display:grid;

    grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);

    background:var(--white);

}


/* ==========================================================
   2. HERO
   ========================================================== */

.sky-panel{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    color:#fff;

    background:

        radial-gradient(
            circle at 25% 18%,
            rgba(46,168,255,.18),
            transparent 35%
        ),

        radial-gradient(
            circle at 78% 72%,
            rgba(110,189,255,.10),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            #08192f,
            #0c2340 55%,
            #12345b
        );

}


/* ==========================================================
   3. CANVAS
   ========================================================== */

#constellation-canvas{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    display:block;

    z-index:1;

}


/* ==========================================================
   4. HERO CONTENT
   ========================================================== */

.sky-content{

    position:relative;

    z-index:2;

    min-height:100vh;

    padding:clamp(40px,5vw,72px);

    display:flex;

    flex-direction:column;

}


/* ==========================================================
   5. BRAND
   ========================================================== */

.brand{

    display:flex;

    align-items:flex-start;

    gap:18px;

    width:max-content;

}


.brand-logo{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


.brand-text{

    font-family:"Orbitron",sans-serif;

    font-size:3rem;

    font-weight:300;

    line-height:1;

    letter-spacing:.04em;

    color:#ffffff;

    text-shadow:

        0 0 18px rgba(117,201,255,.15);
    
    position:relative;

}

.brand-text::after{

    content:"";

    position:absolute;

    top:50%;

    left:calc(100% + 14px);

    width:120px;

    height:1px;

    background:linear-gradient(
        90deg,
        rgba(110,189,255,.75),
        rgba(110,189,255,.15)
    );

    transform:translateY(-50%);

}

.brand-text::before{

    content:"";

    position:absolute;

    top:50%;

    left:calc(100% + 134px);

    width:7px;

    height:7px;

    border-radius:50%;

    background:#ffffff;

    box-shadow:
        0 0 10px #8dd6ff,
        0 0 22px #58b9ff;

    transform:translate(-50%,-50%);

}


.brand-app{

    margin-top:8px;

    margin-left:4px;

    color:#6ebdff;

    font-family:"Orbitron",sans-serif;

    font-size:.70rem;

    font-weight:500;

    letter-spacing:.60em;

    text-transform:uppercase;

}


/* ==========================================================
   6. HERO MESSAGE
   ========================================================== */

.sky-message{

    margin-top:auto;

    margin-bottom:120px;

    max-width:540px;

    align-self:start;

}


.hero-eyebrow{

    margin:0 0 26px;

    color:#6ebdff;

    font-family:"Orbitron",sans-serif;

    font-size:.62rem;

    font-weight:500;

    letter-spacing:.55em;

    text-transform:uppercase;

}

.login-eyebrow{

    margin:0 0 18px;

    color:#2ea8ff;

    font-size:.75rem;

    font-weight:700;

    letter-spacing:.30em;

    text-transform:uppercase;

}

.sky-message h1{

    margin:0;

    font-family:"Orbitron",sans-serif;

    font-size: clamp(1.35rem, 2vw, 2.2rem);

    font-weight:300;

    line-height:1.18;

    letter-spacing:-.02em;

    color:#ffffff;

}


.sky-message h1 span{

    display:block;

    margin-top:8px;

    color:#ffffff;

}


.sky-message p{

    display:none;

}


/* ==========================================================
   7. CONSTELLATION AREA
   ========================================================== */

.constellation-anchor{

    position:absolute;

    left:18%;

    top:26%;

    width:46%;

    height:36%;

    pointer-events:none;

}


/* ==========================================================
   8. PREPARAÇÃO PARA ANIMAÇÕES
   ========================================================== */

.brand-text{

    transition:

        opacity .5s ease,

        transform .5s ease;

}


.sky-message{

    margin-top:auto;

    margin-bottom:90px;

    max-width:380px;

}

/* ==========================================================
   9. LOGIN PANEL
   ========================================================== */

.login-panel{

    min-height:100vh;

    padding:48px clamp(40px,6vw,90px);

    display:flex;

    align-items:center;

    justify-content:center;

    background:

        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );

}


.login-card{

    width:100%;

    max-width:430px;

}


.mobile-brand{

    display:none;

}


/* ==========================================================
   10. LOGIN HEADER
   ========================================================== */

.login-header{

    margin-bottom:42px;

}


.login-header h2{

    margin:0;

    color:#08192f;

    font-size:2.6rem;

    font-weight:700;

    line-height:1.05;

    letter-spacing:-.04em;

}


.login-header p{

    margin-top:14px;

    color:#66788a;

    font-size:1rem;

    line-height:1.6;

}


/* ==========================================================
   11. FORM
   ========================================================== */

.login-form{

    display:grid;

    gap:24px;

}


.field{

    display:grid;

    gap:10px;

}


.field label{

    color:#0b2340;

    font-size:.90rem;

    font-weight:700;

}


.field input{

    width:100%;

    height:56px;

    padding:0 18px;

    border:1px solid #d7e3ef;

    border-radius:12px;

    outline:none;

    background:#ffffff;

    color:#08192f;

    font-size:.96rem;

    transition:

        border-color .20s ease,

        box-shadow .20s ease,

        transform .20s ease;

}


.field input::placeholder{

    color:#9aa9b9;

}


.field input:focus{

    border-color:#2ea8ff;

    box-shadow:

        0 0 0 4px rgba(46,168,255,.15);

}


/* ==========================================================
   12. PASSWORD
   ========================================================== */

.password-field{

    position:relative;

}


.password-field input{

    padding-right:86px;

}


.password-toggle{

    position:absolute;

    top:50%;

    right:16px;

    transform:translateY(-50%);

    border:0;

    background:none;

    color:#2a7fcc;

    font-size:.80rem;

    font-weight:700;

    cursor:pointer;

}


/* ==========================================================
   13. BUTTON
   ========================================================== */

.login-button{

    width:100%;

    height:58px;

    margin-top:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    border:none;

    border-radius:12px;

    background:

        linear-gradient(
            135deg,
            #1689e8,
            #2ea8ff
        );

    color:#ffffff;

    font-size:.95rem;

    font-weight:700;

    cursor:pointer;

    transition:

        transform .18s ease,

        box-shadow .18s ease;

    box-shadow:

        0 12px 28px rgba(22,137,232,.22);

}


.login-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 18px 34px rgba(22,137,232,.28);

}


.login-button:active{

    transform:translateY(0);

}


/* ==========================================================
   14. ERROR
   ========================================================== */

.form-error{

    margin-bottom:24px;

    padding:14px 16px;

    border-radius:12px;

    border:1px solid rgba(194,57,57,.20);

    background:rgba(194,57,57,.06);

    color:#b22222;

    font-size:.90rem;

}


/* ==========================================================
   15. FOOTER
   ========================================================== */


/* ==========================================================
   16. MOBILE
   ========================================================== */

@media(max-width:820px){

    .login-page{

        display:block;

        background:

            linear-gradient(

                165deg,

                #08192f 0,

                #0b2340 35%,

                #f8fbff 35%

            );

    }

    .sky-panel{

        position:absolute;

        inset:0 0 auto;

        min-height:36vh;

        background:

    radial-gradient(
        circle at 18% 18%,
        rgba(65,175,255,.26),
        transparent 28%
    ),

    radial-gradient(
        circle at 42% 55%,
        rgba(40,120,255,.18),
        transparent 24%
    ),

    radial-gradient(
        circle at 82% 76%,
        rgba(120,210,255,.10),
        transparent 26%
    ),

    linear-gradient(
        145deg,
        #07182d,
        #0b2340 55%,
        #12355d
    );

    }

    .sky-content{

    position:relative;

    z-index:2;

    min-height:100vh;

    padding:56px;

    display:grid;

    grid-template-rows:

        auto

        1fr

        auto;

}

    .login-panel{

        position:relative;

        z-index:5;

        min-height:100vh;

        padding:

            max(32px,env(safe-area-inset-top))

            20px

            max(24px,env(safe-area-inset-bottom));

        justify-content:flex-start;

        background:none;

    }

    .mobile-brand{

        display:flex;

        align-items:center;

        min-height:24vh;

        color:#ffffff;

    }

    .mobile-brand .brand-text{

        font-size:2rem;


    }

    .mobile-brand .brand-app{

        font-size:.60rem;

    }

    .login-card{

        max-width:none;

        padding:30px 24px;

        background:rgba(255,255,255,.97);

        border-radius:20px;

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

        box-shadow:

            0 20px 50px rgba(0,0,0,.10);

    }

}


/* ==========================================================
   17. SMALL DEVICES
   ========================================================== */

@media(max-width:480px){

    .login-panel{

        padding-left:16px;

        padding-right:16px;

    }

    .login-card{

        padding:26px 18px;

    }

    .login-header h2{

        font-size:2rem;

    }

}


/* ==========================================================
   18. ACCESSIBILITY
   ========================================================== */

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

    *,

    *::before,

    *::after{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

        scroll-behavior:auto !important;

    }

}


/* ==========================================================
   19. ANIMATION HOOKS
   ========================================================== */

.login-card{

    will-change:transform,opacity;

}


#constellation-canvas{

    will-change:opacity;

}

.login-button{

    will-change:

        transform,

        box-shadow;

}