/*
	Os desenhos dos cinco momentos (`partes/desenho-momento.php`).

	Moravam em `home.css`; saíram para cá em 28/09/2026, quando Soluções
	passou a usar os mesmos desenhos no percurso. São a identidade de cada
	momento, e identidade não mora na folha de uma página. Aqui fica o
	vocabulário do desenho e a vida dele parado; como ele ENTRA (pela
	rolagem no palco da Home, pela chegada no celular, pela troca de camada
	em Soluções) continua na folha de cada página.
*/

.desenho {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;

	/*
		No celular o desenho tem de 112 a 208 px — menos que as 240 unidades
		dele —, e o traço de 1,6 é o que o mantém visível ali (0,75 a 1,4 px).
		Na tela larga ele desce para 0,75; ver o bloco do palco.
	*/
	stroke-width: 1.6;
}

/*
	O VOCABULÁRIO DOS ÍCONES (redesenhados em 23/09/2026).

	- `__t`: traço principal, que se desenha na rolagem.
	- `__sutil`: traço de apoio — guias, linhas de texto — a meia força.
	- `__area`: véu de superfície, a cor do momento a 8 %; `--forte` a 22 %,
	  para o ponto que o olho tem de pegar (o primeiro resultado, o dia
	  marcado, a cor principal da paleta).
	- `__fundo`: a peça da FRENTE tapa a de trás. Sem isto, o artigo e o
	  vídeo da autoridade se atravessavam como arame.
	- pontos e miúdos (`__pontos`, `__publico`, `__dias`, `__ancoras`,
	  `__estrela`, `__faisca`, `__digita`): preenchidos, sem traço.
*/
.desenho__sutil {
	opacity: 0.5;
}

.desenho__area {
	fill: currentcolor;
	stroke: none;
	opacity: 0.08;
}

.desenho__area--forte {
	opacity: 0.22;
}

/* A marca da prancheta: a peça mais cheia do desenho, é ela que se vê primeiro. */
.desenho__area--marca {
	opacity: 0.45;
}

/* Guias de construção: presentes, mas abaixo de tudo. */
.desenho__guias {
	opacity: 0.28;
}

.desenho__alcas {
	fill: currentcolor;
	stroke: none;
}

.desenho__fundo {
	fill: var(--pic-fundo);
	stroke: none;
}

.desenho__pontos,
.desenho__publico,
.desenho__dias,
.desenho__estrela,
.desenho__faisca,
.desenho__digita {
	fill: currentcolor;
	stroke: none;
}

.desenho__pontos,
.desenho__dias {
	opacity: 0.55;
}

.desenho__publico {
	opacity: 0.7;
}

.desenho__ancoras {
	fill: var(--pic-fundo);
}

.desenho__letra {
	fill: currentcolor;
	stroke: none;
	font-size: 34px;
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* ---------- a vida que não depende de rolagem nem de ponteiro ---------- */

/*
	O desenho respira: o pulso lateja, as ondas saem do núcleo, o laço gira.
	É o que responde a "e se ninguém mexer?" — a cena continua viva parada.
*/
@media (prefers-reduced-motion: no-preference) {
	/*
		`transform-box: fill-box` em quem pulsa e em quem irradia: sem ele o
		centro da escala é o do desenho inteiro (120, 120), e um ponto fora
		do meio pulsava ESCORREGANDO em direção ao centro. Os ícones novos
		têm pulsos e ondas em qualquer canto.
	*/
	.desenho__pulso {
		fill: currentcolor;
		animation: pic-pulso 3.4s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	.desenho__onda {
		transform-box: fill-box;
		transform-origin: center;
		animation: pic-onda 4.8s ease-out infinite;
	}

	/* A público entra no funil em ondas: cada ponto acende no seu tempo. */
	.desenho__publico circle {
		animation: pic-pulso 3.8s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	.desenho__publico circle:nth-child(2n) {
		animation-delay: 1.2s;
	}

	.desenho__publico circle:nth-child(3n) {
		animation-delay: 2.3s;
	}

	/* "Digitando…": a conversa que o funil gerou está acontecendo. */
	.desenho__digita circle {
		animation: pic-digita 1.6s ease-in-out infinite;
	}

	.desenho__digita circle:nth-child(2) {
		animation-delay: 0.2s;
	}

	.desenho__digita circle:nth-child(3) {
		animation-delay: 0.4s;
	}

	/* A faísca da IA cintila, sem pressa. */
	.desenho__faisca {
		animation: pic-pulso 4.2s ease-in-out infinite;
		transform-box: fill-box;
		transform-origin: center;
	}

	/* O ponteiro do medidor oscila perto do alto: performance viva. */
	.desenho__ponteiro {
		transform-origin: 120px 124px;
		animation: pic-ponteiro 5s ease-in-out infinite;
	}

	.desenho__onda:nth-child(2) {
		animation-delay: 1.6s;
	}

	.desenho__onda:nth-child(3) {
		animation-delay: 3.2s;
	}

	.desenho__laco {
		transform-origin: 120px 120px;
		animation: pic-gira 34s linear infinite;
	}

	.desenho__nucleo {
		fill: currentcolor;
	}
}

@keyframes pic-pulso {
	0%, 100% {
		opacity: 0.35;
		scale: 0.8;
	}

	50% {
		opacity: 1;
		scale: 1.15;
	}
}

@keyframes pic-onda {
	from {
		scale: 0.25;
		opacity: 0.9;
	}

	to {
		scale: 2.1;
		opacity: 0;
	}
}

@keyframes pic-digita {
	0%, 60%, 100% {
		opacity: 0.35;
	}

	30% {
		opacity: 1;
	}
}

@keyframes pic-ponteiro {
	0%, 100% {
		rotate: -6deg;
	}

	50% {
		rotate: 8deg;
	}
}

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

.desenho__nucleo {
	fill: currentcolor;
}