/* ==========================================================================
   carregando.css -- a tela de carregamento comum ao portal e aos tres
   sistemas (ver carregando.js, que monta o elemento).
   --------------------------------------------------------------------------
   A paleta e propria (--sl-*), e nao a das paginas: a visao geral do Service
   Manager usa nomes de variavel diferentes (--bg, --panel...) e a tela
   precisa aparecer antes mesmo do <style> da pagina ser lido. Os valores sao
   os mesmos dos tres temas (escuro, claro e SHD/github).
   ========================================================================== */
.sl{
  --sl-fundo:#0a1220; --sl-fundo-nav:rgba(10,18,32,.84);
  --sl-texto:#eef2f8; --sl-sub:#9fb0c8;
  --sl-trilho:rgba(255,255,255,.09); --sl-destaque:#ffcc00;
  --sl-halo:rgba(255,215,25,.16);
}
:root[data-theme="light"] .sl{
  --sl-fundo:#f2f0e3; --sl-fundo-nav:rgba(242,240,227,.86);
  --sl-texto:#20211a; --sl-sub:#54573f;
  --sl-trilho:rgba(32,28,10,.12); --sl-destaque:#d9a900;
  --sl-halo:rgba(217,169,0,.18);
}
:root[data-theme="github"] .sl{
  --sl-fundo:#0d1117; --sl-fundo-nav:rgba(13,17,23,.84);
  --sl-texto:#f0f6fc; --sl-sub:#8b949e;
  --sl-trilho:rgba(240,246,252,.08);
}

/* visibility:visible explicito: o Diff Manager esconde o <body> inteiro
   (.auth-pending) ate o script principal rodar -- sem isto a tela sumiria
   junto, justamente no momento em que ela tem que aparecer. */
.sl{
  position:fixed; inset:0; z-index:2147483000; margin:0; padding:16px;
  display:flex; align-items:center; justify-content:center;
  background:var(--sl-fundo); color:var(--sl-texto); visibility:visible;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box; cursor:progress; user-select:none;
  /* Entra com atraso: pagina que carrega rapido nunca chega a mostrar. */
  animation:sl-entrar .25s ease .18s both;
}
:root[data-font="shd"] .sl{font-family:"Josefin Sans",system-ui,sans-serif;}
.sl.sl-nav{background:var(--sl-fundo-nav);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation-delay:0s;}
.sl.sl-continuo{animation:none;}
.sl.sl-saindo{animation:sl-sair .3s ease forwards;}

.sl .sl-centro{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.sl .sl-marca{position:relative;width:96px;height:96px;margin-bottom:6px;}
.sl .sl-halo{position:absolute;inset:-26px;border-radius:50%;
  background:radial-gradient(circle,var(--sl-halo) 0%,transparent 68%);
  animation:sl-pulsar 2.2s ease-in-out infinite;}
.sl .sl-icone{position:relative;display:block;width:96px;height:96px;max-width:none;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.35));
  animation:sl-respirar 2.2s ease-in-out infinite;}
/* As listras brancas do icone deslizam -- um passo (225 unidades) por ciclo,
   que e a distancia entre duas listras, entao o laco nao "pula". */
.sl .sl-listras{animation:sl-listras 1.1s linear infinite;}

.sl .sl-nome{font-size:17px;font-weight:700;letter-spacing:.2px;color:var(--sl-texto);}
.sl .sl-barra{position:relative;width:200px;height:3px;border-radius:99px;overflow:hidden;background:var(--sl-trilho);}
.sl .sl-barra i{position:absolute;top:0;bottom:0;left:0;width:38%;border-radius:99px;background:var(--sl-destaque);
  animation:sl-barra 1.25s cubic-bezier(.45,.05,.55,.95) infinite;}
.sl .sl-msg{min-height:1.4em;font-size:12.5px;color:var(--sl-sub);}
.sl .sl-msg::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:sl-pontos 1.2s steps(4,end) infinite;}

@keyframes sl-entrar{from{opacity:0}to{opacity:1}}
@keyframes sl-sair{from{opacity:1}to{opacity:0;visibility:hidden}}
@keyframes sl-listras{from{transform:translateX(0)}to{transform:translateX(225px)}}
@keyframes sl-respirar{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes sl-pulsar{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes sl-barra{0%{transform:translateX(-105%)}100%{transform:translateX(270%)}}
@keyframes sl-pontos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

@media (prefers-reduced-motion:reduce){
  .sl .sl-halo,.sl .sl-icone,.sl .sl-listras,.sl .sl-msg::after{animation:none;}
  .sl .sl-barra i{animation-duration:2.6s;}
}