/*
	A assinatura visual do Pictore AI Ready: a aura do gradiente expandido, a
	chuva de código e a composição (a marca no centro, os quatro sinais
	chegando).

	Moravam em `home.css`; saíram para cá em 28/09/2026, quando a página do AI
	Ready passou a usar as mesmas peças. Assinatura de marca não mora na folha
	de uma página. A POSIÇÃO de cada peça continua valendo como era na Home
	(a chuva começa em 52% da largura, ao lado do texto); a página do AI Ready
	reposiciona o que precisa em `ai-ready.css`.
*/

/*
	A assinatura da seção é o gradiente expandido — e ela ANDA. Em camada
	própria por dois motivos: para poder se mover sem arrastar o conteúdo junto,
	e para o movimento rodar em `transform`, que o compositor resolve sozinho.

	Dois estímulos somados: uma deriva lenta e infinita, que existe mesmo sem
	ninguém mexer, e o ponteiro, que desloca a aura em ritmo próprio. Gradiente
	parado é papel de parede; este respira.
*/
.ai-ready__aura {
	position: absolute;
	inset: -25%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(34% 42% at 18% 22%, rgba(153, 0, 255, 0.15), transparent 64%),
		radial-gradient(34% 40% at 78% 74%, rgba(18, 228, 255, 0.16), transparent 64%),
		radial-gradient(30% 38% at 58% 18%, rgba(84, 129, 255, 0.14), transparent 66%);
	transform: translate3d(
		calc(var(--pic-px, 0) * 22px),
		calc(var(--pic-py, 0) * 16px),
		0
	);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: no-preference) {
	.ai-ready__aura {
		animation: pic-aura 26s ease-in-out infinite alternate;
	}
}

/*
	A deriva vai no FILTRO e na escala, não em `transform`, para não brigar com
	o deslocamento do ponteiro declarado acima — duas animações na mesma
	propriedade e a declaração perde.
*/
@keyframes pic-aura {
	from {
		scale: 1;
		filter: hue-rotate(0deg);
	}

	to {
		scale: 1.18;
		filter: hue-rotate(-12deg);
	}
}

/* ---------- a chuva de código ---------- */

/*
	Ela mora no lado ABERTO da seção e desaparece onde está o texto: a caixa
	começa em 52% da largura e a máscara na diagonal só a deixa aparecer de
	verdade a partir de ~60%. A coluna de leitura tem 44rem, então atrás de
	texto não passa um caractere. É a mesma lógica do véu do painel da abertura: o efeito ocupa o
	espaço que sobra, não o espaço do conteúdo. E é o que permite deixar a
	chuva forte sem nenhuma conta de contraste ficar apertada.
*/
.chuva {
	position: absolute;

	/*
		A CAIXA COMEÇA ONDE A CHUVA COMEÇA, e isso é otimização, não desenho.
		Cobrindo a seção inteira, mais da metade do canvas era pintada,
		enviada para a placa e composta a cada passo — para ser escondida pela
		máscara logo depois. Metade da largura é metade dos pixels, sem
		nenhuma diferença no que se vê.
	*/
	inset: 0 0 0 52%;
	z-index: -2;
	overflow: hidden;
	pointer-events: none;
	opacity: 0.62;

	/*
		SEM DESFOQUE, e por dois motivos que apontam para o mesmo lado.

		O primeiro é do cliente: a versão com 2,4 px escondia que eram
		caracteres, e sem caractere legível não há citação nenhuma.

		O segundo é medido, e foi uma surpresa: `filter` numa camada cujo
		conteúdo muda 18 vezes por segundo obriga o navegador a refazer o
		borrão da superfície inteira a cada mudança. Custava **5 quadros por
		segundo** — mais do que o desenho da chuva inteira. Com 0,5 px ele não
		entregava quase nada em troca disso.
	*/
	-webkit-mask-image: linear-gradient(
			104deg,
			transparent 0%,
			transparent 12%,
			#000 58%,
			#000 100%
		),
		linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
	mask-image: linear-gradient(
			104deg,
			transparent 0%,
			transparent 12%,
			#000 58%,
			#000 100%
		),
		linear-gradient(to bottom, transparent 0%, #000 12%, #000 84%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}

.chuva__tela {
	display: block;
	width: 100%;
	height: 100%;
}

/*
	Sem movimento, a chuva sai de cena. Parada ela não é textura: é um bloco de
	caracteres aleatórios atrás do texto, que é ruído sem função. O `chuva.js`
	nem chega a desenhar nesse caso.
*/
@media (prefers-reduced-motion: reduce) {
	.chuva {
		display: none;
	}
}

@media (max-width: 52rem) {
	.chuva {
		opacity: 0.4;
	}
}

/* ---------- a composição: a marca compreendida pela IA ---------- */

/*
	A seção passou a ter duas colunas (direção da Juliana, 22/09/2026): o texto
	à esquerda, na medida de leitura de sempre, e a composição no lado aberto —
	o mesmo vão onde só havia chuva de código. Medido antes de desenhar: eram
	914 × 885 px de chuva e nada mais, numa tela de 1920.

	A composição SANGRA até a borda direita da tela, como a chuva já fazia. Sem
	isso ela ficaria presa dentro dos 76rem do contêiner e a seção voltaria a
	ter uma margem larga e vazia à direita — que é exatamente o defeito que ela
	existe para resolver.

	A conta da sangria: a distância entre a borda do conteúdo do contêiner e a
	borda da tela é `(100vw - largo) / 2 + gutter` quando a tela passa de 76rem,
	e só o gutter quando não passa. `max()` resolve os dois casos numa linha, e
	o `overflow: hidden` da seção corta o excesso da barra de rolagem (100vw a
	inclui).
*/
.ai-ready__env {
	display: grid;
	gap: var(--pic-esp-5);
}

.composicao {
	position: relative;
	display: grid;
	place-items: center;
	margin: 0;

	/*
		O palco se mede pela CAIXA que o contém, não pela tela. Com `vw` a
		composição cresceria junto com o monitor mesmo quando a coluna dela não
		cresce — e passaria por cima do texto. `cqi` mede o que existe de fato.
	*/
	container-type: inline-size;
}

/*
	UMA MEDIDA GOVERNA O DESENHO INTEIRO.

	O palco é quadrado e tudo dentro dele é em `em` ou em porcentagem, então
	mudar esta única linha muda a composição toda em proporção. O teto de
	0,9rem existe porque o contêiner é mais largo que o palco nas telas
	grandes; o piso, para o desenho não virar miniatura ilegível nas pequenas.
*/
.composicao__palco {
	position: relative;
	width: min(42rem, 100%);
	aspect-ratio: 1;
	font-size: max(0.52rem, min(2.15cqi, 0.9rem));

}

/*
	A CLAREIRA. A chuva de código fica, por pedido do cliente, e ela é forte:
	conferido de perto, os caracteres passavam por dentro das peças e por baixo
	dos rótulos, e dois textos sobrepostos leem como defeito.

	Escurecer o fundo é mais barato do que recortar a máscara do canvas e não
	depende de onde a caixa dele começa. Fica num pseudo-elemento, que é o
	primeiro filho na ordem de pintura: abaixo de tudo que está no palco e
	acima da chuva, que vive em `z-index: -2`.

	**E a caixa dele é MAIOR que o palco, o que não é detalhe.** Na primeira
	versão a clareira era o fundo do próprio palco, e degradê radial num
	quadrado termina onde o quadrado termina: a borda esquerda ficava em 0,8 de
	opacidade e cortava seco. Visto na tela — uma emenda vertical atravessando a
	seção inteira. Com a caixa 25% maior em cada lado, o degradê chega a
	transparente FORA da vista, e não existe borda para o olho encontrar. É a
	mesma lição do lampejo do painel: o que denuncia um efeito é a aresta, não
	a intensidade.

	**E o tamanho dela é o miolo, não a composição inteira.** O raio da clareira
	tem de ficar MENOR que a distância do centro do palco até as bordas da
	chuva, senão ela apaga o efeito que o cliente pediu para manter. Em -25% o
	raio dava 504 px contra 380 px até a borda direita da tela — meia opacidade
	em cima de quase toda a chuva visível. Em -8% o raio é 363 px: cobre o
	núcleo e as quatro peças e acaba antes das bordas.

	Quem protege os rótulos nos cantos não é a clareira: é o halo do próprio
	texto, medido logo abaixo.

	A chuva continua correndo em volta e nos cantos. Ela deixa de ser ruído por
	baixo do conteúdo e vira o que sempre foi: profundidade, não superfície.
*/
.composicao__palco::before {
	content: "";
	position: absolute;
	inset: -8%;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(
		closest-side at 50% 50%,
		rgba(20, 20, 27, 0.9) 0 30%,
		rgba(20, 20, 27, 0.76) 54%,
		rgba(20, 20, 27, 0.5) 74%,
		rgba(20, 20, 27, 0.22) 89%,
		transparent 100%
	);
}

/*
	ORDEM IMPORTA AQUI: esta consulta tem de vir DEPOIS da regra base de
	`.composicao`, e a primeira versão vinha antes. Consulta de mídia não
	acrescenta especificidade — o `margin: 0` da regra base, escrito mais
	abaixo no arquivo, vencia por ordem e zerava a sangria. Medido: a
	composição ficou com 376 px em vez de 776, presa dentro da coluna.
*/
@media (min-width: 72rem) {
	.ai-ready__env {
		grid-template-columns: minmax(0, var(--pic-medida)) minmax(0, 1fr);
		align-items: center;
		gap: var(--pic-esp-4);
	}

	.composicao {
		margin-right: calc(
			-1 * max(
					var(--pic-gutter),
					(100vw - var(--pic-largo)) / 2 + var(--pic-gutter)
				)
		);
	}
}

/* ---------- os arcos ---------- */

.composicao__arcos {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;

	/* Profundidade: cada camada anda num ritmo com o ponteiro da seção. */
	transform: translate3d(
		calc(var(--pic-px, 0) * 5px),
		calc(var(--pic-py, 0) * 4px),
		0
	);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
	As órbitas são a curva da marca em escala de composição: não ligam nada,
	dão a órbita em que tudo acontece. Traço de 1 px com
	`vector-effect="non-scaling-stroke"` na marcação — sem ele, esticar o
	desenho engorda o traço por tabela, que é a regra da pena de fênix.
*/
.arcos__orbitas ellipse {
	stroke: var(--pic-borda);
	stroke-width: 1;
	opacity: 0.3;
}

.arco__trilho {
	stroke: var(--pic-ciano);
	stroke-width: 1;

	/* Aceso quando a camada correspondente recebe o ponteiro. */
	opacity: calc(0.2 + 0.52 * var(--pic-aceso, 0));
	transition: opacity 0.35s ease;
}

/*
	O SINAL que percorre o arco, de fora para o núcleo. O sentido importa: é a
	empresa sendo compreendida, não a IA saindo para buscar.

	Ele fica invisível quando a animação não roda (`opacity: 0` na base), e é
	de propósito: um traço curto parado no meio de um arco não lê como sinal,
	lê como falha de desenho.
*/
.arco__sinal {
	stroke: var(--pic-ciano);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-dasharray: 12 88;
	opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
	/*
		Os quatro têm o mesmo ciclo e atrasos de 1,4 s: chega um de cada vez, e
		o conjunto lê como método. Quatro chegando juntos leria como
		pisca-pisca.

		A viagem ocupa só 26% do ciclo. O resto é repouso com as fichas
		paradas — e isso é desempenho, não estética: sinal parado não
		reinvalida o desenho do SVG.
	*/
	.arco__sinal {
		animation: pic-sinal 5.6s linear infinite;
	}

	.arco--conteudo .arco__sinal {
		animation-delay: 1.4s;
	}

	.arco--estrutura .arco__sinal {
		animation-delay: 2.8s;
	}

	.arco--descoberta .arco__sinal {
		animation-delay: 4.2s;
	}
}

@keyframes pic-sinal {
	0% {
		stroke-dashoffset: 0;
		opacity: 0;
	}

	7% {
		opacity: 0.95;
	}

	26% {
		stroke-dashoffset: -100;
		opacity: 0.95;
	}

	33%,
	100% {
		stroke-dashoffset: -100;
		opacity: 0;
	}
}

/* ---------- o núcleo ---------- */

.nucleo {
	position: absolute;
	top: 36.5%;
	left: 36.5%;
	display: grid;
	width: 27%;
	height: 27%;
	place-items: center;
	transform: translate3d(
		calc(var(--pic-px, 0) * 3px),
		calc(var(--pic-py, 0) * 2px),
		0
	);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/*
	A atmosfera do núcleo, e ela faz DUAS coisas numa camada só.

	A de cima é o brilho — azul e ciano, a assinatura da seção. A de baixo é
	uma CLAREIRA escura, e ela existe por causa da chuva de código: sem
	escurecer o que está atrás, os caracteres passam por baixo do disco e
	disputam com o nome da marca. É mais barato do que recortar a máscara do
	canvas e não depende de onde a caixa dele começa.
*/
.nucleo::before {
	content: "";
	position: absolute;
	inset: -30%;
	pointer-events: none;
	border-radius: 50%;
	background: radial-gradient(
			circle at 50% 50%,
			rgba(84, 129, 255, 0.2) 0 34%,
			rgba(18, 228, 255, 0.1) 50%,
			transparent 68%
		),
		radial-gradient(
			circle at 50% 50%,
			rgba(20, 20, 27, 0.92) 0 30%,
			rgba(20, 20, 27, 0.6) 46%,
			transparent 66%
		);
}

/*
	O ANEL: o que brilha é a BORDA, não o miolo. Disco chapado de luz vira
	mancha; corpo escuro com borda acesa lê como corpo com atmosfera — e foi
	assim que a referência desenhou.

	O fio de 1 px em gradiente cônico sai do truque de `mask-composite`: dois
	retângulos de máscara, um na caixa de conteúdo e outro na caixa inteira,
	subtraídos um do outro. É o único jeito de ter borda em gradiente sem
	empilhar duas caixas.
*/
.nucleo__anel {
	position: absolute;
	inset: 0;
	padding: 1px;
	border-radius: 50%;
	background: conic-gradient(
		from 200deg,
		var(--pic-ciano),
		var(--pic-azul) 28%,
		var(--pic-roxo) 52%,
		var(--pic-azul) 74%,
		var(--pic-ciano)
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.nucleo__dentro {
	position: relative;
	z-index: 1;
	display: grid;
	width: 100%;
	height: 100%;
	padding: 0 11%;
	align-content: center;
	justify-items: center;
	gap: 0.4em;
	border-radius: 50%;
	background: radial-gradient(
		circle at 50% 38%,
		rgba(36, 36, 45, 0.96),
		rgba(23, 23, 30, 0.94) 70%,
		rgba(20, 20, 27, 0.92)
	);
	text-align: center;
}

.nucleo__marca {
	font-size: 1.5em;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.1;
	color: var(--pic-texto);
}

.nucleo__estado {
	font-size: 0.78em;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1.35;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

@media (prefers-reduced-motion: no-preference) {
	/*
		A seção respira sem ninguém tocar nela — regra 6 da linguagem do site.
		O anel gira em `rotate`, que o compositor resolve sozinho; a atmosfera
		cresce e diminui em ciclo próprio, para os dois nunca baterem juntos.
	*/
	.nucleo::before {
		animation: pic-nucleo-respira 9s ease-in-out infinite alternate;
	}

	.nucleo__anel {
		animation: pic-nucleo-gira 48s linear infinite;
	}
}

@keyframes pic-nucleo-respira {
	from {
		opacity: 0.72;
		scale: 1;
	}

	to {
		opacity: 1;
		scale: 1.07;
	}
}

@keyframes pic-nucleo-gira {
	to {
		rotate: 360deg;
	}
}

/* ---------- as quatro peças ---------- */

.peca {
	position: absolute;

	/*
		A perspectiva das peças mora aqui; o ângulo, na face. Ver abaixo.

		Encurtada de 480 para 380 px em 22/09/2026, a pedido do cliente
		("aumente a perspectiva"). Perspectiva CURTA é perspectiva FORTE: ela é
		a distância do olho ao plano, e quanto menor, mais a borda longe
		encolhe. Com a peça em ~222 px e o giro em 17°, a razão entre a borda
		perto e a borda longe passa de 1,14 para 1,20 — a referência da Juliana
		está em 1,15.
	*/
	perspective: 380px;

	/*
		CADA PEÇA RESPONDE AO PONTEIRO DO SEU JEITO (pedido do cliente).

		Antes as quatro liam a mesma ficha com o mesmo coeficiente, e o
		resultado era exatamente o que ele descreveu: não parecia que as peças
		se moviam, parecia que o FUNDO deslizava. Quatro objetos que andam
		juntos e na mesma medida o olho lê como um objeto só.

		Agora cada uma tem o seu par de coeficientes, **com sinais
		diferentes**: umas acompanham o ponteiro, outras vão contra; umas puxam
		para o centro da composição, outras para fora. E o tempo de resposta
		também muda por peça, então nem a inércia é a mesma. É o que faz quatro
		peças soltas no mesmo ambiente em vez de uma chapa só.
	*/
	transform: translate3d(
		calc(var(--pic-px, 0) * var(--pic-pu, 14px)),
		calc(var(--pic-py, 0) * var(--pic-pv, 10px)),
		0
	);
	transition: transform var(--pic-inercia, 0.9s) cubic-bezier(0.22, 1, 0.36, 1);
}

/*
	**Suavizado em 22/09/2026**, a pedido do cliente: o movimento estava certo
	no desenho e intenso demais na mão. As amplitudes caíram para cerca de 45%
	— o maior deslocamento foi de 22 para 10 px — e os tempos subiram um
	quarto.

	Os dois lados da conta importam, e por motivos diferentes. A amplitude é o
	QUANTO; o tempo é o COMO. Com o tempo mais longo a peça passa mais tempo a
	caminho do alvo do que parada nele, e é isso que lê como arrastar em vez de
	saltar — a cada movimento do ponteiro a transição recomeça de onde a peça
	está, então quanto mais longa, mais ela fica atrás do ponteiro.

	A independência entre as quatro **não mudou**: os sinais continuam cruzados
	e as inércias continuam diferentes. O que se pediu foi baixar o volume, não
	sincronizar de novo.
*/

/* Horizontal contra o ponteiro, vertical a favor — e a mais lenta das quatro. */
.peca--identidade {
	--pic-pu: -7px;
	--pic-pv: 5px;
	--pic-inercia: 1.5s;
}

/* A que mais acompanha o ponteiro na horizontal, e a mais rápida. */
.peca--conteudo {
	--pic-pu: 10px;
	--pic-pv: -4px;
	--pic-inercia: 1.1s;
}

/* A favor na horizontal, contra na vertical: cruza com a de cima. */
.peca--estrutura {
	--pic-pu: 6px;
	--pic-pv: -8px;
	--pic-inercia: 1.35s;
}

/* Contra na horizontal, a favor na vertical: cruza com a da esquerda. */
.peca--descoberta {
	--pic-pu: -9px;
	--pic-pv: 7px;
	--pic-inercia: 1.2s;
}

/*
	As posições são as mesmas porcentagens do quadro de 100×100 do SVG dos
	arcos. Mexer numa peça sem mexer no arco dela é o erro que essa
	correspondência existe para deixar à vista.
*/
.peca--identidade {
	top: 15%;
	left: 3%;
	width: 33%;
	height: 21%;
}

.peca--conteudo {
	top: 17%;
	left: 64%;
	width: 33%;
	height: 21%;
}

.peca--estrutura {
	top: 62%;
	left: 5%;
	width: 31%;
	height: 22%;
}

.peca--descoberta {
	top: 60%;
	left: 63%;
	width: 33%;
	height: 21%;
}

/*
	A PERSPECTIVA DAS PEÇAS (pedido do cliente, 22/09/2026).

	Na referência da Juliana as quatro peças não estão de frente: elas estão
	inclinadas, e é isso que dá profundidade à seção. Medido na própria imagem,
	pelas bordas de cada card: **as quatro convergem para o centro** — as da
	esquerda com o lado direito recuando, as da direita com o lado esquerdo. Os
	cards ficam como painéis curvando por trás do núcleo, e não como quatro
	retângulos soltos.

	A perspectiva é CURTA (480 px para uma peça de ~220 px) porque o efeito da
	referência é forte: a razão entre a borda perto e a borda longe lá é de
	cerca de 1,15, e com perspectiva longa isso não se alcança sem ângulo
	absurdo. A conta: razão = (P + (L/2)·sen θ) / (P − (L/2)·sen θ).

	`perspective` na PEÇA e `transform` na FACE — nunca `preserve-3d` no
	contêiner. Cada peça é um espaço 3D fechado em si, e o recorte de quem está
	em volta continua valendo. É a mesma regra do painel da abertura.
*/
.peca__face {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	overflow: clip; /* clip, não hidden: hidden vira contêiner de rolagem e prende a view() de quem está dentro — ver 30-tecnologia.md */
	border-radius: 0.45em;
	color: var(--pic-tom-peca, var(--pic-azul));

	/*
		O ÂNGULO É O PRODUTO de duas coisas: as fichas que a animação move e o
		multiplicador que o hover move. Ver o bloco da flutuação, abaixo — a
		razão de ser assim está toda lá, e ela é a diferença entre vir suave
		para o prumo e saltar.

		`transform` NÃO entra na lista de transições: ele muda a cada quadro
		por causa da animação, e transicionar uma propriedade que já está sendo
		animada faria a peça correr atrás do próprio rastro. Quem transiciona é
		`--pic-prumo`, que é um número.

		`scale` é propriedade separada de `transform`, então cresce sem
		disputar nada. A ordem que o navegador aplica é
		translate → rotate → scale → transform.
	*/
	scale: 1;
	transform: rotateY(calc(var(--pic-gy, 0deg) * var(--pic-prumo, 1)))
		rotateX(calc(var(--pic-gx, 0deg) * var(--pic-prumo, 1)))
		rotateZ(calc(var(--pic-gz, 0deg) * var(--pic-prumo, 1)));
	transition: --pic-prumo 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		scale 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease,
		box-shadow 0.35s ease;

	/*
		A chapa é OPACA o bastante para a chuva não atravessar o desenho. A
		chuva continua aparecendo em volta, que é o lugar dela: profundidade,
		não superfície. Desde 23/09/2026 ela é o grafite escuro, sem o vidro
		cinza-azulado de antes: quem dá cor à peça é o desenho, como nos
		ícones dos momentos.
	*/
	background: rgba(20, 21, 30, 0.94);
	box-shadow: 0 0.7em 1.8em rgba(0, 0, 0, 0.45);
}

/*
	O ACESO. Uma camada por cima, em opacidade, e não a troca da borda: assim
	o estado de repouso continua inteiro por baixo e a transição é de uma
	propriedade só.

	`--pic-aceso` é escrito lá embaixo, no palco, porque ele precisa alcançar
	DOIS lugares que não são parentes: a peça e o arco dela.
*/
.peca__face::after {
	content: "";
	position: absolute;
	inset: -1px;
	pointer-events: none;
	border: 1px solid rgba(18, 228, 255, 0.55);
	border-radius: inherit;
	box-shadow: 0 0 2.4em -0.2em rgba(18, 228, 255, 0.5);
	opacity: var(--pic-aceso, 0);
	transition: opacity 0.35s ease;
}

/*
	O DESENHO DA PEÇA (23/09/2026). Mesmo vocabulário dos ícones dos momentos
	— `.desenho__*`, definido lá em cima —, para as duas seções conversarem.

	A COR de cada peça sai do gradiente expandido, que é a assinatura do AI
	Ready (V5), do roxo ao ciano, na ordem das camadas. A ponta roxa foi
	clareada para lilás: o roxo do manual dá 2,96:1 sobre o grafite, e um
	traço de 1 px nele sumiria. Aqui a cor é traço e véu — nunca texto.
*/
.peca--identidade {
	--pic-tom-peca: #a37dff;
}

.peca--conteudo {
	--pic-tom-peca: #7f88ff;
}

.peca--estrutura {
	--pic-tom-peca: #4f9dff;
}

.peca--descoberta {
	--pic-tom-peca: #26d4ff;
}

.peca .desenho {
	width: 100%;
	height: 100%;

	/*
		A peça tem ~222 px para 200 unidades: traço de 1 dá ~1,1 px, a mesma
		espessura dos ícones dos momentos na tela larga.
	*/
	stroke-width: 1;
}

/*
	No celular a peça tem ~111 px: com traço 1 a linha saía com 0,55 px e os
	detalhes sumiam. Com 1,7, ~0,95 px — a mesma conta dos ícones dos momentos.
*/
@media (max-width: 59.99rem) {
	.peca .desenho {
		stroke-width: 1.7;
	}
}

/* O nome da peça do site e as chaves dos dados: texto do desenho, não conteúdo. */
.desenho__rotulo {
	fill: var(--pic-texto-2);
	stroke: none;
	font-size: 9px;
	font-weight: 600;
}

.desenho__codigo {
	fill: currentcolor;
	stroke: none;
	font-size: 14px;
	font-weight: 500;
	text-anchor: middle;
	opacity: 0.8;
}

/*
	O traço se desenha quando a peça entra na tela, e termina quando ela está
	INTEIRA na tela (`entry 100%`) — e não com o centro no meio, que é a
	armadilha medida duas vezes nesta sessão: bloco parado abaixo do meio da
	tela nunca terminava a animação.
*/
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.peca .desenho__t {
			stroke-dasharray: 620;
			stroke-dashoffset: 620;
			animation: pic-peca-traco linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 100%;
		}
	}
}

@keyframes pic-peca-traco {
	to {
		stroke-dashoffset: 0;
	}
}

/* ---------- a perspectiva que flutua, e o prumo que responde ao ponteiro ---------- */

/*
	**O problema que esta estrutura existe para resolver.**

	O cliente quer duas coisas que, do jeito óbvio, se excluem: a perspectiva
	de cada peça se movendo o tempo todo, *e* a peça vindo suave para o prumo
	quando a camada correspondente recebe o ponteiro.

	Do jeito óbvio — inclinação dentro dos quadros-chave e `animation: none` no
	hover — não funciona, e isso foi MEDIDO aqui antes: quando a animação some,
	o estilo "de antes" que a transição usa como ponto de partida é o valor
	BASE, não o que a animação estava entregando. A transição de `transform`
	nem chega a nascer e a peça salta para o prumo num quadro só.
	`getAnimations()` na face devolvia só a entrada de `scale`.

	**A saída é não transicionar o ângulo, e sim um MULTIPLICADOR dele.**

	- a animação move `--pic-gy`, `--pic-gx` e `--pic-gz`, que são os ângulos;
	- a declaração move `--pic-prumo`, de 1 a 0, e ela é quem transiciona;
	- o `transform` é o produto dos dois.

	Com `--pic-prumo` em 0 o produto é zero exato — prumo de verdade, não "quase
	de frente". E como quem transiciona é um número, e não a propriedade que a
	animação está usando, não há disputa: as duas convivem.

	As fichas precisam ser REGISTRADAS com `@property`. Ficha de tipo desconhecido
	não interpola: ela trocaria de valor de um quadro-chave para o outro, aos
	saltos, que é o contrário do que se quer aqui.

	**O que isso custa:** animação de ficha registrada não roda no compositor,
	roda na linha principal. São quatro peças e três fichas cada. Medido depois
	de pronto: 60,5 fps, igual ao que a seção já dava.
*/
@property --pic-gy {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --pic-gx {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --pic-gz {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@property --pic-prumo {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

/*
	Os ângulos base, para quando a animação não roda — movimento reduzido, ou
	navegador sem `@property`. A peça fica inclinada e parada, que é o desenho
	da composição: a perspectiva não é efeito, é a forma.

	As quatro convergem para o centro, como na referência da Juliana, medida
	card a card: as da esquerda com o lado direito recuando (`rotateY` positivo
	manda a borda direita para trás), as da direita com o lado esquerdo.
*/
.peca--identidade > .peca__face {
	--pic-gy: 17deg;
	--pic-gx: 2deg;
	--pic-gz: 1.4deg;
}

.peca--conteudo > .peca__face {
	--pic-gy: -17deg;
	--pic-gx: 2.4deg;
	--pic-gz: -1.4deg;
}

.peca--estrutura > .peca__face {
	--pic-gy: 16deg;
	--pic-gx: -2deg;
	--pic-gz: 1deg;
}

.peca--descoberta > .peca__face {
	--pic-gy: -16deg;
	--pic-gx: -2.2deg;
	--pic-gz: -1deg;
}

/*
	A FLUTUAÇÃO. Cada peça percorre o seu próprio caminho de ângulos, em ciclo
	próprio, e os quatro caminhos são diferentes de propósito — dois eixos
	andando em fases distintas fazem a peça parecer boiando, e não oscilando
	num vaivém.

	`alternate` com três paradas, e não um ida-e-volta de duas: com duas, o olho
	pega o compasso em um ciclo. Com três, o caminho de volta passa por um ponto
	que o de ida não visitou no mesmo instante.
*/
@media (prefers-reduced-motion: no-preference) {
	.peca--identidade > .peca__face {
		animation: pic-flutua-identidade 22s ease-in-out infinite alternate;
	}

	.peca--conteudo > .peca__face {
		animation: pic-flutua-conteudo 26s ease-in-out infinite alternate;
	}

	.peca--estrutura > .peca__face {
		animation: pic-flutua-estrutura 19s ease-in-out infinite alternate;
	}

	.peca--descoberta > .peca__face {
		animation: pic-flutua-descoberta 24s ease-in-out infinite alternate;
	}
}

@keyframes pic-flutua-identidade {
	0% {
		--pic-gy: 12deg;
		--pic-gx: 3.4deg;
		--pic-gz: 2deg;
	}

	55% {
		--pic-gy: 21deg;
		--pic-gx: -1.6deg;
		--pic-gz: 0.6deg;
	}

	100% {
		--pic-gy: 15deg;
		--pic-gx: 2.2deg;
		--pic-gz: 1.8deg;
	}
}

@keyframes pic-flutua-conteudo {
	0% {
		--pic-gy: -20deg;
		--pic-gx: 1.2deg;
		--pic-gz: -0.7deg;
	}

	45% {
		--pic-gy: -12.5deg;
		--pic-gx: 3.8deg;
		--pic-gz: -2deg;
	}

	100% {
		--pic-gy: -18deg;
		--pic-gx: -1.8deg;
		--pic-gz: -1.2deg;
	}
}

@keyframes pic-flutua-estrutura {
	0% {
		--pic-gy: 19deg;
		--pic-gx: -3.2deg;
		--pic-gz: 0.4deg;
	}

	60% {
		--pic-gy: 11.5deg;
		--pic-gx: 1.4deg;
		--pic-gz: 1.9deg;
	}

	100% {
		--pic-gy: 17deg;
		--pic-gx: -2.4deg;
		--pic-gz: 0.9deg;
	}
}

@keyframes pic-flutua-descoberta {
	0% {
		--pic-gy: -13deg;
		--pic-gx: -3deg;
		--pic-gz: -1.9deg;
	}

	50% {
		--pic-gy: -20.5deg;
		--pic-gx: 1.8deg;
		--pic-gz: -0.3deg;
	}

	100% {
		--pic-gy: -15deg;
		--pic-gx: -2.2deg;
		--pic-gz: -1.3deg;
	}
}

/*
	O PRUMO: a peça perde a perspectiva E o movimento quando a camada
	correspondente recebe o ponteiro, e cresce um pouco.

	**É isso que explica a relação entre os dois lados sem escrever uma
	palavra.** Três coisas acontecem juntas e todas apontam para a mesma peça:
	ela para de flutuar, vira de frente e cresce. Das quatro, é a única que
	está olhando para o visitante.

	A flutuação é PAUSADA, não desligada: pausada, ela congela onde está e volta
	de onde parou quando o ponteiro sai. E com `--pic-prumo` em 0 o ângulo
	congelado não aparece — ele volta a valer sozinho enquanto o multiplicador
	sobe de novo para 1.

	Por que quatro blocos e não um só: o CSS não sabe "qual", ele sabe "esta".
	A peça e a camada vivem em subárvores diferentes da seção, e cada par
	precisa do seu par de seletores.
*/
@media (hover: hover) and (pointer: fine) {
	.ai-ready__env:has(.camada--identidade:hover) .peca--identidade,
	.ai-ready__env:has(.camada--identidade .camada__caixa:focus-visible)
		.peca--identidade,
	.peca--identidade:hover,
	.ai-ready__env:has(.camada--conteudo:hover) .peca--conteudo,
	.ai-ready__env:has(.camada--conteudo .camada__caixa:focus-visible)
		.peca--conteudo,
	.peca--conteudo:hover,
	.ai-ready__env:has(.camada--estrutura:hover) .peca--estrutura,
	.ai-ready__env:has(.camada--estrutura .camada__caixa:focus-visible)
		.peca--estrutura,
	.peca--estrutura:hover,
	.ai-ready__env:has(.camada--descoberta:hover) .peca--descoberta,
	.ai-ready__env:has(.camada--descoberta .camada__caixa:focus-visible)
		.peca--descoberta,
	.peca--descoberta:hover {
		animation-play-state: paused;
	}

	.ai-ready__env:has(.camada--identidade:hover) .peca--identidade > .peca__face,
	.ai-ready__env:has(.camada--identidade .camada__caixa:focus-visible)
		.peca--identidade
		> .peca__face,
	.peca--identidade:hover > .peca__face,
	.ai-ready__env:has(.camada--conteudo:hover) .peca--conteudo > .peca__face,
	.ai-ready__env:has(.camada--conteudo .camada__caixa:focus-visible)
		.peca--conteudo
		> .peca__face,
	.peca--conteudo:hover > .peca__face,
	.ai-ready__env:has(.camada--estrutura:hover) .peca--estrutura > .peca__face,
	.ai-ready__env:has(.camada--estrutura .camada__caixa:focus-visible)
		.peca--estrutura
		> .peca__face,
	.peca--estrutura:hover > .peca__face,
	.ai-ready__env:has(.camada--descoberta:hover) .peca--descoberta > .peca__face,
	.ai-ready__env:has(.camada--descoberta .camada__caixa:focus-visible)
		.peca--descoberta
		> .peca__face,
	.peca--descoberta:hover > .peca__face {
		--pic-prumo: 0;

		animation-play-state: paused;
		scale: 1.07;
	}
}

/* ---------- os sinais ---------- */

/*
	O que cada camada PRODUZ para a máquina. À esquerda o visitante lê o que a
	Pictore faz; aqui, o que aquilo vira.

	A cor é `--pic-texto-3`: 7,12:1 sobre o grafite. Na referência estes
	rótulos foram medidos entre 2,49:1 e 4,81:1 — elegantes justamente por
	quase não existirem, e ilegíveis por isso. O piso para texto pequeno é
	4,5:1.

	O corpo tem piso em `rem` porque o resto da composição encolhe em `em` com
	o palco: desenho pode ficar pequeno, texto não.
*/
.composicao__sinais {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	pointer-events: none;
	/*
		Baixado junto com as peças (22/09/2026). A camada dos rótulos era a que
		mais andava, de propósito — é a mais próxima do olho. Deixá-la em 20 px
		com as peças em 10 inverteria a leitura: o rótulo viraria a coisa mais
		móvel da tela, e rótulo é legenda, não protagonista.
	*/
	transform: translate3d(
		calc(var(--pic-px, 0) * 10px),
		calc(var(--pic-py, 0) * 7px),
		0
	);
	transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.sinal {
	position: absolute;
	max-width: 27%;
	font-size: max(0.68rem, 0.8em);
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.5;
	text-transform: uppercase;
	color: var(--pic-texto-3);

	/*
		Os rótulos moram na BORDA da clareira, que é onde a chuva volta a
		aparecer. A sombra é o piso de contraste deles: sem ela, a razão
		medida contra o fundo vale só onde não passa caractere nenhum.
		Estática, pintada uma vez — não é `filter`, não custa quadro.
	*/
	transition: color 0.35s ease;
}

.sinal__ponto {
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.5em;
	border-radius: 50%;
	background: var(--pic-ciano);
	opacity: calc(0.45 + 0.55 * var(--pic-aceso, 0));
	vertical-align: middle;
	transition: opacity 0.35s ease;
}

.sinal--identidade {
	top: 0;
	left: 1%;
}

.sinal--conteudo {
	top: 2%;
	right: 1%;
	text-align: right;
}

.sinal--estrutura {
	bottom: 4%;
	left: 1%;
}

.sinal--descoberta {
	right: 0;
	bottom: 1%;
	text-align: right;
}

/*
	O sétimo termo da direção. Não pertence a camada nenhuma: é o que o
	conjunto produz, e por isso fecha a composição embaixo do núcleo.
*/
.composicao__saida {
	position: absolute;
	right: 0;
	bottom: -2%;
	left: 0;
	margin: 0;
	font-size: max(0.68rem, 0.8em);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
	color: var(--pic-texto-3);
}

/*
	A CHAPA DO RÓTULO, e ela existe por uma medição, não por gosto.

	Os rótulos moram nos cantos, fora do alcance da clareira, e ali a chuva
	corre com força total. Medido com o rótulo escondido e visível no mesmo
	ponto: com uma CABEÇA BRANCA da chuva passando atrás, o contraste caía
	para **1,23:1** — pior que o pior rótulo da referência. Halo de texto não
	resolve isso: a cabeça da chuva é branca, e nenhuma quantidade de brilho
	no texto vence branco atrás de cinza.

	Quem resolve é dar ao rótulo um fundo PRÓPRIO. Com 0,9 de opacidade, o
	pior caso passa a ser 0,9 de grafite sobre branco — e a conta fecha em
	5,9:1, acima do piso de 4,5:1 de texto pequeno.

	**E a chapa é EM LINHA, com `box-decoration-break: clone`.** No `<li>`, que
	é bloco, ela pintaria o retângulo inteiro da caixa, inclusive o vazio à
	direita da segunda linha, curta — um bloco escuro com degrau no meio. Em
	linha, a chapa acompanha cada linha do texto e some junto com ela.
*/
.sinal__texto,
.composicao__saida .sinal__texto {
	display: inline;
	padding: 0.25em 0.5em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	border-radius: 0.3em;
	background: rgba(20, 20, 27, 0.9);
}

/* ---------- os dois lados acendem juntos ---------- */

/*
	Passar o ponteiro numa camada acende a peça dela e o arco dela, do outro
	lado da seção — e passar o ponteiro na peça faz o mesmo.

	Era a crítica que sobrou dos cartões: "estão isolados e sem contexto". A
	ligação não se explica com uma legenda, se mostra.

	A ficha é escrita no PALCO porque precisa chegar a dois lugares que não são
	parentes — a peça e o arco dela vivem em subárvores diferentes. E cada
	camada precisa da sua regra: o CSS não sabe "qual", ele sabe "esta".
*/
@media (hover: hover) and (pointer: fine) {
	.ai-ready__env:has(.camada--identidade:hover) .composicao__palco,
	.ai-ready__env:has(.camada--identidade .camada__caixa:focus-visible)
		.composicao__palco,
	.composicao__palco:has(.peca--identidade:hover) {
		--aceso-identidade: 1;
	}

	.ai-ready__env:has(.camada--conteudo:hover) .composicao__palco,
	.ai-ready__env:has(.camada--conteudo .camada__caixa:focus-visible)
		.composicao__palco,
	.composicao__palco:has(.peca--conteudo:hover) {
		--aceso-conteudo: 1;
	}

	.ai-ready__env:has(.camada--estrutura:hover) .composicao__palco,
	.ai-ready__env:has(.camada--estrutura .camada__caixa:focus-visible)
		.composicao__palco,
	.composicao__palco:has(.peca--estrutura:hover) {
		--aceso-estrutura: 1;
	}

	.ai-ready__env:has(.camada--descoberta:hover) .composicao__palco,
	.ai-ready__env:has(.camada--descoberta .camada__caixa:focus-visible)
		.composicao__palco,
	.composicao__palco:has(.peca--descoberta:hover) {
		--aceso-descoberta: 1;
	}

	.peca--identidade,
	.arco--identidade,
	.sinal--identidade {
		--pic-aceso: var(--aceso-identidade, 0);
	}

	.peca--conteudo,
	.arco--conteudo,
	.sinal--conteudo {
		--pic-aceso: var(--aceso-conteudo, 0);
	}

	.peca--estrutura,
	.arco--estrutura,
	.sinal--estrutura {
		--pic-aceso: var(--aceso-estrutura, 0);
	}

	.peca--descoberta,
	.arco--descoberta,
	.sinal--descoberta {
		--pic-aceso: var(--aceso-descoberta, 0);
	}
}

/* ---------- a composição nas telas menores ---------- */

/*
	Abaixo de 72rem a coluna da direita não tem mais largura para a composição
	sem apertar a coluna de leitura, então ela desce para baixo do texto,
	centrada e menor. A seção cresce, e tudo bem: é uma seção de fluxo, não um
	palco preso à rolagem.
*/
@media (max-width: 71.99rem) {
	.composicao {
		width: min(100%, 34rem);
		justify-self: center;
	}
}

/*
	No celular os sinais SAEM.

	Com o palco em 340 px, um rótulo de 27% de largura teria 90 px para
	"Estrutura que organiza e dá sentido" — oito linhas de maiúsculas
	espacejadas. Sumir com eles não perde informação: sem ponteiro, os quatro
	cartões da esquerda já mostram a frase inteira de cada camada o tempo todo.
	O desenho fica, porque o desenho continua dizendo a mesma coisa sem
	palavra nenhuma.
*/
@media (max-width: 47.99rem) {
	.composicao__sinais,
	.composicao__saida {
		display: none;
	}

	.composicao {
		width: min(100%, 26rem);
	}
}