:root{
    /* cores do logo */
    --blue: #0b74ff;     /* azul forte do topo da nuvem */
    --cyan: #27e0c6;     /* ciano/verde da base da nuvem */

    /* tema claro */
    --bg: #eef2f5;
    --fg: #0a2a4a;

    /* ui */
    --logo-h: 320px;
    --progress-w: 320px;
    --progress-h: 10px;
    --progress-radius: 999px;

    /* trilho da barra */
    --track: rgba(0,0,0,.12);
    /* preenchimento da barra (gradiente que replica o logo) */
    --brand-grad: linear-gradient(90deg, var(--blue), var(--cyan));
}

html, body{
    margin:0; padding:0; height:100%; overflow:hidden;
    background: var(--bg);
    color: var(--fg);
}

/* Splash centralizado + leve vinheta com as cores do logo */
#splash{
    position:fixed; inset:0; z-index:9999;
    display:flex; align-items:center; justify-content:center;
    background:
            radial-gradient(60vmax 60vmax at 20% 20%,
            color-mix(in oklab, var(--blue) 12%, transparent) 0%,
            transparent 60%),
            radial-gradient(70vmax 70vmax at 80% 80%,
            color-mix(in oklab, var(--cyan) 12%, transparent) 0%,
            transparent 65%),
            var(--bg);
    transition: opacity .5s ease-out;
}
#splash.fade-out{ opacity:0; pointer-events:none; }

.splash-content{
    display:flex; flex-direction:column; align-items:center; text-align:center;
}

.splash-content img.logo {
    width: min(80vw, 400px);
    height: auto;
    max-height: 40vh;
    object-fit: contain;
}


.loading{
    margin-top:32px;
    font: 900 18px/1 'Inter', system-ui, sans-serif;
    letter-spacing:1px;
    color: var(--fg);
    display:inline-flex; align-items:baseline; gap:.25ch;
}

.loading .label{ position:relative; z-index:1; }

.dots{ display:inline-block; width:2.5ch; text-align:left; line-height:1; }
.dots::after{ content:""; animation:dots 2s infinite; color:inherit; }
.dots-bg{ color: var(--bg); }
.dots-fg{ color: var(--fg); }

@keyframes dots{
    0%{content:"";} 33%{content:".";} 66%{content:"..";} 100%{content:"...";}
}

/* barra de progresso */
.progress-wrap{
    width: var(--progress-w);
    height: var(--progress-h);
    border-radius: var(--progress-radius);
    background: var(--track);
    overflow:hidden;
    margin-top:12px;
}
.progress-bar{
    height:100%; width:0%;
    background: var(--brand-grad);
    transition: width .2s ease;
}

/* Tema escuro: mantém a MESMA imagem, troca só o ambiente */
@media (prefers-color-scheme: dark){
    :root{
        --bg: #0b1220;      /* fundo escuro neutro */
        --fg: #eaf2ff;      /* texto claro */
        --brand-grad: linear-gradient(90deg, color-mix(in oklab, var(--blue) 88%, #000) 0%,
        color-mix(in oklab, var(--cyan) 88%, #000) 100%);
        --logo-h: 280px;
        --progress-w: min(280px, 80vw);
        --track: rgba(255,255,255,.16);
    }
}