/* ============================================================
   ASTRON — A TELA DE CARREGAMENTO

   Ela existe por uma razão de apresentação, não de desempenho: o
   closer abre a página na frente do lead, e sem ela os primeiros
   segundos são uma tela quase vazia enchendo aos poucos — o
   símbolo aparece, depois o texto, depois o chão. Isso não é
   abertura, é montagem à vista.

   O que ela faz é mudar QUANDO o custo acontece, não removê-lo:
   os 17 MB de modelos e texturas são baixados aqui, com a barra
   correndo, em vez de durante as primeiras seções.

   Ela NÃO acelera os quadros. Depois de carregado, o custo por
   quadro é o mesmo. Quem cuida disso é a resolução adaptativa e o
   aquecimento de shaders, que já estão no stage.
   ============================================================ */

.carga {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-content: center;
    gap: 28px;
    background: var(--ink);
    color: var(--bone);

    /* Some sozinha, sem depender de JS para a transição. */
    opacity: 1;
    transition: opacity 0.6s ease;
}

/* O JS marca isto quando tudo está pronto. */
.carga.is-pronta {
    opacity: 0;
    pointer-events: none;
}

/* --- A marca --------------------------------------------------
   O mesmo SVG da moldura, em tamanho maior. Ele é a única coisa
   que aparece de imediato: enquanto o resto carrega, o lead vê a
   marca, não uma barra sozinha. */
.carga__marca {
    width: clamp(180px, 22vw, 260px);
    margin: 0 auto;
}

.carga__marca svg {
    display: block;
    width: 100%;
    height: auto;
}

.carga__marca .cls-1 {
    fill: var(--bone)
}

.carga__marca .cls-2 {
    fill: var(--lime)
}

/* --- A barra --------------------------------------------------
   Fina e sem moldura: ela informa sem virar protagonista. */
.carga__trilho {
    width: clamp(180px, 22vw, 260px);
    height: 2px;
    margin: 0 auto;
    background: rgba(248, 247, 242, 0.14);
    overflow: hidden;
}

.carga__barra {
    height: 100%;
    width: 0%;
    background: var(--lime);
    transform-origin: left center;
    transition: width 0.35s ease;
}

/* --- A legenda ------------------------------------------------
   Diz o que está acontecendo. Numa call, silêncio de dez segundos
   com uma barra parada parece travamento. */
.carga__texto {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    color: rgba(248, 247, 242, 0.55);
    min-height: 1.2em;
}

/* --- Quando algo falha ---------------------------------------
   Um asset que não carrega não pode travar a apresentação: a
   legenda avisa e o botão libera assim mesmo. Melhor uma cena
   incompleta do que uma tela presa na frente do lead. */
.carga__erro {
    display: none;
    margin: 0 auto;
    padding: 10px 20px;
    border: 1px solid rgba(140, 255, 0, 0.4);
    border-radius: 999px;
    background: none;
    color: var(--lime);
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.06em;
    cursor: pointer;
}

.carga.tem-erro .carga__erro {
    display: block;
}

.carga.tem-erro .carga__texto {
    color: rgba(255, 180, 180, 0.9);
}

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

    .carga,
    .carga__barra {
        transition: none;
    }
}