/*
 * Tela de abertura do app: cobre o intervalo entre o navegador receber o HTML e a sessão estar
 * hidratada (F5 numa rota autenticada; também a passagem do login para o app). Vive fora do
 * bundle — é carregada no <head> e precisa desenhar antes de existir qualquer JS —, então repete
 * os valores dos tokens em vez de lê-los (_tokens.scss). Liga/desliga pela classe `page-loading`
 * no <body> (inline script do index.html, useAppBootstrap, useLoginForm, TwoFactorView).
 *
 * **Opaco, um estado só.** O splash cobre dois contextos — o bundle baixando (nada atrás) e a
 * sessão hidratando (moldura pintada) — e qualquer acabamento que dependa do fundo (véu,
 * `backdrop-filter`) muda de aparência entre eles à vista de quem espera. Opaco, é sempre igual.
 */

body.page-loading {
    overflow: hidden;
    margin: 0;
    height: 100%;
}

.splash-screen {
    position: fixed;
    z-index: 2000; /* acima de tudo, inclusive dos modais (--z-modal 1000) */
    inset: 0;

    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;

    font-family: Inter, Helvetica, sans-serif;
    font-size: 13.65px;
    color: #78829d; /* --text-secondary */
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;

    background-color: #fcfcfc; /* --bg */

    /* Escondido por padrão: sai esmaecendo quando a classe do body é removida, em vez de
       desaparecer de um quadro para o outro. `visibility` espera o fim do fade. */
    visibility: hidden;
    opacity: 0;
    transition:
        opacity 0.35s ease,
        visibility 0s linear 0.35s;
}

.page-loading .splash-screen {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* mesmo anel do DsSpinner, para o carregamento ser o mesmo desenho em todo o app */
.splash-screen::before {
    content: '';

    box-sizing: border-box;
    width: 42px;
    height: 42px;
    border: 3px solid #1b84ff; /* --primary */
    border-inline-end-color: transparent;
    border-radius: 50%;

    animation: splash-spin 0.75s linear infinite;
}

@keyframes splash-spin {
    to {
        transform: rotate(360deg);
    }
}

html[data-theme='dark'] .splash-screen {
    color: #808290;
    background-color: #0f1014;
}

html[data-theme='dark'] .splash-screen::before {
    border-color: #006ae6;
    border-inline-end-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .splash-screen {
        transition: none;
    }

    .splash-screen::before {
        animation-duration: 2s;
    }
}