/* ============================================================
   construcao.css · construcao de layout comandada pela rolagem
   Ocupa o lugar da foto de processo na pagina de servicos.

   A cena gruda na tela por cerca de tres alturas de janela e a
   construcao avanca com a rolagem: rolou, construiu; parou, parou;
   voltou, desmontou. Nao ha sequestro de rolagem, so `position:
   sticky` sobre um trilho alto: teclado, barra de rolagem e atalhos
   continuam funcionando, e a pagina nunca fica presa.

   Como o tempo e comandado por fora: toda animacao roda 100s (uma
   unidade por ponto porcentual), fica pausada, e o script empurra o
   quadro pelo atraso negativo `calc(var(--p) * -100s)`. Cada
   elemento carrega o proprio horario dentro das porcentagens, entao
   a cena inteira compartilha um relogio so e nao existe
   `animation-delay` de coreografia em lugar nenhum.

   `stroke-dashoffset` nao e transform nem opacity, e o CLAUDE.md pede
   motivo declarado: e a unica forma de desenhar um traco por etapas.
   As animacoes ficam pausadas o tempo todo, entao nao ha quadro
   sendo calculado fora do momento em que a pessoa rola.
   ============================================================ */

/* O trilho e a distancia de rolagem que a cena consome: a cena fica
   grudada por cerca de tres alturas e meia de janela. */
.construcao-trilho{position:relative;height:420svh}
@media (max-width:760px){.construcao-trilho{height:300svh}}
.construcao-fixa{
  position:sticky;top:0;
  min-height:100svh;
  display:flex;align-items:center;
}
.construcao{
  position:relative;width:100%;
  aspect-ratio:16 / 9;
}
.construcao svg{display:block;width:100%;height:100%}

.construcao .guia{stroke:var(--fio);stroke-width:2}
.construcao .traco{stroke:var(--tinta);stroke-width:3;fill:none;stroke-linecap:square}
.construcao .barra{fill:var(--tinta)}
.construcao .barra--fraca{fill:var(--fio-forte)}
.construcao .acento{stroke:var(--acento)}
.construcao .barra--acento{fill:var(--acento)}
.construcao .hachura{fill:url(#zamp-hachura);opacity:0}

/* Cada forma declara pathLength="100" no SVG, entao o comprimento e
   sempre 100 e o desenho nao depende da geometria de cada peca. */
.construcao .guia,.construcao .traco{
  stroke-dasharray:100;stroke-dashoffset:100;
}
/* fill-box ancora o crescimento na borda da propria peca. */
.construcao .barra{
  transform-box:fill-box;transform-origin:left center;
  transform:scaleX(0);
}

/* O quadro so anda quando `--p` anda, e `--p` vem da rolagem. */
.js .construcao svg *{
  animation-duration:100s;
  animation-iteration-count:1;
  animation-fill-mode:both;
  animation-play-state:paused;
  animation-delay:calc(var(--p, 0) * -100s);
}
@keyframes cria-g1{0%,2.0%{stroke-dashoffset:100}4.928%,100%{stroke-dashoffset:0}}
@keyframes cria-g2{0%,3.098%{stroke-dashoffset:100}5.843%,100%{stroke-dashoffset:0}}
@keyframes cria-g3{0%,4.013%{stroke-dashoffset:100}7.123%,100%{stroke-dashoffset:0}}
@keyframes cria-g4{0%,5.111%{stroke-dashoffset:100}7.672%,100%{stroke-dashoffset:0}}
@keyframes cria-h1{0%,11.149%{stroke-dashoffset:100}13.528%,100%{stroke-dashoffset:0}}
@keyframes cria-h2{0%,12.43%{stroke-dashoffset:100}15.174%,100%{stroke-dashoffset:0}}
@keyframes cria-cab{0%,16.638%{stroke-dashoffset:100}20.664%,100%{stroke-dashoffset:0}}
@keyframes cria-logo{0%,21.396%{transform:scaleX(0)}23.043%,100%{transform:scaleX(1)}}
@keyframes cria-nav1{0%,22.677%{transform:scaleX(0)}23.591%,100%{transform:scaleX(1)}}
@keyframes cria-nav2{0%,23.409%{transform:scaleX(0)}24.506%,100%{transform:scaleX(1)}}
@keyframes cria-nav3{0%,24.323%{transform:scaleX(0)}25.238%,100%{transform:scaleX(1)}}
@keyframes cria-t1{0%,27.617%{transform:scaleX(0)}30.728%,100%{transform:scaleX(1)}}
@keyframes cria-t2{0%,31.277%{transform:scaleX(0)}34.753%,100%{transform:scaleX(1)}}
@keyframes cria-t3{0%,35.119%{transform:scaleX(0)}37.681%,100%{transform:scaleX(1)}}
@keyframes cria-b1{0%,40.426%{transform:scaleX(0)}42.438%,100%{transform:scaleX(1)}}
@keyframes cria-b2{0%,42.804%{transform:scaleX(0)}44.451%,100%{transform:scaleX(1)}}
@keyframes cria-midia{0%,45.915%{stroke-dashoffset:100}51.77%,100%{stroke-dashoffset:0}}
@keyframes cria-hachura{0%,52.502%{opacity:0}59.089%,100%{opacity:1}}
@keyframes cria-c1{0%,60.553%{stroke-dashoffset:100}64.762%,100%{stroke-dashoffset:0}}
@keyframes cria-c2{0%,65.128%{stroke-dashoffset:100}68.97%,100%{stroke-dashoffset:0}}
@keyframes cria-c3{0%,69.336%{stroke-dashoffset:100}73.728%,100%{stroke-dashoffset:0}}
@keyframes cria-ci1{0%,75.191%{transform:scaleX(0)}77.021%,100%{transform:scaleX(1)}}
@keyframes cria-ci2{0%,76.472%{transform:scaleX(0)}78.119%,100%{transform:scaleX(1)}}
@keyframes cria-ci3{0%,77.57%{transform:scaleX(0)}79.583%,100%{transform:scaleX(1)}}
@keyframes cria-ci4{0%,77.204%{transform:scaleX(0)}78.851%,100%{transform:scaleX(1)}}
@keyframes cria-ci5{0%,78.485%{transform:scaleX(0)}80.315%,100%{transform:scaleX(1)}}
@keyframes cria-ci6{0%,79.583%{transform:scaleX(0)}81.23%,100%{transform:scaleX(1)}}
@keyframes cria-rod{0%,84.34%{stroke-dashoffset:100}88.183%,100%{stroke-dashoffset:0}}

.js .construcao #g1{animation-name:cria-g1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #g2{animation-name:cria-g2;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #g3{animation-name:cria-g3;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #g4{animation-name:cria-g4;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #h1{animation-name:cria-h1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #h2{animation-name:cria-h2;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #cab{animation-name:cria-cab;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #logo{animation-name:cria-logo;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #nav1{animation-name:cria-nav1;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #nav2{animation-name:cria-nav2;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #nav3{animation-name:cria-nav3;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #t1{animation-name:cria-t1;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #t2{animation-name:cria-t2;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #t3{animation-name:cria-t3;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #b1{animation-name:cria-b1;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #b2{animation-name:cria-b2;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #midia{animation-name:cria-midia;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #hachura{animation-name:cria-hachura;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #c1{animation-name:cria-c1;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #c2{animation-name:cria-c2;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #c3{animation-name:cria-c3;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #ci1{animation-name:cria-ci1;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #ci2{animation-name:cria-ci2;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #ci3{animation-name:cria-ci3;animation-timing-function:cubic-bezier(.4,.05,.2,1)}
.js .construcao #ci4{animation-name:cria-ci4;animation-timing-function:cubic-bezier(.22,1,.36,1)}
.js .construcao #ci5{animation-name:cria-ci5;animation-timing-function:cubic-bezier(.32,.72,0,1)}
.js .construcao #ci6{animation-name:cria-ci6;animation-timing-function:cubic-bezier(.16,.9,.28,1)}
.js .construcao #rod{animation-name:cria-rod;animation-timing-function:cubic-bezier(.4,.05,.2,1)}

/* Sem JavaScript, e com movimento reduzido, a cena aparece montada e
   parada, no fluxo normal da pagina: nada gruda e nada se move. */
html:not(.js) .construcao-trilho,
.construcao-trilho[data-parada]{height:auto}
html:not(.js) .construcao-fixa,
.construcao-trilho[data-parada] .construcao-fixa{position:static;min-height:0}
html:not(.js) .construcao .guia,
html:not(.js) .construcao .traco,
.construcao-trilho[data-parada] .guia,
.construcao-trilho[data-parada] .traco{stroke-dashoffset:0}
html:not(.js) .construcao .barra,
.construcao-trilho[data-parada] .barra{transform:scaleX(1)}
html:not(.js) .construcao .hachura,
.construcao-trilho[data-parada] .hachura{opacity:1}
.construcao-trilho[data-parada] svg *{animation:none !important}

@media (prefers-reduced-motion: reduce){
  .construcao-trilho{height:auto}
  .construcao-fixa{position:static;min-height:0}
  .construcao svg *{animation:none !important}
  .construcao .guia,.construcao .traco{stroke-dashoffset:0}
  .construcao .barra{transform:scaleX(1)}
  .construcao .hachura{opacity:1}
}