/*
|--------------------------------------------------------------------------
| INITIALIZE PAGE
|--------------------------------------------------------------------------
|
| System registry / boot terminal for
| accessing Construct applications.
|
| This page intentionally avoids a
| dashboard/card aesthetic in favor
| of a cleaner console-style interface.
|
*/

.construct-initialize{
    position:relative;

    min-height:100vh;

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

    padding:140px 24px 100px;

    overflow:hidden;
}

/*
|--------------------------------------------------------------------------
| ATMOSPHERIC GRID
|--------------------------------------------------------------------------
*/

.construct-initialize::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);

    background-size:38px 38px;

    opacity:0.45;

    pointer-events:none;
}

/*
|--------------------------------------------------------------------------
| MAIN TERMINAL SHELL
|--------------------------------------------------------------------------
*/

.initialize-shell{
    position:relative;
    z-index:2;

    width:min(100%, 980px);

    padding:48px 42px;

    background:rgba(255,255,255,0.38);

    border:1px solid rgba(0,0,0,0.08);
    border-radius:28px;

    backdrop-filter:blur(14px);

    box-shadow:
        0 18px 50px rgba(0,0,0,0.08),
        inset 0 0 0 1px rgba(255,255,255,0.25);
}

/*
|--------------------------------------------------------------------------
| EYEBROW
|--------------------------------------------------------------------------
*/

.initialize-eyebrow{
    margin:0 0 18px;

    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.26em;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| MAIN TITLE
|--------------------------------------------------------------------------
*/

.initialize-shell h1{
    margin:0;

    color:var(--text-main);

    font-size:clamp(2.6rem, 7vw, 5rem);
    font-weight:500;
    letter-spacing:0.14em;
    line-height:0.95;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| STATUS BLOCK
|--------------------------------------------------------------------------
*/

.initialize-status{
    margin-top:34px;
    padding-top:24px;

    border-top:1px solid rgba(0,0,0,0.08);
}

.initialize-status p{
    margin:0;

    color:rgba(0,0,0,0.68);

    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.16em;
    line-height:2;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| MODULE LIST
|--------------------------------------------------------------------------
*/

.module-list{
    margin-top:44px;

    display:flex;
    flex-direction:column;
}

/*
|--------------------------------------------------------------------------
| MODULE ROW
|--------------------------------------------------------------------------
|
| Shared styling for both active
| and inactive modules.
|
*/

.module-row{
    position:relative;

    padding:24px 0;

    display:grid;
    grid-template-columns:90px 1fr auto;
    gap:24px;

    border-top:1px solid rgba(0,0,0,0.08);

    text-decoration:none;

    transition:
        opacity 180ms ease,
        transform 180ms ease,
        background 180ms ease;
}

/*
|--------------------------------------------------------------------------
| HOVER STATES
|--------------------------------------------------------------------------
*/

.module-row.online:hover{
    transform:translateX(4px);

    opacity:0.88;
}

.module-row.locked{
    opacity:0.42;
}

/*
|--------------------------------------------------------------------------
| MODULE INDEX
|--------------------------------------------------------------------------
*/

.module-index{
    color:rgba(0,0,0,0.38);

    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.18em;
}

/*
|--------------------------------------------------------------------------
| MODULE MAIN CONTENT
|--------------------------------------------------------------------------
*/

.module-main{
    display:flex;
    flex-direction:column;
    gap:8px;
}

/*
|--------------------------------------------------------------------------
| MODULE TITLE
|--------------------------------------------------------------------------
*/

.module-title{
    color:var(--text-main);

    font-size:1rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| MODULE DESCRIPTION
|--------------------------------------------------------------------------
*/

.module-desc{
    color:rgba(0,0,0,0.56);

    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.12em;
    line-height:1.8;
    text-transform:uppercase;
}

/*
|--------------------------------------------------------------------------
| MODULE STATUS
|--------------------------------------------------------------------------
*/

.module-state{
    align-self:start;

    color:var(--accent-primary);

    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
}

.module-row.locked .module-state{
    color:rgba(0,0,0,0.35);
}

/*
|--------------------------------------------------------------------------
| RETURN LINK
|--------------------------------------------------------------------------
*/

.initialize-return{
    display:inline-block;

    margin-top:54px;

    color:rgba(0,0,0,0.52);

    font-family:var(--font-mono);
    font-size:0.68rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    text-decoration:none;

    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.initialize-return:hover{
    transform:translateX(-3px);

    opacity:0.7;
}

/*
|--------------------------------------------------------------------------
| MOBILE
|--------------------------------------------------------------------------
*/

@media(max-width:800px){

    .construct-initialize{
        padding:120px 18px 80px;
    }

    .initialize-shell{
        padding:34px 24px;
    }

    .initialize-shell h1{
        font-size:clamp(2rem, 13vw, 3.4rem);

        line-height:1;
    }

    .module-row{
        grid-template-columns:1fr;
        gap:12px;
    }

    .module-state{
        margin-top:2px;
    }

}