/* ==================================================================
   04 · COMO TRABALHAMOS  (widget fp-processo)

   Copiado do lab (lab/home/secoes/processo/processo.css). A partir daqui,
   este arquivo e o que vale. Diferencas em relacao ao lab: o numero de
   etapas e --n, e a largura do verbo mais longo, em em, e --verbo-em
   (processo.js mede; nunca abaixo de 6.4, a de "Desenvolver"). Com as
   quatro etapas do documento, as medidas sao as mesmas.

   Petrol. Titulo em duas vozes: "Como trabalhamos" cheio e a abertura em
   contorno, no mesmo tamanho. As etapas lado a lado, paradas, sobre
   uma linha que atravessa as quatro e segue ate sair pela borda direita:
   o processo nao termina em Evoluir.

   Com movimento, um preenchimento laranja percorre a linha conforme a
   rolagem e cada etapa acende quando ele chega a marca dela. Sem JS ou com
   movimento reduzido, tudo aparece aceso e a linha inteira preenchida.
   ================================================================== */

.processo{
  position:relative;
  overflow-x:clip;
  background:var(--petrol);
  color:var(--paper);
  padding-block:clamp(6rem,15vh,11rem);
}

/* ---- titulo em duas vozes ---------------------------------------- */

.processo__h2,.processo__abertura{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5.5rem);
  line-height:.98;
  text-wrap:balance;
}
.processo__h2{letter-spacing:-.04em;color:var(--paper)}
/* Contorno com o miolo na cor do fundo, como no marquee: cobre as linhas
   internas da Outfit. Tracking menos fechado que o do titulo cheio: com
   -.04em uma letra invadia a vizinha e o miolo cortava o traco dela. */
.processo__abertura{
  --traco:clamp(1.25px,.1vw,2px);
  letter-spacing:-.015em;
  -webkit-text-fill-color:var(--petrol);
  -webkit-text-stroke:calc(2 * var(--traco)) rgba(251,251,250,.72);
  paint-order:stroke fill;
}

/* Texto de abertura (campo opcional; a home nao usa): corpo de texto
   abaixo das duas vozes do titulo, como a abertura das outras secoes. */
.processo__texto{
  margin-top:clamp(1.5rem,3.6vh,2.5rem);
  max-width:48ch;
  font-size:var(--t-lead);
  line-height:1.5;
  color:var(--fg-2);
  text-wrap:pretty;
}

/* ---- etapas e linha ----------------------------------------------- */

.processo__etapas{
  --gap:clamp(1.5rem,3vw,3.5rem);
  /* Da borda da caixa ate a borda da tela. */
  --sangria:calc(var(--margem) + max(0px, (100vw - var(--max)) / 2));
  --progresso:1;
  --n:4;
  --verbo-em:6.4;
  position:relative;
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(var(--n),minmax(0,1fr));
  column-gap:var(--gap);
  margin-top:clamp(4rem,11vh,8rem);
}

/* Trilho (::before) e preenchimento (::after): da primeira marca ate a
   borda direita da tela, esmaecendo no fim. */
.processo__etapas::before,
.processo__etapas::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:calc(-1 * var(--sangria));
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--sangria) - 8rem),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - var(--sangria) - 8rem),transparent);
}
.processo__etapas::before{height:1px;background:rgba(251,251,250,.24)}
.processo__etapas::after{
  top:-.5px;
  height:2px;
  background:var(--orange);
  transform:scaleX(var(--progresso));
  transform-origin:left;
}

.etapa{
  position:relative;
  padding-top:clamp(2rem,4.5vh,3rem);
}
.etapa__marca{
  position:absolute;
  z-index:1;
  top:-4px;
  left:0;
  width:9px;
  height:9px;
  background:var(--orange);
  transition:background-color .35s var(--ease-out),box-shadow .35s var(--ease-out);
}
.etapa__num{
  display:block;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:var(--t-mono);
  letter-spacing:.14em;
  color:var(--orange);
  transition:color .5s var(--ease-out);
}
.etapa__verbo{
  display:block;
  margin-top:clamp(.75rem,1.8vh,1.25rem);
  font-family:var(--font-display);
  font-weight:900;
  /* Limitado pela coluna: "Desenvolver" mede cerca de 6.4em em peso 900. */
  font-size:min(clamp(2rem,3.6vw,4.25rem), (100cqw - (var(--n) - 1) * var(--gap)) / var(--n) / var(--verbo-em));
  line-height:.95;
  letter-spacing:-.04em;
  color:var(--paper);
  transition:color .5s var(--ease-out);
}
.etapa__desc{
  margin-top:clamp(1rem,2.4vh,1.5rem);
  max-width:32ch;
  font-size:var(--t-body);
  line-height:1.6;
  color:rgba(251,251,250,.74);
  text-wrap:pretty;
  transition:color .5s var(--ease-out);
}

/* Estado apagado: so existe quando o movimento esta ligado (.anima). */
.processo.anima .etapa__marca{background:var(--petrol);box-shadow:inset 0 0 0 1px rgba(251,251,250,.5)}
.processo.anima .etapa:not(.is-acesa) .etapa__num{color:rgba(251,251,250,.4)}
.processo.anima .etapa:not(.is-acesa) .etapa__verbo{color:rgba(251,251,250,.26)}
.processo.anima .etapa:not(.is-acesa) .etapa__desc{color:rgba(251,251,250,.26)}
.processo.anima .etapa.is-acesa .etapa__marca{background:var(--orange);box-shadow:none}

/* ------------------------------------------------------------------
   Abaixo de 1100px: linha vertical a esquerda, etapas empilhadas; a linha
   continua abaixo de Evoluir ate esmaecer.
   ------------------------------------------------------------------ */

@media (max-width:1099.98px){
  .processo{padding-block:clamp(4.5rem,14vw,7rem) clamp(3rem,10vw,5rem)}
  .processo__h2,.processo__abertura{font-size:clamp(2.25rem,9.5vw,4rem)}

  .processo__etapas{
    --pl:clamp(1.75rem,7vw,2.5rem);
    --sangria-v:clamp(4rem,14vw,6rem);
    grid-template-columns:minmax(0,1fr);
    row-gap:clamp(2.5rem,9vw,3.5rem);
    padding-left:var(--pl);
    margin-top:clamp(3rem,11vw,4.5rem);
    padding-bottom:var(--sangria-v);
  }
  .processo__etapas::before,
  .processo__etapas::after{
    top:0;
    bottom:0;
    right:auto;
    left:0;
    width:1px;
    height:auto;
    -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - var(--sangria-v)),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - var(--sangria-v)),transparent);
  }
  .processo__etapas::after{
    top:0;
    left:-.5px;
    width:2px;
    transform:scaleY(var(--progresso));
    transform-origin:top;
  }
  .etapa{padding-top:0}
  .etapa__marca{top:.2rem;left:calc(-1 * var(--pl) - 4px)}
  /* O limite pela largura so age com um verbo mais longo que os do
     documento: com eles, 11vw e sempre menor. */
  .etapa__verbo{font-size:min(clamp(2.25rem,11vw,3.5rem), 100cqw / var(--verbo-em))}
}