/* Troca de tema claro/escuro.
 *
 * Trocar de tema e uma acao deliberada e rara, entao pode ser lenta: o que
 * incomoda nao e a duracao, e o corte seco. Sao dois caminhos, nesta ordem.
 */

/* 1. Caminho preferido: cross-fade do documento inteiro, via View Transitions.
 *
 * As duas versoes da tela sao COMPOSTAS, entao nao existe quadro intermediario
 * de cor achatada — e o que nao e CSS entra junto, incluindo o <canvas> dos
 * graficos de /telemetry/ e /audit/.
 *
 * DURACAO: 400ms, e nao os 700ms de onde este mecanismo veio. La a tela INTEIRA
 * muda de tema; aqui a sidebar e o cabecalho sao `#030b29` nos dois temas (zero
 * variantes `dark:`), entao so o painel de conteudo transiciona. Um fade longo
 * deixa tempo demais no meio do caminho, onde o painel esta cinza e a moldura ja
 * esta parada — e a tela parece dividida. Curto, o olho le uma dissolucao unica.
 *
 * A curva simetrica comeca devagar, e o inicio suave e o que tira a sensacao de
 * estouro. As duas camadas PRECISAM da mesma curva: o navegador compoe com
 * `mix-blend-mode: plus-lighter`, e ai a camada velha vale 1-e(t) e a nova e(t)
 * — a soma so fica presa em 1 (nenhum quadro mais claro que o resultado final)
 * enquanto as duas usarem o mesmo e(t).
 *
 * Nao adiante declarar `mix-blend-mode` aqui: o `plus-lighter` do navegador vem
 * de uma ANIMACAO (`-ua-mix-blend-mode-plus-lighter`), e animacao vence
 * declaracao estatica na cascata. Medido: a declaracao e ignorada. */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
}

/* 2. Fallback para navegador sem View Transitions: transicao uniforme de cor.
 *
 * O `!important` sobre `*` e proposital e TEMPORARIO — a classe fica no <html>
 * so durante a troca. Sem ele, os 147 elementos que ja declaram
 * `transition-colors duration-200` mudariam de cor em 200ms enquanto o resto da
 * pagina muda em 620ms, e a tela se recomporia em ondas. */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow !important;
    transition-duration: 360ms !important;
    transition-timing-function: cubic-bezier(0.45, 0, 0.55, 1) !important;
    transition-delay: 0s !important;
}

/* 3. Troca instantanea.
 *
 * Usada em DOIS momentos, por motivos diferentes:
 *
 * - durante o cross-fade, para que as transicoes proprias dos elementos nao
 *   corram por baixo dele. O snapshot "novo" e capturado logo apos a troca de
 *   classe; um elemento no meio da sua propria transicao de 200ms seria
 *   capturado com a cor ANTIGA, o cross-fade terminaria numa imagem defasada e
 *   a tela daria um salto no fim;
 * - quando a animacao nao deve acontecer (`prefers-reduced-motion`). */
html.theme-no-transition,
html.theme-no-transition *,
html.theme-no-transition *::before,
html.theme-no-transition *::after {
    transition: none !important;
}

/* Quem pediu menos movimento troca de tema no corte seco, nos dois caminhos. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }

    html.theme-switching,
    html.theme-switching *,
    html.theme-switching *::before,
    html.theme-switching *::after {
        transition-duration: 0s !important;
    }
}