/* =========================================================
   MANDATUM CORE PLATFORM
   GOVTECH COMMAND INTERFACE
   ========================================================= */

html, body{
    margin:0;
    padding:0;
    height:100%;
}

/* =========================================================
   BASE VISUAL
   ========================================================= */

body.auth-page{
    font-family:Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    background:radial-gradient(circle at top left,#1e293b,#020617 70%);
    color:#fff;
    overflow:hidden;
}

/* fundo energético */
body.auth-page::before{
    content:"";
    position:fixed;
    inset:0;
    background:
        radial-gradient(1200px 600px at 15% 20%, rgba(37,99,235,.18), transparent 60%),
        radial-gradient(900px 500px at 85% 30%, rgba(30,64,175,.12), transparent 65%),
        radial-gradient(700px 400px at 50% 80%, rgba(2,132,199,.10), transparent 70%);
    animation:gradientMove 22s ease-in-out infinite alternate;
    z-index:0;
    pointer-events:none;
}

@keyframes gradientMove{
    0%{transform:translate(0,0)}
    100%{transform:translate(20px,-30px)}
}



/* =========================================================
   REDE NEURAL
   ========================================================= */

#neural-network{
    position:fixed;
    inset:0;
    z-index:0;
    opacity:.35;
    pointer-events:none;
}

/* partículas */
.ambient-particles{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.6;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.15), transparent),
        radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,.12), transparent),
        radial-gradient(1px 1px at 70% 30%, rgba(255,255,255,.10), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,.08), transparent);
    animation:particlesFloat 28s linear infinite;
}
@keyframes particlesFloat{
    from{transform:translateY(0)}
    to{transform:translateY(-60px)}
}

/* =========================================================
   BOOT SEQUENCE
   ========================================================= */

#system-boot{
    position:fixed;
    inset:0;
    background:#000814;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    font-family:monospace;
    color:#60a5fa;
}

.boot-text{
    animation:bootPulse 1.2s infinite;
}
@keyframes bootPulse{
    0%{opacity:.3}
    50%{opacity:1}
    100%{opacity:.3}
}

/* =========================================================
   LAYOUT
   ========================================================= */

.auth-container{
    display:grid;
    grid-template-columns:1.2fr .8fr;
    height:100vh;
    position:relative;
    z-index:1;
}

/* =========================================================
   HERO INTELIGÊNCIA
   ========================================================= */

.auth-hero{
    padding:80px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    animation:fadeLeft .8s cubic-bezier(.2,.8,.2,1) both;
}

.system-label{
    font-size:12px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.5;
    margin-bottom:12px;
}

.auth-hero h1{
    font-size:52px;
    font-weight:800;
    letter-spacing:1px;
    margin:0;
}

.auth-hero h2{
    margin:16px 0 24px;
    font-weight:400;
    opacity:.85;
}

.system-status{
    margin:15px 0 20px;
    font-size:14px;
    display:flex;
    align-items:center;
    gap:8px;
}

.status-dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#22c55e;
    box-shadow:0 0 10px #22c55e;
    animation:pulse 2s infinite;
}
@keyframes pulse{
    0%{opacity:1}
    50%{opacity:.4}
    100%{opacity:1}
}

/* telemetria */
.telemetry{
    font-family:monospace;
    font-size:12px;
    opacity:.65;
    margin-bottom:30px;
}

/* métricas */
.metrics-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
    margin-bottom:35px;
}
.metric{
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.05);
    padding:18px;
    border-radius:14px;
}
.metric-value{
    font-size:22px;
    font-weight:700;
    color:#60a5fa;
}
.metric-label{
    font-size:12px;
    opacity:.6;
}

/* arquitetura */
.arch-title{
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    opacity:.5;
    margin-bottom:10px;
}
.architecture li{
    font-size:14px;
    margin-bottom:6px;
    opacity:.75;
}

.badge{
    margin-top:20px;
    padding:8px 16px;
    border-radius:999px;
    background:rgba(96,165,250,.15);
    color:#93c5fd;
    font-size:13px;
    width:fit-content;
}

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

.login-card{
    background:rgba(2,6,23,.85);
    backdrop-filter:blur(12px);
    margin:auto;
    width:100%;
    max-width:420px;
    padding:48px;
    border-radius:20px;
    box-shadow:0 40px 80px rgba(0,0,0,.7);
    text-align:center;
    position:relative;
}

.login-card:hover{
    transform:translateY(-3px);
    box-shadow:0 50px 110px rgba(0,0,0,.75);
}

.login-card input{
    width:100%;
    padding:14px;
    margin-bottom:14px;
    border-radius:12px;
    border:1px solid #1e293b;
    background:#020617;
    color:#fff;
}

.login-card input:focus{
    outline:none;
    border-color:#60a5fa;
    box-shadow:0 0 0 4px rgba(37,99,235,.2);
}

.login-card button{
    width:100%;
    padding:14px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#1d4ed8);
    border:none;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    opacity:.65;
    pointer-events:none;
}

.login-card.pronto button{
    opacity:1;
    pointer-events:auto;
    animation:glowPulse 1.6s infinite;
}

@keyframes glowPulse{
    0%{box-shadow:0 0 0 rgba(37,99,235,0)}
    50%{box-shadow:0 16px 50px rgba(37,99,235,.25)}
    100%{box-shadow:0 0 0 rgba(37,99,235,0)}
}

/* logs */
#auth-log{
    margin-top:15px;
    font-family:monospace;
    font-size:11px;
    opacity:.6;
    text-align:left;
}

.login-footer{
    margin-top:20px;
    font-size:12px;
    opacity:.5;
}

.security-note{
    margin-top:10px;
    font-size:12px;
    opacity:.6;
}

/* =========================================================
   ANIMAÇÕES
   ========================================================= */

@keyframes fadeLeft{
    from{opacity:0; transform:translateX(-16px)}
    to{opacity:1; transform:translateX(0)}
}

/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce){
    *{animation:none!important;transition:none!important}
}

/* =========================================================
   GEOINTELIGÊNCIA NACIONAL
   ========================================================= */

#geo-map{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.18;
}

/* mapa base */
.geo-brasil{
    position:absolute;
    width:520px;
    left:12%;
    top:50%;
    transform:translateY(-50%);
    filter:drop-shadow(0 0 40px rgba(37,99,235,.25));
}

/* pontos de atividade */
.geo-node{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#60a5fa;
    box-shadow:0 0 12px #60a5fa;
    animation:geoPulse 2.2s infinite ease-in-out;
}

@keyframes geoPulse{
    0%{transform:scale(1); opacity:.7}
    50%{transform:scale(1.8); opacity:1}
    100%{transform:scale(1); opacity:.7}
}

/* conexões regionais */
.geo-link{
    position:absolute;
    height:1px;
    background:linear-gradient(90deg, transparent, #60a5fa, transparent);
    transform-origin:left center;
    opacity:.35;
}