/* ============================================================
   TELA DE CARREGAMENTO (templates/loading.html)
   PREVIEW 30/09/2026 — redesenho em avaliação; o anterior (3 arcos
   girando + "ESTEK" em texto) está no histórico do git.

   Os três swooshes da logo se desenham em sequência (interno ->
   externo -> topo) por cima de uma "sombra" fixa da própria logo,
   e a palavra ESTEK entra letra a letra — o mesmo padrão da versão
   antiga, agora com as formas reais.

   Contrato com as telas (~58 arquivos de JS): #loading_overlay,
   z-index 9999, visível ao carregar e ligado/desligado por
   style.display = "flex" / "none". Cada vez que volta a aparecer
   as animações recomeçam do zero (display:none reinicia o CSS).

   PESO (medido 30/09 no Chromium sem GPU = PC antigo / driver
   bloqueado / acesso remoto; CPU total, 1920x1080): página parada 7%,
   loader antigo 20%, este ~37% a 60 fps. Antes dos ajustes abaixo
   eram 103% a 7 fps. NÃO reintroduzir sem medir de novo:
   - backdrop-filter: sem GPU, sozinho derruba para 7 fps;
   - isolation / animation-fill-mode both no overlay: forçam uma
     superfície de composição em tela cheia a cada quadro (+50%);
   - halo animado (+20%) — por isso ele é estático.
   ============================================================ */

.loading_overlay {
  /* Aliases locais: um ponto só para trocar a identidade. Os fallbacks
     valem para página sem .light-screen/.dark-screen no <body>. */
  --ld-cor:   var(--nav-accent, #099ba5);
  --ld-fundo: var(--nav-surface-2, #f5f8f9);
  --ld-halo:  var(--nav-accent-line, #099ba533);
  --ld-ciclo: 2.4s;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  /* sem fill-mode: terminado o fade, volta ao opacity 1 natural e não
     deixa o overlay preso numa camada de opacidade animada */
  animation: est-ld-entrar .2s ease-out;
}

/* Véu na cor da superfície do tema (a página aparece levemente por trás).
   Quase opaco porque não há desfoque: com .9 o texto da página cruzava a logo. */
.loading_overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: var(--ld-fundo);
  opacity: .95;
}

/* Halo teal atrás da logo. Estático: é pintado uma vez só. */
.loading_overlay::after {
  content: "";
  position: absolute;
  width: min(560px, 130vw);
  height: min(560px, 130vw);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ld-halo), transparent);
}

.est-ld {
  width: min(300px, 74vw);
  height: auto;
  aspect-ratio: 240 / 106;
  overflow: visible;
  /* Camada própria: o redesenho dos swooshes a cada quadro fica restrito
     ao SVG, sem repintar o véu e o gradiente do halo que estão atrás. */
  will-change: transform;
}

/* Sombra da logo: mantém o desenho reconhecível entre um ciclo e outro. */
.est-ld__fantasma { fill: var(--ld-cor); opacity: .14; }
.est-ld__swoosh   { fill: var(--ld-cor); }

/* Linha de centro de cada swoosh, dentro da <mask>: o traço branco é o que
   revela o swoosh. pathLength=100 normaliza o dash nos três. */
.est-ld__trilha {
  fill: none;
  stroke: #fff;
  stroke-width: 30;
  stroke-linecap: butt;
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  animation: est-ld-trilha var(--ld-ciclo) infinite;
}
.est-ld__trilha--2 { animation-delay: .1s; }
.est-ld__trilha--3 { animation-delay: .2s; }

/* ESTEK: entra letra a letra e fica. */
.est-ld__letra {
  fill: var(--ld-cor);
  opacity: 0;
  animation: est-ld-letra .5s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(.28s + var(--i, 0) * .07s);
}

.est-ld__slogan {
  fill: var(--ld-cor);
  opacity: 0;
  animation: est-ld-slogan .6s ease-out .75s forwards;
}

/* Reflexo que atravessa a palavra depois que os swooshes fecham.
   Branco translúcido de propósito: clareia o teal nos dois temas. */
.est-ld__brilho {
  transform: translateX(-14px);
  animation: est-ld-brilho var(--ld-ciclo) ease-in-out infinite;
}

.est-ld__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@keyframes est-ld-entrar {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 0-36%: desenha da cauda até a ponta · 36-58%: logo completa ·
   58-92%: a cauda recolhe atrás da ponta · 92-100%: pausa. */
@keyframes est-ld-trilha {
  0%        { stroke-dashoffset: 100;  animation-timing-function: cubic-bezier(.55, .05, .25, 1); }
  36%, 58%  { stroke-dashoffset: 0;    animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  92%, 100% { stroke-dashoffset: -100; }
}

@keyframes est-ld-letra {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes est-ld-slogan {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@keyframes est-ld-brilho {
  0%, 38%   { transform: translateX(-14px); }
  72%, 100% { transform: translateX(215px); }
}

/* Sem movimento: logo inteira, só uma pulsação de opacidade. */
@media (prefers-reduced-motion: reduce) {
  .loading_overlay,
  .est-ld__trilha,
  .est-ld__letra,
  .est-ld__slogan,
  .est-ld__brilho { animation: none; }

  .est-ld__trilha { stroke-dashoffset: 0; }
  .est-ld__letra,
  .est-ld__slogan { opacity: 1; }
  .est-ld__brilho { display: none; }
  .est-ld { animation: est-ld-pulso 1.6s ease-in-out infinite alternate; }
}

@keyframes est-ld-pulso {
  from { opacity: 1; }
  to   { opacity: .55; }
}