do mundo, os
outros elementos da cena são . Era nth-child(4..8) e quebrou no dia
em que a faixa central virou duas faixas de borda, porque a contagem de
irmãos andou um. Contando só entre , nenhum plano novo na cena volta
a deslocar os postes. */
.cena__poste:nth-of-type(1){--z:-900px}
.cena__poste:nth-of-type(2){--z:-1250px}
.cena__poste:nth-of-type(3){--z:-1700px}
.cena__poste:nth-of-type(4){--z:-2300px}
.cena__poste:nth-of-type(5){--z:-3100px}
/* --- NÉVOA ---------------------------------------------------------------
A cor do PÉ DO CÉU, nunca uma cor própria. Foi assim que a linha dura do
horizonte morreu no desktop (achado do CONTRAIA registrado no
hero-3d.js), e aqui ela já nasce com a correção. É ela que come o fim
do plano da pista, a base dos morros e a base dos postes distantes. */
.cena__nevoa{
position:absolute;left:0;right:0;
top:calc(var(--horizonte,38%) - 15%);
height:36%;
/* Aberta e amaciada: concentrada demais ela virava uma TARJA dourada
horizontal atravessando a tela, que é exatamente o tipo de faixa reta
que denuncia máquina. Espalhada, ela vira bruma.
O PICO SUBIU DE .60 PARA .88 EM 2026-08-02, e o motivo é o oposto do
que parece. Com a faixa 25% maior a cena virou a metade de baixo da
primeira tela, e apareceu uma linha reta clara atravessando o quadro
exatamente no horizonte: ali o pé do céu (#f0bd6a, a cor mais clara
da paleta) encosta direto na terra (#3a3628, quase a mais escura), e
.60 de bruma não dava conta de dissolver um degrau desse tamanho.
A bruma é da MESMA cor do pé do céu: levá-la a .88 no ponto exato do
horizonte faz os dois lados da emenda virarem a mesma cor, e a linha
deixa de existir em vez de ser disfarçada. O pico fica em 42% da
altura desta camada, que é onde o horizonte cai (ela começa 15% acima
dele e tem 36% de altura). As saias continuam longas nos dois lados,
que é o que mantém a leitura de bruma e não de tarja. */
background:linear-gradient(to bottom,
rgba(240,189,106,0) 0%,
rgba(240,189,106,.26) 22%,
rgba(240,189,106,.88) 42%,
rgba(240,189,106,.48) 58%,
rgba(240,189,106,.22) 76%,
rgba(240,189,106,0) 100%);
}
/* --- O FIM DE TARDE ------------------------------------------------------
No desktop três coisas são interpoladas em paralelo (céu alto, céu baixo
e névoa). Aqui uma camada só faz o serviço das três, porque ela é ela
mesma um degradê: azula o alto (#18313c), esquenta e escurece a linha do
sol (#d98f52 puxado pra baixo) e fecha o chão. Uma camada de opacidade é
a coisa mais barata que existe pra compor, e é a única propriedade que
muda aqui além dos transforms. */
.cena__noite{
position:absolute;inset:0;
background:linear-gradient(to bottom,
rgba(24,49,60,.95) 0%,
rgba(26,52,58,.74) 26%,
rgba(151,79,38,.30) 40%,
rgba(120,60,28,.34) 52%,
rgba(14,26,24,.66) 100%);
/* reserva 0 sem script: a viagem começa de dia, como no desktop */
opacity:calc(var(--vprog,0) * .82);
}
}
}
/* fim da cena. Daqui pra baixo fica o caminhão, que NÃO depende de
perspectiva nenhuma e por isso mora fora do @supports: se um navegador não
tiver 3D, ele perde a estrada e continua com a foto e o caminhão chegando
por cima dela, que é um hero honesto. */
@media (prefers-reduced-motion:no-preference){
/* --- A PLACA DE TEXTO SAIU DA FAIXA (2026-08-02, pedido do Alê) ----------
O Alê: "texto ainda fica em cima da rolagem do caminhão". Medido nesta
bancada a 402x753, em passos de rolagem: era literal. A placa
(.etapa--fecho: rótulo, título e sub, 156px de altura, largura inteira)
morava ancorada no PÉ da mesma faixa em que o caminhão cresce, e o
caminhão chega com 82% da altura da faixa. Da metade da viagem em diante
as três linhas ficavam impressas na cabine:
scrollY 240 · caminhão x114-206 y157-271 · título y244-300
scrollY 320 · caminhão x93-213 y64-213 · rótulo y134-153 (dentro)
scrollY 414 · caminhão x67-221 y-45-144 · título y67-123 (dentro)
Não é ajuste de número: os dois não cabem. Numa tela de 402px não existe
a saída do desktop (texto na coluna esquerda, caminhão na faixa da
direita, que foi como o Alê aceitou o mesmo problema lá).
Então a faixa voltou a ser só cena. E o motivo que pôs o texto ali
ENVELHECEU: ele foi escrito quando a faixa era "a faixa da foto, que era
decoração sem argumento". Desde que a estrada e o caminhão entraram, a
faixa é o argumento da página, e o texto que competia com ela é o mesmo
que a seção seguinte (#naos, "Três cobranças que aqui não existem") diz
inteiro, com espaço, dois dedos abaixo. Perdeu-se repetição, não conteúdo.
Com a placa saíram o lastro (.hero__etapas::after) e os dois progressos
derivados (--p-lastro e --p-placa), que só existiam para ela. O escurecer
do fim de tarde sobre o caminhão, que era efeito colateral do lastro e é
o que impedia o desenho de parecer colado, não se perdeu: virou uma
camada própria, logo abaixo, com a MESMA cor e a MESMA conta da cena.
A placa continua no HTML e continua viva no desktop (hero-3d.css). Aqui
ela volta ao display:none da folha base, sem regra nenhuma. */
/* --- O CAMINHÃO ----------------------------------------------------------
O MESMO caminhão que cresce na cena 3D do desktop, agora também aqui.
Revoga a decisão de 31/07 ("zero imagem nova no celular"): o Alê viu a
viagem funcionando e disse que o que ele esperava era ver ESTE caminhão
chegar, não um zoom na foto de fundo. Ele aceitou o peso.
Nasce pequeno no ponto de fuga da estrada, na pista da esquerda, do
tamanho de um caminhão a alguns quilômetros: com o farol aceso contra o
pôr do sol ele lê como trânsito real, não como adesivo. Chega grande e de
frente, com o motorista visível. Só escala e posição mudam, nunca a arte.
Ele cresce COM O DEDO, que era o pedido literal do Alê: os dois estados
são os extremos de uma interpolação em calc() sobre --vprog, como todo o
resto. Ganho lateral no WebKit: transform mudado por estilo a cada quadro
é re-rasterizado no tamanho do quadro, enquanto uma transition longa de
scale tende a rasterizar no tamanho de partida e esticar depois, que é
borrão garantido.
A PILHA (z-index 2): cena e foto em 0, véu em 1, caminhão em 2. Abaixo do
véu ele sumiria, porque o véu chega a verde quase sólido no topo da faixa.
Empilhamento positivo e explícito, como manda a armadilha documentada no
HANDOFF. Nada de z-index negativo. O 3 era da placa e ficou vago quando
ela saiu da faixa, em 2026-08-02.
A máscara dissolve o topo do baú, que inteiro é um retângulo laranja
chapado e denuncia recorte. Sem máscara, caminhão inteiro: mais duro,
nunca quebrado. */
.hero .hero__caminhao{
--faixa:var(--faixa-hero); /* o token do .hero, nunca um gêmeo */
display:block; /* acende o que style.css desligou */
position:absolute;left:0;right:0;bottom:0;z-index:2;
height:var(--faixa);
overflow:hidden; /* trava o caminhão dentro da faixa */
pointer-events:none;
}
/* --- A MÃO DE DIREÇÃO (2026-08-03, pedido do Alê) ------------------------
"O caminhão ficou do lado direito da pista, isso eles vão falar."
No Brasil se anda pela direita. A arte é FRONTAL, ou seja o caminhão vem
no sentido contrário, ou seja ele está na contramão de quem olha, ou seja
na pista da ESQUERDA. Não é escolha de composição: é a única posição que
não é erro.
O que estava aqui antes NÃO era o espelho do desktop. Medido nesta
bancada a 402x753: o eixo do caminhão chegava a 33,3% da tela, que é à
esquerda da faixa central (a faixa central cai sempre em 50%, porque ela
está no eixo da perspectiva). Só que ele chegava com 240px de largura numa
tela de 402, então as RODAS iam até x=220 e a faixa tracejada passava por
baixo dele: o desenho ficava escanchado na divisória, que é o que um
caminhoneiro chama de estar na pista errada. O erro grosso estava no
desktop (lá o caminhão chegava inteiro à direita da faixa) e aqui estava a
versão ambígua do mesmo erro.
A CONTA DA CORREÇÃO, e por que ela mexe no tamanho
· faixa central: x = 201px (50% de 402), em qualquer profundidade
· rodas do caminhão: 71,8% da largura da caixa (medido no alpha da arte)
· para as rodas ficarem à esquerda de 201 SEM cortar a caixa na borda
esquerda, precisa valer 120,2·s ≤ eixo ≤ 201 − 86,3·s, e isso só fecha
com s ≤ 0,973. Por isso a altura caiu de .82 para .72 da faixa: não é
gosto, é a única forma de o caminhão caber inteiro do lado dele.
Resultado a 402x753: caixa de 5 a 216px (nada cortado), RODAS de 35 a
186px, faixa central livre em 201. O caminhão perde 12% de altura (297px
para 261px, 72% da faixa) e continua sendo o maior objeto da tela. */
.hero__caminhao::before{
content:'';position:absolute;
/* largura e altura saem as duas da MESMA faixa, então a proporção
810x1000 da arte vale em qualquer tela e o caminhão nunca achata */
height:calc(var(--faixa) * .72);
width:calc(var(--faixa) * .72 * .81);
/* eixo do caminhão NA CHEGADA. Com a translação fechando em -50% da
própria largura, o eixo cai exatamente aqui em qualquer tela: o número
é lido direto, sem depender da altura da faixa. */
left:27.5%;
bottom:7.5%; /* linha do chão na chegada */
background:url("../img/gerado/caminhao-frontal-520.webp") no-repeat 50% 100%/contain;
-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%);
mask-image:linear-gradient(to bottom,transparent 0,#000 30%);
transform-origin:50% 100%; /* cresce a partir das rodas */
/* ESTADO DE PARTIDA, e ele mora FORA do bloco .viagem de propósito: se o
script não chegar, o caminhão fica parado aqui, pequeno e no lugar
certo da estrada. Nunca gigante, nunca fora de quadro.
REAPONTADO EM 2026-08-02. Estes números vinham da FOTO, cujo ponto de
fuga ficava em outra altura: sobre a cena nova ele nascia 91px ABAIXO do
horizonte e grande demais. O lugar novo foi CALCULADO na perspectiva da
cena, não escolhido no olho: a base pousa 26px abaixo do horizonte, onde
a escala da cena é .146, e o caminhão do desktop tem 178px nas unidades
desta pista (178 x .146 = 26px de altura na tela = escala .11 da arte).
Os dois números saem da MESMA conta, então ele assenta na estrada em vez
de flutuar. 26px e não os 14px que a perspectiva pura pediria: abaixo
disso ele some na bruma e o Alê já reclamou de não enxergar o caminhão.
É a única licença poética da cena, e é consciente.
OS TRÊS NÚMEROS FORAM REESCRITOS EM 2026-08-03 SEM MUDAR UM PIXEL DESTE
QUADRO. Como a caixa encolheu (.82 → .72 da faixa), a escala de partida
subiu de .11 para .125 e a translação vertical de 55,4% para 63,1% da
nova altura: as duas contas devolvem os MESMOS 32,6px de caminhão
pousados 33px abaixo do horizonte. O que mudou foi só onde ele chega.
A translação horizontal virou `-50% + 18,8vw`: -50% é o eixo pousando
exatamente no `left`, e os 18,8vw são o desvio de partida, agora em
unidade de TELA e não de caixa, então o ponto de nascimento fica em
46,3% da largura em qualquer aparelho (antes ele derivava da altura da
faixa e escorregava nas telas largas). 46,3% é logo à esquerda do ponto
de fuga, que é onde a pista da esquerda cai a essa distância. */
transform:translate(calc(-50% + 18.8vw),-63.1%) scale(.125);
}
/* --- O FIM DE TARDE, TAMBÉM SOBRE O CAMINHÃO -----------------------------
Sem isto o caminhão parece colado, e essa não é uma opinião nova: é o
efeito que o lastro da placa produzia de graça ("o lastro cai POR CIMA
dele conforme a viagem avança, e a frente e as rodas escurecem junto com
o resto da cena", registrado no HANDOFF como o que integra o desenho à
luz). A placa saiu; o escurecimento não podia sair junto.
O caminhão é IRMÃO da cena, não filho dela: mora em z-index 2 e a cena
inteira em 0, então a camada .cena__noite passa por baixo dele e nunca o
alcança. Esta camada é a mesma coisa, aplicada por cima: gradiente
idêntico ao do .cena__noite, mesma conta de opacidade sobre --vprog.
Fim de tarde único, uma luz só para a estrada e para quem chega nela.
Custo: uma camada de `opacity`, que é a mesma natureza de conta da que
ela substitui. Nenhum elemento repinta. */
.hero__caminhao::after{
content:'';
position:absolute;inset:0;pointer-events:none;
background:linear-gradient(to bottom,
rgba(24,49,60,.95) 0%,
rgba(26,52,58,.74) 26%,
rgba(151,79,38,.30) 40%,
rgba(120,60,28,.34) 52%,
rgba(14,26,24,.66) 100%);
opacity:calc(var(--vprog,0) * .82);
}
/* o mesmo ponto para onde o object-position já aponta: quem cresce é o
caminhão, não a moita da beira da estrada */
.hero__foto img{transform-origin:60% 46%}
/* --- A VIAGEM, LIDA DA POSIÇÃO DA ROLAGEM --------------------------------
Quatro declarações, uma variável, zero relógio. Todas leem --vprog com
`0` de reserva: se o script não escrever nada, cada uma cai sozinha no
estado de partida e o hero fica exatamente como é hoje, que é a rede de
proteção que já custou caro duas vezes neste hero. */
/* Push-in de 20%, teto decidido no parecer original e mantido: acima disso
o caminhão da FOTO começa a sair de quadro pela direita. O número aparece
em um lugar só. */
html.viagem .hero__foto img{
transform:scale(calc(1 + .20 * var(--vprog,0)));
}
/* O caminhão parte no primeiro pixel de rolagem e só assenta no fim do
curso: é o movimento mais longo, e é ele que a pessoa está olhando.
Translação e escala interpolam juntas, exatamente os mesmos dois
extremos que a transition tinha, agora amarrados ao dedo. */
html.viagem .hero__caminhao::before{
transform:
translate(calc(-50% + 18.8vw - 18.8vw * var(--vprog,0)), calc(-63.1% + 63.1% * var(--vprog,0)))
scale(calc(.125 + .875 * var(--vprog,0)));
}
}
/* Quem pediu economia de dados também pediu economia de tudo. Custa duas
regras e é ganho puro onde o navegador entender. Especificidade igual à
dos blocos acima, e depois deles no arquivo, para vencer sem !important. */
@media (prefers-reduced-data:reduce){
/* A cena inteira sai e a FOTO VOLTA. Ela nunca foi apagada do projeto: a
partir de 2026-08-02 o papel dela é este, ser o hero de quem não pode
rodar a estrada. Como a cena não custa byte nenhum (é CSS), o que se
economiza aqui é bateria e composição, não rede. Estas duas linhas vêm
depois das do bloco da cena e com a mesma especificidade, então vencem
sem !important. */
.hero__cena{display:none}
.hero__foto{display:block}
/* O caminhão sai daqui com dois ganhos de uma vez: some o movimento E
somem os 62 KB, porque background de elemento não exibido não é baixado.
Especificidade casada com a do bloco lá em cima (.hero .hero__caminhao),
senão esta linha perderia. */
.hero .hero__caminhao{display:none}
.hero__foto img,
html.viagem .hero__foto img{transform:none}
}