/* =========================================================
   MOTRIZ · Bloco "Ônibus · Explorador 3D"

   ORDEM DAS CAMADAS — e o motivo dela:

   O layout ESTÁTICO é o padrão. Um leitor sem WebGL, com movimento
   reduzido, com JavaScript desligado, um robô de busca ou o editor do
   WordPress recebem exatamente isto: cabeçalho + lista dos cinco
   sistemas, com imagem, título e descrição. É conteúdo completo, não
   um aviso de "ative o JavaScript".

   A experiência tridimensional entra por CIMA, quando a classe
   .esta-em-3d é acrescentada — e só o JavaScript acrescenta, e só depois
   de confirmar que dá para rodar. Se qualquer coisa falhar no caminho,
   a página fica como já estava. Nada aqui depende de dar certo.

   Toda cor sai da paleta do tema (theme.json). Nenhuma identidade nova.
   ========================================================= */

.motriz-onibus {
	--motriz-onibus-etapas: 5;

	/* Quanto de rolagem cada etapa custa.
	 *
	 * 105svh → 68svh → 46svh → 32svh, em três rodadas, todas por relato de
	 * que continuava longo demais.
	 *
	 * Numa tela de 720 px isso põe as paradas a ~212 px uma da outra —
	 * dois cliques de roda do mouse — e a primeira parada a ~196 px do
	 * começo da seção, contra 541 px na primeira versão do caminhão.
	 *
	 * A partir daqui não dá para encurtar sem consequência: o giro do
	 * veículo entre duas etapas é fixo (chega a 206° entre a 2 e a 3), e
	 * encurtar mais só o deixa mais rápido, não mais curto. Se algum dia
	 * ficar rápido demais, o caminho é o seletor "Comprimento da rolagem"
	 * no editor, não este número.
	 *
	 * Encurtar não atropela a leitura porque a trava das etapas (ver mais
	 * abaixo) segura a rolagem em cada parada: o que era "muito caminho
	 * até o próximo ponto" vira "um gesto até o próximo ponto, e ele
	 * espera por você lá".
	 *
	 * ESTE VALOR É O DO DESKTOP. O celular tem o seu, mais adiante neste
	 * arquivo — ver "PASSO MAIOR NO CELULAR". Um polegar e uma roda de
	 * mouse não têm a mesma granularidade, e usar um número só para os
	 * dois foi o que fez a rolagem brigar com o dedo no telefone. */
	--motriz-onibus-passo: 32svh;

	--motriz-onibus-destaque: var( --wp--preset--color--ambar-diesel, #f5871f );
	--motriz-onibus-sinal: var( --wp--preset--color--ciano-eletrico, #17b6ce );
	--motriz-onibus-fundo: var( --wp--preset--color--preto-grafite, #0e1116 );
	--motriz-onibus-claro: var( --wp--preset--color--gelo, #f4f6fa );
	--motriz-onibus-suave: var( --wp--preset--color--nevoa-clara, #95a1ba );
	--motriz-onibus-linha: rgb( 149 161 186 / 0.22 );
	--motriz-onibus-ease: var( --wp--custom--transicao--suave, cubic-bezier( 0.22, 0.61, 0.21, 1 ) );

	position: relative;
	background-color: var( --motriz-onibus-fundo );
	color: var( --motriz-onibus-claro );
	padding-block: var( --wp--preset--spacing--70, clamp( 5rem, 9vw, 8.5rem ) );

	/* Contexto de empilhamento próprio: nada aqui dentro pode subir por
	   cima do cabeçalho fixo do tema (z-index 100 em motriz.css). */
	isolation: isolate;
}

.motriz-onibus--destaque-ciano {
	--motriz-onibus-destaque: var( --wp--preset--color--ciano-eletrico, #17b6ce );
	--motriz-onibus-sinal: var( --wp--preset--color--ambar-diesel, #f5871f );
}

.motriz-onibus--ritmo-compacta { --motriz-onibus-passo: 24svh; }
.motriz-onibus--ritmo-ampla    { --motriz-onibus-passo: 48svh; }

/* ---------------------------------------------------------
   PASSO MAIOR NO CELULAR

   O mesmo número não serve para os dois. A roda do mouse anda em
   incrementos de ~100 px, então um passo de 32svh (212 px numa tela
   de 720) dá dois cliques por etapa e funciona bem. Um polegar não
   tem essa granularidade: no telefone, 32svh põe as paradas a 219 px
   numa tela de 844 px — 26% de tela por etapa, abaixo do que um
   deslize consegue mirar. O encaixe passava a brigar com o dedo, e
   às vezes devolvia a rolagem ao ponto de partida: era o "preciso
   rolar duas ou três vezes para ir para o próximo".

   48svh põe as paradas a 328 px, 39% da tela — a mesma ordem de
   grandeza que carrossel com encaixe usa, e o tamanho que um deslize
   comum atravessa de uma vez.

   A consulta é a MESMA de ehEstreito() em cena/lente.js e a mesma que
   troca a composição do palco. Se este número mudar, muda nos três.
   --------------------------------------------------------- */
@media ( max-width: 899px ) {
	.motriz-onibus                 { --motriz-onibus-passo: 48svh; }
	.motriz-onibus--ritmo-compacta { --motriz-onibus-passo: 36svh; }
	.motriz-onibus--ritmo-ampla    { --motriz-onibus-passo: 68svh; }
}

/* ---------------------------------------------------------
   Palco e atmosfera
   --------------------------------------------------------- */

.motriz-onibus__palco {
	position: relative;
	z-index: 1;
}

.motriz-onibus__atmosfera {
	position: absolute;
	inset: -10%;
	z-index: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s var( --motriz-onibus-ease );

	/* O "brilho" da cena é este degradê, e não pós-processamento no
	   WebGL: dois halos de fundo custam zero por quadro e dão a mesma
	   profundidade atmosférica que um passe de bloom. */
	background:
		radial-gradient( 42% 46% at 32% 46%, rgb( 245 135 31 / 0.16 ) 0%, transparent 70% ),
		radial-gradient( 38% 42% at 68% 62%, rgb( 23 182 206 / 0.14 ) 0%, transparent 72% ),
		radial-gradient( 90% 70% at 50% 40%, rgb( 37 55 94 / 0.30 ) 0%, transparent 76% );
}

.motriz-onibus__tela {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------------
   Cabeçalho
   --------------------------------------------------------- */

.motriz-onibus__cabecalho {
	position: relative;
	z-index: 6;
	max-width: 46rem;
	margin-inline: auto;
	text-align: center;
	padding-inline: var( --wp--preset--spacing--30, clamp( 1.25rem, 4vw, 2.5rem ) );
}

/*
 * O "olho" traz a própria tipografia — NÃO usa a classe .olho do tema.
 *
 * Usava, e isso produzia cores diferentes no editor e no site. A classe
 * .olho vive em assets/css/motriz.css, que o tema registra como estilo
 * de editor; e o WordPress prefixa todo estilo de editor com
 * ".editor-styles-wrapper". O resultado é uma inversão de especificidade:
 *
 *   no site   .olho (0,1,0)  ×  .motriz-onibus__olho (0,1,0)
 *             empate — vence quem carrega depois, que é o bloco
 *   no editor .editor-styles-wrapper .olho (0,2,0)  ×  o mesmo (0,1,0)
 *             o tema vence
 *
 * Como .olho fixa a cor em âmbar e o bloco usa a cor de destaque
 * escolhida, um bloco configurado em Ciano aparecia ciano no site e
 * âmbar no editor. Duplicar seis linhas de tipografia aqui é mais barato
 * e mais previsível do que disputar especificidade com o tema.
 */
.motriz-onibus__olho {
	margin: 0 0 0.9rem;
	color: var( --motriz-onibus-destaque );
	font-family: var( --wp--preset--font-family--mono, monospace );
	font-size: var( --wp--preset--font-size--pequena, 0.8125rem );
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.motriz-onibus__titulo {
	margin: 0;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: var( --wp--preset--font-size--gigante, clamp( 3rem, 6vw, 6.2rem ) );
	font-weight: 900;
	line-height: 0.98;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var( --motriz-onibus-claro );
}

.motriz-onibus__subtitulo {
	margin: 1.1rem 0 0;
	color: var( --motriz-onibus-suave );
	font-size: var( --wp--preset--font-size--media, 1.0625rem );
	line-height: 1.6;
}

/* ---------------------------------------------------------
   Trilha de etapas e dica de rolagem — só existem no modo 3D
   --------------------------------------------------------- */

.motriz-onibus__trilha,
.motriz-onibus__dica {
	display: none;
}

/* ---------------------------------------------------------
   LISTA DOS SISTEMAS — o conteúdo de verdade
   Este é o layout que aparece sem WebGL, sem JavaScript,
   com movimento reduzido e dentro do editor do WordPress.
   --------------------------------------------------------- */

.motriz-onibus__sistemas {
	position: relative;
	z-index: 2;
	list-style: none;
	margin: clamp( 2.5rem, 5vw, 4rem ) auto 0;
	padding: 0;
	max-width: var( --wp--style--global--wide-size, 1320px );
	display: grid;
	gap: clamp( 1.5rem, 3vw, 2.5rem );
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	padding-inline: var( --wp--preset--spacing--30, clamp( 1.25rem, 4vw, 2.5rem ) );
}

.motriz-onibus__sistema {
	margin: 0;
	padding: 0;
}

.motriz-onibus__figura {
	position: relative;
	margin: 0 0 1.1rem;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var( --wp--custom--raio--imagem, 14px );
	border: 1px solid var( --motriz-onibus-linha );
	background-color: rgb( 37 55 94 / 0.28 );
}

.motriz-onibus__imagem {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Marcador esquemático para hotspot ainda sem imagem: retículo técnico
   desenhado só com degradês — nenhuma requisição, nenhum arquivo. */
.motriz-onibus__esquema {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0.55;
	background-image:
		radial-gradient( circle at 50% 50%, transparent 0 21%, var( --motriz-onibus-destaque ) 21% 21.7%, transparent 21.8% ),
		radial-gradient( circle at 50% 50%, transparent 0 33%, var( --motriz-onibus-linha ) 33% 33.5%, transparent 33.6% ),
		linear-gradient( to right, transparent calc( 50% - 0.5px ), var( --motriz-onibus-linha ) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ),
		linear-gradient( to bottom, transparent calc( 50% - 0.5px ), var( --motriz-onibus-linha ) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) );
}

.motriz-onibus__rotulo {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	margin: 0 0 0.55rem;
	color: var( --motriz-onibus-destaque );
	font-family: var( --wp--preset--font-family--mono, monospace );
	font-size: var( --wp--preset--font-size--pequena, 0.8125rem );
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
}

.motriz-onibus__indice {
	color: var( --motriz-onibus-suave );
}

.motriz-onibus__sistema-titulo {
	margin: 0 0 0.55rem;
	font-family: var( --wp--preset--font-family--display, inherit );
	font-size: var( --wp--preset--font-size--xg, 1.9rem );
	font-weight: 800;
	line-height: 1.15;
	color: var( --motriz-onibus-claro );
}

.motriz-onibus__descricao {
	margin: 0;
	color: var( --motriz-onibus-suave );
	font-size: var( --wp--preset--font-size--media, 1.0625rem );
	line-height: 1.6;
}

/* =========================================================
   MODO 3D
   Tudo abaixo só vale quando o JavaScript confirmou que a
   cena pode rodar.
   ========================================================= */

.motriz-onibus.esta-em-3d {
	padding-block: 0;

	/* Referência para as marcas de trava, que são posicionadas em pixels
	   dentro da seção (ver "trava das etapas", no fim do arquivo). Não
	   atrapalha o position:sticky do palco: sticky se resolve contra o
	   contêiner de rolagem, e só é LIMITADO pela caixa do pai. */
	position: relative;

	/* Uma tela para a abertura + uma "passada" por etapa. É este número
	   que dá espaço para a rolagem controlar a animação sem prender o
	   usuário: passada a última etapa, a seção acaba e a página segue.

	   A PRIMEIRA TELA usa "lvh", não "svh" — mesma razão do palco, logo
	   abaixo. As duas medidas têm de bater: o curso da rolagem é a
	   ALTURA DA PISTA MENOS A ALTURA DO PALCO, e se uma usasse svh e a
	   outra lvh o curso mudaria sozinho de aparelho para aparelho.
	   O "passo" continua em svh de propósito: ele é distância de
	   rolagem por etapa, um ritmo já medido no telefone (1.55.0), e não
	   tem nada a ver com o que cobre a tela. */
	height: calc( 100vh + var( --motriz-onibus-etapas ) * 32vh );
	height: calc( 100lvh + var( --motriz-onibus-etapas ) * var( --motriz-onibus-passo ) );
}

/* ---------------------------------------------------------
   A ALTURA DO PALCO É "lvh", E ISSO IMPORTA (corrigido na 1.60.0)

   RELATO: no iPhone, na página inicial, aparecia uma faixa lisa
   escura de ~100px numa borda da tela assim que a cena do caminhão
   entrava, e ela não saía mais até recarregar.

   CAUSA: "svh" é a viewport PEQUENA — a altura da tela com a barra
   do Safari aberta. Assim que a pessoa rola, a barra recolhe e a
   tela útil CRESCE (~100px num iPhone 15). O palco continuava com a
   altura de antes, e a sobra descoberta mostrava o fundo chapado do
   bloco (--motriz-onibus-fundo) embaixo de um céu com estrelas e
   degradê: lia como uma tarja colada na borda.

   POR QUE "lvh" E NÃO "dvh": lvh é a viewport GRANDE, a maior que a
   tela pode ficar. Um palco de 100lvh é sempre MAIOR OU IGUAL à
   tela útil — com a barra aberta ele passa por baixo dela, com a
   barra recolhida ele encaixa exato. Nunca sobra faixa, nos dois
   estados e durante a transição entre eles.

   "dvh" pareceria mais certo (é a altura atual), mas ele muda
   CONTINUAMENTE enquanto a barra recolhe, e a barra recolhe
   enquanto a pessoa rola. O palco mudaria de tamanho durante a
   rolagem, e a tela 3D é esticada por CSS (o renderer não redesenha
   o buffer a cada quadro — ver o comentário de agendarMedicao em
   cena/experiencia.js, que ignora variação de altura abaixo de
   20% justamente para não travar a rolagem no telefone). O
   caminhão ficaria ~12% mais alto enquanto a barra estivesse
   recolhida. lvh é constante: o renderer mede uma vez e pronto.

   PREÇO ASSUMIDO: com a barra do Safari ABERTA (só no repouso, no
   alto da página) o rodapé do palco fica atrás dela. O único
   elemento que mora lá é a dica "role a página", e ela sobe
   sozinha pela diferença lvh − dvh (ver "dica de rolagem").
   --------------------------------------------------------- */
.esta-em-3d .motriz-onibus__palco {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100lvh;
	overflow: hidden;
	display: block;
}

.esta-em-3d .motriz-onibus__atmosfera {
	opacity: 1;
}

/* ---------------------------------------------------------
   TRAVA DAS ETAPAS

   O pedido: "role ou deslize muito rápido e não passe direto
   pelo item em destaque".

   Quem faz isso é o próprio navegador, não JavaScript. As
   marcas abaixo são pontos de encaixe de rolagem invisíveis,
   um por etapa, colocados pelo JavaScript exatamente no
   progresso em que a lente está totalmente aberta — ou seja,
   no quadro em que a peça está em foco.

   "scroll-snap-stop: always" é a trava propriamente dita: ela
   proíbe a rolagem de PASSAR POR CIMA de um ponto de encaixe
   durante um lance de inércia. Um deslize violento avança uma
   etapa, não cinco.

   POR QUE NÃO FAZER ISSO EM JAVASCRIPT. Dá para detectar que a
   rolagem parou e puxar a página para o ponto mais próximo, e
   é o que muita biblioteca faz. Só que no celular a inércia é
   do sistema operacional: qualquer scrollTo disparado durante
   ela briga com o dedo do usuário, e o resultado é o travamento
   que todo mundo já sentiu em site com "scroll sequestrado".
   O encaixe nativo não briga — ele participa da mesma inércia.

   POR QUE "proximity" E NÃO "mandatory". Mandatory obriga a
   rolagem a repousar sempre num ponto de encaixe; entrar e sair
   da seção ficaria pegajoso, e ninguém conseguiria parar no meio
   de uma transição para olhar o veículo. Proximity só age perto
   das paradas, que é onde a trava tem que agir.

   ESCOPO. A propriedade precisa viver no elemento que rola — o
   <html>. Para não afetar a página inteira, o JavaScript põe a
   classe só enquanto a seção está na tela e tira quando ela sai.
   E só elementos com scroll-snap-align são pontos de encaixe:
   nenhum outro bloco do tema vira um.
   --------------------------------------------------------- */
.motriz-onibus__travas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.motriz-onibus__travas > i {
	position: absolute;
	left: 0;
	width: 1px;
	height: 1px;
}

html.motriz-onibus-travando {
	scroll-snap-type: y proximity;
}

html.motriz-onibus-travando .motriz-onibus__travas > i {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}

/* Movimento reduzido nunca chega aqui (a seção fica no layout
   estático), mas deixar explícito custa duas linhas e evita que
   uma mudança futura no gatilho do 3D reintroduza o encaixe para
   quem pediu para não ter movimento. */
@media ( prefers-reduced-motion: reduce ) {
	html.motriz-onibus-travando {
		scroll-snap-type: none;
	}
}

/* O conteúdo continua no documento e no leitor de tela — só sai do
   caminho visualmente. display:none o removeria da árvore de
   acessibilidade, que é exatamente o que NÃO pode acontecer. */
.esta-em-3d .motriz-onibus__sistemas {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	border: 0;
}

/* --- cabeçalho: sai de cena quando a inspeção começa ---
   O "topo" é a altura do cabeçalho fixo do SITE, medida pelo JavaScript
   (ver medirCabecalhoDoSite em cena/experiencia.js). O palco gruda em
   top:0 e passa por baixo do cabeçalho de propósito — quem não pode
   passar por baixo é o texto. */
.esta-em-3d .motriz-onibus__cabecalho {
	position: absolute;
	inset-inline: 0;
	top: calc( var( --motriz-onibus-topo, 0px ) + clamp( 2rem, 8vh, 5rem ) );
	margin-inline: auto;
	transition:
		opacity 0.7s var( --motriz-onibus-ease ),
		transform 0.7s var( --motriz-onibus-ease );
}

.esta-em-3d.esta-imerso .motriz-onibus__cabecalho {
	opacity: 0;
	transform: translateY( -1.5rem );
	pointer-events: none;
}

/* --- dica de rolagem ---
   O palco tem 100lvh e a barra do Safari, quando aberta, cobre o
   rodapé dele (ver o bloco sobre a altura do palco). "100lvh - 100dvh"
   é exatamente o pedaço coberto NESTE INSTANTE: zero com a barra
   recolhida, a altura da barra com ela aberta. A dica sobe o tanto
   que precisar e nunca fica escondida.

   Vai numa segunda declaração para navegador sem dvh/lvh descartar só
   ela e ficar com o valor de cima, que é o de sempre. */
.esta-em-3d .motriz-onibus__dica {
	position: absolute;
	z-index: 6;
	inset-inline: 0;
	bottom: clamp( 1.5rem, 5vh, 3rem );
	bottom: calc( clamp( 1.5rem, 5vh, 3rem ) + 100lvh - 100dvh );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.7rem;
	color: var( --motriz-onibus-suave );
	font-family: var( --wp--preset--font-family--mono, monospace );
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	transition: opacity 0.6s var( --motriz-onibus-ease );
}

.esta-em-3d.esta-imerso .motriz-onibus__dica {
	opacity: 0;
	pointer-events: none;
}

.motriz-onibus__dica-seta {
	width: 1px;
	height: 2.4rem;
	background: linear-gradient( to bottom, transparent, var( --motriz-onibus-destaque ) );
	animation: motriz-onibus-desce 2.2s var( --motriz-onibus-ease ) infinite;
	transform-origin: top;
}

@keyframes motriz-onibus-desce {
	0%   { transform: scaleY( 0.2 ); opacity: 0; }
	40%  { transform: scaleY( 1 );   opacity: 1; }
	100% { transform: scaleY( 1 );   opacity: 0; }
}

/* --- trilha de etapas --- */
.esta-em-3d .motriz-onibus__trilha {
	position: absolute;
	z-index: 6;
	inset-inline: 0;
	/* Abaixo do cabeçalho fixo do site — era aqui que as etapas apareciam
	   cortadas pela barra superior. */
	top: calc( var( --motriz-onibus-topo, 0px ) + clamp( 0.75rem, 2.5vh, 1.5rem ) );
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem clamp( 0.7rem, 2.4vw, 1.8rem );
	margin: 0;
	padding: 0 1rem;
	list-style: none;
	opacity: 0;
	transition: opacity 0.7s var( --motriz-onibus-ease );
}

.esta-em-3d.esta-imerso .motriz-onibus__trilha {
	opacity: 1;
}

.motriz-onibus__passo {
	display: flex;
	align-items: baseline;
	gap: 0.42rem;
	font-family: var( --wp--preset--font-family--mono, monospace );
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --motriz-onibus-suave );
	opacity: 0.42;
	transition:
		opacity 0.45s var( --motriz-onibus-ease ),
		color 0.45s var( --motriz-onibus-ease );
}

.motriz-onibus__passo.esta-vencido {
	opacity: 0.62;
}

.motriz-onibus__passo.esta-ativo {
	opacity: 1;
	color: var( --motriz-onibus-destaque );
}

.motriz-onibus__passo-numero {
	font-size: 0.625rem;
	opacity: 0.7;
}

/* --- traços (tangentes entre marcador e lente) --- */
.motriz-onibus__tracos {
	position: absolute;
	inset: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.motriz-onibus__traco {
	fill: none;
	stroke: var( --motriz-onibus-sinal );
	stroke-width: 1;
	stroke-linecap: round;
	stroke-dasharray: 1.5 5;
	opacity: 0.85;
}

/* --- marcador sobre o veículo --- */
.motriz-onibus__marcador {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 4;
	width: 18px;
	height: 18px;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.motriz-onibus__marcador-nucleo,
.motriz-onibus__marcador-pulso {
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.motriz-onibus__marcador-nucleo {
	inset: 5px;
	background: var( --motriz-onibus-destaque );
	box-shadow: 0 0 12px 2px rgb( 245 135 31 / 0.65 );
}

.motriz-onibus__marcador-pulso {
	border: 1px solid var( --motriz-onibus-destaque );
	opacity: 0.55;
	animation: motriz-onibus-pulso 2.6s var( --motriz-onibus-ease ) infinite;
}

@keyframes motriz-onibus-pulso {
	0%   { transform: scale( 0.55 ); opacity: 0.9; }
	70%  { transform: scale( 1.5 );  opacity: 0; }
	100% { transform: scale( 1.5 );  opacity: 0; }
}

/* --- a lente --- */
.motriz-onibus__lente {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	opacity: 0;
	pointer-events: none;
	will-change: transform, opacity;
}

.motriz-onibus__disco {
	position: relative;
	width: clamp( 9rem, 21vw, 16.5rem );
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	border: 1px solid rgb( 245 135 31 / 0.5 );
	background-color: rgb( 14 17 22 / 0.72 );
	-webkit-backdrop-filter: blur( 10px ) saturate( 1.2 );
	backdrop-filter: blur( 10px ) saturate( 1.2 );
	box-shadow:
		0 0 0 1px rgb( 149 161 186 / 0.12 ),
		0 18px 60px -18px rgb( 14 17 22 / 0.9 ),
		0 0 48px -8px rgb( 245 135 31 / 0.4 );
}

/* Retículo de instrumento sobre a imagem: o que separa "foto num
   círculo" de "inspeção técnica". */
.motriz-onibus__disco::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	pointer-events: none;
	background:
		radial-gradient( circle at 50% 50%, transparent 0 62%, rgb( 14 17 22 / 0.55 ) 100% ),
		linear-gradient( to right, transparent calc( 50% - 0.5px ), rgb( 23 182 206 / 0.3 ) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ),
		linear-gradient( to bottom, transparent calc( 50% - 0.5px ), rgb( 23 182 206 / 0.3 ) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) );
	box-shadow: inset 0 0 0 6px rgb( 244 246 250 / 0.06 );
}

.motriz-onibus__visual {
	position: absolute;
	inset: 0;
	opacity: 0;
	transform: scale( 1.12 );
	transition:
		opacity 0.55s var( --motriz-onibus-ease ),
		transform 0.9s var( --motriz-onibus-ease );
}

.motriz-onibus__visual.esta-visivel {
	opacity: 1;
	transform: scale( 1 );
}

.motriz-onibus__visual .motriz-onibus__figura {
	margin: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border: 0;
	border-radius: 0;
	background: none;
}

.motriz-onibus__ficha {
	position: relative;
	width: min( 22rem, 76vw );
	min-height: 10.5rem;
	margin-top: 1.35rem;
	text-align: center;
}

.motriz-onibus__legenda {
	position: absolute;
	inset-inline: 0;
	top: 0;
	opacity: 0;
	transform: translateY( 0.7rem );
	transition:
		opacity 0.5s var( --motriz-onibus-ease ),
		transform 0.6s var( --motriz-onibus-ease );
}

.motriz-onibus__legenda.esta-visivel {
	opacity: 1;
	transform: none;
}

.motriz-onibus__legenda .motriz-onibus__rotulo {
	justify-content: center;
}

.motriz-onibus__legenda .motriz-onibus__sistema-titulo {
	font-size: var( --wp--preset--font-size--grande, 1.35rem );
	text-wrap: balance;
}

.motriz-onibus__legenda .motriz-onibus__descricao {
	font-size: var( --wp--preset--font-size--pequena, 0.8125rem );
	line-height: 1.62;
}

/* ---------------------------------------------------------
   TELA ESTREITA
   Não é o mesmo layout reduzido: o veículo sobe, a lente vai
   para baixo, a trilha encolhe e o texto ganha prioridade.
   O ponto de corte (900px) é o MESMO usado em lente.js — se
   um mudar, o outro precisa mudar junto.
   --------------------------------------------------------- */

@media ( max-width: 899px ) {
	.motriz-onibus__marcador {
		width: 14px;
		height: 14px;
	}

	.motriz-onibus__marcador-nucleo {
		inset: 4px;
	}

	.esta-em-3d .motriz-onibus__cabecalho {
		top: clamp( 2.5rem, 9vh, 5rem );
	}

	.motriz-onibus__disco {
		width: clamp( 7.5rem, 34vw, 11rem );
	}

	.motriz-onibus__ficha {
		width: min( 26rem, 86vw );
		min-height: 9rem;
		margin-top: 1rem;
	}

	.esta-em-3d .motriz-onibus__dica {
		bottom: clamp( 0.75rem, 2vh, 1.5rem );
		bottom: calc( clamp( 0.75rem, 2vh, 1.5rem ) + 100lvh - 100dvh );
	}
}

/* Telas muito baixas (celular deitado): a lente não cabe embaixo. */
@media ( max-height: 560px ) and ( max-width: 899px ) {
	.motriz-onibus__disco {
		width: clamp( 6rem, 20vh, 8.5rem );
	}

	.motriz-onibus__ficha {
		min-height: 7rem;
		margin-top: 0.7rem;
	}

	.motriz-onibus__legenda .motriz-onibus__descricao {
		display: none;
	}
}

/* ---------------------------------------------------------
   MODO SILENCIOSO (padrão)

   Na cena 3D fica só o veículo, o marcador, a lente com a imagem e a
   chamada de rolagem. Nada de cabeçalho, trilha ou legenda.

   Repare no escopo: as regras valem dentro de .esta-em-3d. Fora dele —
   sem WebGL, com movimento reduzido, no editor — o texto continua
   aparecendo normalmente, porque ali ele é o conteúdo, não sobreposição.
   --------------------------------------------------------- */

.motriz-onibus--silencioso.esta-em-3d .motriz-onibus__cabecalho,
.motriz-onibus--silencioso.esta-em-3d .motriz-onibus__trilha {
	display: none;
}

.motriz-onibus--silencioso.esta-em-3d .motriz-onibus__ficha {
	display: none;
}

/* Sem a ficha embaixo, a lente é só o disco — e ele passa a ser o
   centro da composição, em vez do topo dela. */
.motriz-onibus--silencioso .motriz-onibus__disco {
	width: clamp( 10rem, 24vw, 19rem );
}

@media ( max-width: 899px ) {
	.motriz-onibus--silencioso .motriz-onibus__disco {
		width: clamp( 9rem, 42vw, 14rem );
	}
}

/* A chamada de rolagem é o único texto da cena. Some quando a inspeção
   começa — ela é um convite, não uma legenda. */
.motriz-onibus--silencioso.esta-em-3d .motriz-onibus__dica-texto {
	font-size: 0.75rem;
	letter-spacing: 0.26em;
	color: var( --motriz-onibus-claro );
	opacity: 0.85;
}

/* ---------------------------------------------------------
   APENAS NO EDITOR
   Este seletor não existe no site publicado (o aviso é criado
   pelo editor.js do bloco), então as regras ficam aqui em vez
   de espalhar mudanças por assets/css/editor.css.
   --------------------------------------------------------- */

.motriz-onibus__aviso-editor {
	max-width: 44rem;
	margin: 0 auto 2rem;
	text-align: left;
}

/* ---------------------------------------------------------
   MOVIMENTO REDUZIDO
   O JavaScript nem inicia a cena 3D neste caso (view.js). Isto
   aqui cuida do que sobra: as animações puramente decorativas
   do próprio CSS.
   --------------------------------------------------------- */

@media ( prefers-reduced-motion: reduce ) {
	.motriz-onibus__marcador-pulso,
	.motriz-onibus__dica-seta {
		animation: none;
	}

	.motriz-onibus__visual,
	.motriz-onibus__legenda,
	.motriz-onibus__cabecalho,
	.motriz-onibus__trilha,
	.motriz-onibus__atmosfera,
	.motriz-onibus__dica {
		transition: none;
	}
}