/* ================================================================
   PROGRESSO.CSS
   As barrinhas finas no topo da tela que mostram em qual etapa do
   formulário a pessoa está. Depende de --line e --acid, definidas
   em base.css.

   Como funciona na prática: pra cada etapa do formulário (definida
   no array STEPS, dentro de js/jornada.js), o JavaScript cria UMA
   div.progress-dot aqui dentro. Ou seja: se você adicionar ou remover
   uma etapa no STEPS, o número de barrinhas muda sozinho — não é algo
   fixo no HTML.
   ================================================================ */

.progress-wrap{
  display:flex;width:100%;max-width:650px;margin:0 auto;
  gap:4px;padding:2px var(--gut) 0;height:3px;
  /* flex sem wrap: todas as barrinhas ficam numa fileira só, cada
     uma espremendo ou esticando pra caber (ver .progress-dot abaixo) */
}
.progress-dot{
  flex:1; /* cada barrinha ocupa espaço IGUAL às outras, não importa quantas existam */
  background:var(--line);border-radius:2px;overflow:hidden;position:relative;
  /* position:relative é necessário aqui porque o ::after (o preenchimento
     verde) é position:absolute — ele se posiciona relativo a ESTE elemento,
     não à tela inteira */
}
.progress-dot::after{
  /* ::after cria um elemento "fantasma" dentro de cada barrinha — é
     esse elemento fantasma que aparece verde e preenchido, não a
     barrinha cinza de baixo (que fica sempre visível como "trilho") */
  content:"";position:absolute;inset:0;background:var(--acid);
  transform:scaleX(0);transform-origin:left;
  /* scaleX(0) = "achatado" horizontalmente até sumir. transform-origin:left
     garante que ele cresça a partir da ESQUERDA (senão cresceria a
     partir do centro, ficando estranho) */
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  /* anima a transição entre os estados abaixo — pra ajustar a velocidade
     do preenchimento, mexa nesse .45s */
}
.progress-dot.done::after{transform:scaleX(1);}
/* etapa já respondida e confirmada = barra cheia (escala 1 = tamanho normal) */
.progress-dot.active::after{transform:scaleX(1);opacity:0.55;}
/* etapa atual (ainda não confirmada) = barra cheia só que mais fraca,
   pra diferenciar visualmente de uma etapa já concluída */