/* ==========================================================================
   PROGRESSO DE LEITURA — prog-
   Filete no topo da janela que cresce conforme a pagina desce.
   Requer core/tokens.css. O script escreve --prog-k (0 a 1) no proprio nó.
   ========================================================================== */

.prog-rail{
  position:fixed;
  inset-block-start:var(--prog-top, 0px);
  inset-inline:0;
  height:var(--prog-h, 3px);
  /* Acima do menu fixo, que para no 100. Um indicador que some atras do
     header nao indica nada. */
  z-index:var(--prog-z, 120);
  background:var(--rule);
  /* Nunca rouba clique: e' uma faixa da largura da tela colada no topo,
     bem onde mora o primeiro item de menu de muito site. */
  pointer-events:none;
  /* Sem isto o filete some quando a primeira secao e' clara: --rule e
     --accent sao tokens de ESCOPO DE TOM, e o :root serve o escuro. Ancorar
     ao escopo do topo da pagina e' decisao do consumidor -- ver a variacao
     "sobre secao clara" na ficha. */
  isolation:isolate;
}

.prog-fill{
  display:block;
  height:100%;
  width:100%;
  background:var(--accent);
  /* scaleX, nao width: transform e opacidade sao as duas unicas propriedades
     que o navegador anima sem refazer layout. Com width, cada quadro de
     rolagem remontaria a caixa -- em pagina longa isso aparece como filete
     tremido no celular. */
  transform:scaleX(var(--prog-k, 0));
  transform-origin:0 50%;
  /* Suavizacao curta: o scroll ja' chega em passos, e sem isto o filete
     "pula" a cada entalhe de roda de mouse. 90ms e' o teto do que se
     percebe como resposta imediata. */
  transition:transform 90ms linear;
}

/* Pagina que nao rola nao tem progresso a mostrar. O script marca isto
   quando scrollHeight nao passa da altura da janela -- ver o gotcha da
   divisao por zero na ficha. */
.prog-rail[hidden]{display:none}

@media (prefers-reduced-motion: reduce){
  /* A POSICAO continua sendo informada: ela e' dado, nao enfeite. O que sai
     e' so' a suavizacao entre um valor e o seguinte. */
  .prog-fill{transition:none}
}