/* Seção Processo: as fases acendem em sequência. A fase k acende em k × --passo
   e o pontilhado até a próxima anda logo depois. O estado final é o estilo base;
   as animações (fill "both") cuidam do estado inicial. */

#processo { --passo: 1.6s; }
#processo:not(.rodando) :is(.fase, .imersao) { visibility: hidden; }

@keyframes subir { from { opacity: 0; transform: translateY(12px); } }
@keyframes desenhar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes desenhar-v { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

.fases { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 20px; margin: 0; padding: 0; list-style: none; }
.fase { position: relative; padding-top: 40px; }
.fase .no { position: absolute; top: 2px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--branco); }
.fase .trilho { position: absolute; top: 9px; left: 24px; width: calc(100% - 12px); height: 10px; color: #6b6869; }
.fase .trilho::before { content: ""; position: absolute; left: 0; right: 8px; top: 0; border-top: 2px dotted currentColor; }
.fase .trilho::after { content: ""; position: absolute; right: 0; top: -3px; border: 4px solid transparent; border-left: 6px solid currentColor; border-right: 0; }
.fase .rotulo-fase { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza-medio); }
.fase h3 { margin: 8px 0; font-size: 22px; font-weight: 700; }
.fase p { margin: 0; font-size: 15px; line-height: 1.45; font-weight: 200; color: #d0d0d0; }
.rodando .fase .no { animation: acender .7s ease-out calc(var(--k) * var(--passo)) both; }
@keyframes acender { 0% { transform: scale(0); background: var(--fundo-escuro); box-shadow: inset 0 0 0 1.5px var(--branco); } 55% { transform: scale(1.6); background: var(--branco); box-shadow: 0 0 0 10px rgb(253 254 254 / .18); } 100% { box-shadow: 0 0 0 0 rgb(253 254 254 / 0); } }
.rodando .fase :is(.rotulo-fase, h3, p) { animation: subir .6s ease-out calc(var(--k) * var(--passo) + .3s) both; }
.rodando .fase .trilho { animation: desenhar .8s ease-in-out calc(var(--k) * var(--passo) + .8s) both; }

.imersao { display: flex; align-items: center; gap: 16px; margin-top: clamp(48px, 6vw, 72px); font-size: 13px; color: var(--cinza-medio); }
.imersao .barra { flex: 1; height: 6px; border-radius: 999px; background: linear-gradient(to right, rgb(253 254 254 / .25), rgb(253 254 254 / .5), var(--branco)); transform-origin: left; }
.rodando .imersao { animation: subir .5s ease-out calc(4 * var(--passo) + .6s) both; }
.rodando .imersao .barra { animation: encher 1.4s cubic-bezier(.5, 0, .2, 1) calc(4 * var(--passo) + .9s) both; }
@keyframes encher { from { transform: scaleX(0); } }

/* Edifício isométrico num canteiro de obras: a etapa k acontece junto com a fase k.
   A obra (betoneira, cones, grua) entra na fundação e sai no acabamento, quando chegam piscina e árvores. */
.processo-topo { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: clamp(40px, 5vw, 64px); }
.processo-topo .cab { margin: 0; }
/* Título sempre em duas linhas: cada metade não quebra, e o corpo da fonte acompanha a largura da coluna. */
.duas-linhas span { display: block; white-space: nowrap; }
.processo-topo .cab h2.duas-linhas { font-size: clamp(28px, 3.5vw, 52px); }
.edificio { display: block; width: 100%; height: auto; max-height: 520px; overflow: visible; }
/* Só o que anima com escala usa a própria caixa como referência; os desenhos com rotate()/scale() no SVG ficam intactos. */
.edificio :is(.obra, .arvore, .grua-g, .cabo, .mobilia) { transform-box: fill-box; }
.edificio .grade { stroke: #1e1b1d; stroke-width: 1; }
.edificio .traco { stroke: #949494; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; fill: none; }
.edificio .traco.secundario { stroke: #6b6869; }
.edificio .cota { stroke: #6b6869; stroke-width: 1; }
.edificio .face-topo { fill: #FDFEFE; } .edificio .face-esq { fill: #B8B8B8; } .edificio .face-dir { fill: #7a7779; }
.edificio .base.face-topo { fill: #3a3638; } .edificio .base.face-esq { fill: #2b2729; } .edificio .base.face-dir { fill: #201d1f; }
.edificio .maquinas.face-topo { fill: #d0d0d0; }
.edificio :is(.contrapeso, .cabine).face-topo { fill: #949494; } .edificio :is(.contrapeso, .cabine).face-esq { fill: #6b6869; } .edificio :is(.contrapeso, .cabine).face-dir { fill: #4a4648; }
.edificio .estrutura { stroke: #FDFEFE; stroke-width: 1.2; stroke-linecap: round; }
.edificio .vidro { fill: #17151a; }
.edificio .montante { stroke: #3a3638; stroke-width: 1; }
.edificio .brise { stroke: #FDFEFE; stroke-width: 1.4; }
.edificio .luz { fill: #FDFEFE; opacity: var(--o); }
.edificio .ferro { stroke: #949494; stroke-width: 2; stroke-linecap: round; }
.edificio .sombra { fill: #000; opacity: .35; }
.edificio .ferro.fino { stroke-width: 1.5; }
.edificio .motor-topo { fill: #949494; } .edificio .motor-esq { fill: #6b6869; } .edificio .motor-dir { fill: #4a4648; }
.edificio .pneu { fill: #231F20; stroke: #6b6869; stroke-width: 1.2; } .edificio .cubo { fill: #949494; }
.edificio .tambor { fill: #B8B8B8; } .edificio .tambor-sombra { fill: #8a8789; }
.edificio .cinta-giro { fill: none; stroke: #6b6869; stroke-width: 2.4; stroke-dasharray: 5 6; }
.edificio .coroa { fill: none; stroke: #4a4648; stroke-width: 2; stroke-dasharray: 1.5 1.5; }
.edificio .boca { fill: #231F20; }
.edificio .volante { fill: none; stroke: #d0d0d0; stroke-width: 1.4; }
.edificio .cone { fill: #FDFEFE; } .edificio .cone-faixa { fill: #3a3638; } .edificio .cone-base { fill: #949494; }
.edificio .grua { stroke: #d0d0d0; stroke-width: 1.6; stroke-linecap: round; }
.edificio .grua.fina { stroke: #6b6869; stroke-width: .8; }
.edificio .cabo { stroke: #949494; stroke-width: 1; transform-origin: 50% 0; }
.edificio .peso { fill: #d0d0d0; } .edificio .carga { fill: #949494; }
.edificio .deck { fill: #3a3638; } .edificio .tabua { stroke: #2b2729; stroke-width: 1; }
.edificio .borda { fill: #949494; }
.edificio .parede-piscina { fill: #4a4648; } .edificio .parede-piscina.lateral { fill: #3a3638; }
.edificio .agua { fill: #7a7779; opacity: .92; }
.edificio .leito.face-topo { fill: #FDFEFE; } .edificio .leito.face-esq { fill: #B8B8B8; } .edificio .leito.face-dir { fill: #7a7779; }
.edificio .encosto { fill: #e8e8e8; } .edificio .costura { stroke: #B8B8B8; stroke-width: .8; }
.edificio .perna { stroke: #949494; stroke-width: 1.2; }
.edificio .mesinha.face-topo { fill: #d0d0d0; } .edificio .mesinha.face-esq { fill: #949494; } .edificio .mesinha.face-dir { fill: #6b6869; }
.edificio .haste { stroke: #B8B8B8; stroke-width: 1.6; }
.edificio .gomo { fill: #FDFEFE; stroke: #B8B8B8; stroke-width: .6; } .edificio .gomo.escuro { fill: #d0d0d0; }
.edificio .onda { stroke: #FDFEFE; stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 10 14; opacity: .7; }
.edificio .tronco { stroke: #7a7779; stroke-width: 2.5; stroke-linecap: round; }
.edificio .copa-escura { fill: #6b6869; } .edificio .copa { fill: #949494; } .edificio .copa-luz { fill: #d0d0d0; }
.edificio .veio { fill: none; stroke: #d0d0d0; stroke-width: 1; opacity: .6; }
.edificio .estipe { fill: none; stroke: #7a7779; stroke-width: 3; stroke-linecap: round; }
.edificio .folha { fill: #949494; } .edificio .folha-luz { fill: #d0d0d0; }

#processo:not(.rodando) .edificio .etapa { visibility: hidden; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes sumir { to { opacity: 0; transform: scale(.6); } }
@keyframes brotar-baixo { from { opacity: 0; transform: scale(0); } }

/* Fase 0: terreno vazio. A grade aparece e as plantas se desenham; depois o blueprint recua. */
.rodando .edificio .e0 .grade { animation: aparecer .8s ease-out 0s both; }
.rodando .edificio .e0 .traco { animation: tracar-linha .7s ease-in-out calc(.2s + var(--t)) both; }
.rodando .edificio .e0 .cota { animation: aparecer .5s ease-out 1.1s both; }
.rodando .edificio .e0 { animation: recuar .8s ease calc(var(--passo) + .6s) forwards; }
@keyframes tracar-linha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes recuar { to { opacity: .5; } }

/* Fase 1: a fundação sobe; a betoneira chega girando e os cones marcam o canteiro. */
.rodando .edificio .e1 > :is(.face-topo, .face-esq, .face-dir) { animation: subir-laje .9s cubic-bezier(.2, .8, .2, 1) var(--passo) both; }
@keyframes subir-laje { from { opacity: 0; transform: translateY(16px); } }
.edificio .obra { transform-origin: 50% 100%; }
.rodando .edificio .e1 .obra { animation: brotar-baixo .6s cubic-bezier(.2, .9, .3, 1.3) calc(var(--passo) + .35s) both, sumir .6s ease-in calc(4 * var(--passo)) forwards; }
.rodando .edificio .cinta-giro { animation: girar .8s linear infinite; }
@keyframes girar { to { stroke-dashoffset: -11; } }

/* Fases 2 e 3: estrutura e volumes crescem de baixo para cima; a grua sobe junto e o gancho trabalha. */
.rodando .edificio :is(.e2, .e3) { animation: erguer 1.2s cubic-bezier(.4, 0, .2, 1) calc(var(--k) * var(--passo)) both; }
@keyframes erguer { from { clip-path: inset(100% -20% 0 -20%); } to { clip-path: inset(-20% -20% 0 -20%); } }
.edificio .grua-g { transform-origin: 50% 100%; }
.rodando .edificio .grua-g { animation: sumir .7s ease-in calc(4 * var(--passo)) forwards; }
.rodando .edificio .gancho { animation: icar 2.4s ease-in-out calc(2 * var(--passo) + 1s) infinite alternate; }
.rodando .edificio .cabo { animation: esticar 2.4s ease-in-out calc(2 * var(--passo) + 1s) infinite alternate; }
@keyframes icar { to { transform: translateY(var(--curso)); } }
@keyframes esticar { to { transform: scaleY(var(--escala)); } }

/* Fase 4: o topo pousa, as luzes acendem pano a pano, e o jardim chega quando a obra vai embora. */
.rodando .edificio .e4 > :is(.face-topo, .face-esq, .face-dir, .vidro, .montante, .brise):not(.pilar) { animation: pousar .8s cubic-bezier(.3, 1.3, .5, 1) calc(4 * var(--passo)) both; }
@keyframes pousar { from { opacity: 0; transform: translateY(-24px); } }
.rodando .edificio .e4 > .pilar { animation: aparecer .01s linear calc(4 * var(--passo)) both; }
.rodando .edificio .e4 .luz { animation: acender-luz .6s ease-out calc(4 * var(--passo) + .9s + var(--t)) both; }
@keyframes acender-luz { from { opacity: 0; } }
.rodando .edificio .e4 .paisagem { animation: aparecer .8s ease-out calc(4 * var(--passo) + .7s) both; }
.rodando .edificio .e4 .onda { animation: aparecer .8s ease-out calc(4 * var(--passo) + .9s + var(--t)) both, ondular 2.6s linear calc(4 * var(--passo) + .9s) infinite; }
@keyframes ondular { to { stroke-dashoffset: -48; } }
.edificio .arvore { transform-origin: 50% 100%; }
.rodando .edificio .e4 .mobilia { animation: pousar-mobilia .7s cubic-bezier(.3, 1.3, .5, 1) calc(4 * var(--passo) + 1.1s) both; }
@keyframes pousar-mobilia { from { opacity: 0; transform: translateY(-10px); } }
.rodando .edificio .e4 .arvore { animation: brotar-baixo .9s cubic-bezier(.2, .9, .3, 1.25) calc(4 * var(--passo) + var(--t)) both; }

/* Telas estreitas: fases em coluna, e o pontilhado desce em vez de ir para o lado. */
@media (max-width: 1024px) {
  /* A régua ocupa a linha inteira; os rótulos ficam nas pontas, acima dela. */
  .imersao { flex-wrap: wrap; justify-content: space-between; row-gap: 10px; }
  .imersao .barra { order: 3; flex-basis: 100%; }
  .processo-topo { grid-template-columns: 1fr; }
  .edificio { max-width: 640px; margin: 0 auto; }
  .fases { grid-template-columns: 1fr; gap: 28px; }
  .fase { padding: 0 0 0 40px; }
  .fase .no { top: 4px; }
  .fase .trilho { top: 26px; left: 3px; width: 10px; height: calc(100% + 2px); }
  .fase .trilho::before { top: 0; bottom: 8px; left: 4px; right: auto; border-top: 0; border-left: 2px dotted currentColor; }
  .fase .trilho::after { top: auto; bottom: 0; right: auto; left: 1px; border: 4px solid transparent; border-top: 6px solid currentColor; border-bottom: 0; }
  .rodando .fase .trilho { animation-name: desenhar-v; }
}

@media (prefers-reduced-motion: reduce) {
  #processo *, #processo *::before, #processo *::after { animation: none !important; }
}