/* ==========================================================
   MISSION CONTROL PORTFOLIO
   GLOBAL STYLES
   ========================================================== */

/* ==========================================================
   RESET
   ========================================================== */

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

html{
    scroll-behavior:smooth;
}

:root{

    --primary:#00F5FF;
    --secondary:#4D8DFF;
    --accent:#00FF9D;

    --bg:#050816;

    --surface:#0D1323;
    --surface-dark:#09101D;

    --border:#24304A;

    --text:#FFFFFF;
    --text-secondary:#A6B0C5;

    --radius:20px;

    --transition:.3s ease;

    --shadow:
        0 20px 40px rgba(0,0,0,.35);

    --glow:
        0 0 25px rgba(0,245,255,.15);

}

/* ==========================================================
   BODY
   ========================================================== */

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

}

/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,h2,h3,h4,h5,h6{

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

    font-weight:600;

}

p{

    color:var(--text-secondary);

    line-height:1.7;

}

a{

    color:inherit;

    text-decoration:none;

}

img{

    display:block;

    max-width:100%;

}

/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

#app{

    width:95%;

    max-width:1700px;

    margin:0 auto;

    padding:30px 0 60px;

}

/* ==========================================================
   COMMON SECTION SPACING
   ========================================================== */

section{

    margin-top:35px;

}

main{

    margin-top:35px;

}

/* ==========================================================
   BACKGROUND
   ========================================================== */

#background-grid{

    position:fixed;

    inset:0;

    z-index:-2;

    background:

        linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),

        linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);

    background-size:40px 40px;

}

#background-glow{

    position:fixed;

    inset:0;

    z-index:-1;

    background:

        radial-gradient(circle at 15% 15%,rgba(0,245,255,.12),transparent 35%),

        radial-gradient(circle at 90% 90%,rgba(77,141,255,.10),transparent 30%);

}

/* ==========================================================
   LOADER
   ========================================================== */

#loader{

    display:none;

}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#09101D;

}

::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}

/* ==========================================================
   BASE CARD
   ========================================================== */



/* ==========================================================
   BUTTONS
   ========================================================== */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:40px;

    cursor:pointer;

    transition:var(--transition);

}

.btn-primary{

    background:linear-gradient(90deg,var(--primary),var(--secondary));

    color:#000;

}

.btn-primary:hover{

    transform:translateY(-3px);

}

.btn-secondary{

    border:1px solid var(--primary);

    color:var(--primary);

}

.btn-secondary:hover{

    background:rgba(0,245,255,.08);

}

/* ==========================================================
   UTILITIES
   ========================================================== */

.flex{

    display:flex;

}

.grid{

    display:grid;

}

.text-center{

    text-align:center;

}

.hidden{

    display:none;

}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{

    background:var(--primary);

    color:#000;

}

/* ==========================================================
   BOOT SCREEN
   ========================================================== */

#boot-screen{

    position:fixed;

    inset:0;

    background:#050816;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

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

}

#boot-screen.hidden{

    opacity:0;

    visibility:hidden;

}

.boot-container{

    width:520px;

    max-width:90%;

    text-align:center;

}

.boot-container h1{

    color:#00F5FF;

    font-size:42px;

    letter-spacing:4px;

    margin-bottom:10px;

    text-shadow:0 0 18px rgba(0,245,255,.35);

}

.boot-version{

    color:#7FA6C5;

    margin-bottom:40px;

    letter-spacing:2px;

    font-size:14px;

}

.boot-log{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.boot-item{

    position:relative;

    text-align:left;

    padding:14px 18px;

    border-radius:10px;

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

    border:1px solid rgba(0,245,255,.12);

    color:#CFE8F5;

    overflow:hidden;

}

.boot-item::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:2px;

    background:#00F5FF;

    animation:bootProgress 1.8s forwards;

}

.boot-item:nth-child(2)::after{

    animation-delay:.25s;

}

.boot-item:nth-child(3)::after{

    animation-delay:.5s;

}

.boot-item:nth-child(4)::after{

    animation-delay:.75s;

}

.boot-item.success{

    color:#00FF9D;

    border-color:rgba(0,255,157,.35);

    text-align:center;

    font-weight:700;

}

/* ==========================================================
   BACKGROUND HUD GRID
   ========================================================== */

#background-grid{

    position:fixed;

    inset:0;

    pointer-events:none;

    z-index:-2;

    background-image:
        linear-gradient(
            rgba(0,245,255,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(0,245,255,.035) 1px,
            transparent 1px
        );

    background-size:50px 50px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 85%
        );

    -webkit-mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 85%
        );

}

/* ==========================================================
   AMBIENT BACKGROUND GLOW
   ========================================================== */

#background-glow{

    position:fixed;

    width:650px;

    height:650px;

    top:-250px;

    right:-200px;

    pointer-events:none;

    z-index:-1;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,245,255,.09) 0%,
        rgba(0,245,255,.035) 35%,
        transparent 70%
    );

    filter:blur(20px);

    animation:ambientGlow 10s ease-in-out infinite;

}