/* =========================================================================
   HERO "CÉU DA REVELAÇÃO" — camada extra, só na home
   Carregado depois de tema.css e só quando é a home.

   A arte é a FINAL, gerada por IA em 23/09 na direção do handoff 005A (fim de
   noite virando amanhecer, com estrelas). O contrato das camadas está em
   assets/hero/manifesto.json. Os SVG antigos, que eram placeholder, ficaram
   guardados em assets/hero/_placeholder-svg/.
   ⛔ Nada aqui esconde o título: quem esconde é o JS, e só quando ele roda.
   Sem JavaScript o hero aparece inteiro, parado e legível.
   ========================================================================= */

.bd-hero {
	position: relative;
	overflow: clip;
	min-height: 100vh;
	min-height: 100svh;
	background: var(--wp--preset--color--fundo);
	isolation: isolate;
}

/* O palco é o que o ScrollTrigger prende. Tudo mora dentro dele. */
.bd-hero__palco {
	position: relative;
	display: grid;
	min-height: inherit;
	align-content: center;

	/*
		⚠️ FAIXA CREMA NO TOPO — medido no site no ar em 24/09, no celular E no
		computador. O palco é um wp-block-group, então o WordPress lhe dá o
		"block gap" de 10,72px como margem de cima. Só que nada segura essa
		margem: .bd-hero, .wp-block-template-part, .wp-site-blocks e o <body>
		estão todos com margem, padding e borda zerados, então ela ATRAVESSA
		os quatro (colapso de margem) e empurra a página inteira 10,72px pra
		baixo. No vão aparecia o fundo do body, rgb(247,245,240) — uma tira
		creme por cima do céu.

		Zerar aqui devolve o topo: hero em 0, body em 0, o céu encosta.
		⛔ Não trocar por `display: flow-root` no .wp-site-blocks: testei, o
		body vai a 0 mas a página cresce 10px, porque aquilo só PRENDE a
		margem em vez de tirá-la — a tira continuaria, só que por dentro.
		⛔ O palco não precisa de margem nenhuma: ele já centraliza pelo grid.
	*/
	margin-block-start: 0;
}

/* ---------- as camadas ---------- */

.bd-hero__cena {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
	pointer-events: none;

	/* =====================================================================
	   ⭐ PONTO DE TROCA DA ARTE
	   Aqui está a arte gerada por IA (lote de 23/09/2026, direção do 005A: fim
	   de noite virando amanhecer). Trocar o arquivo de cada camada aqui muda o
	   hero inteiro de cara — sem tocar no HTML, no movimento e no JavaScript.
	   O contrato de cada camada (tamanho, transparência, briefing) está em
	   assets/hero/manifesto.json.

	   ⚠️ As duas nuvens apontam pro arquivo "-loop": é a MESMA arte aprovada,
	   costurada pra emendar na horizontal (fim encosta no começo sem degrau).
	   Sem ela o looping mostraria um corte vertical a cada volta. A original
	   continua ao lado, intacta.
	   ===================================================================== */
	--arte-ceu:           url("../hero/ceu.webp");
	--arte-luz:           url("../hero/luz.webp");
	--arte-nuvens-fundo:  url("../hero/nuvens-fundo-loop.webp");
	--arte-nuvens-frente: url("../hero/nuvens-frente-loop.webp");
	--arte-horizonte:     url("../hero/horizonte.webp");
	--arte-frente:        url("../hero/frente.webp");
}

/*
  Cada camada é maior que o quadro: a folga de cima e de baixo é o espaço que
  o parallax usa. Sem ela, a camada mais rápida mostraria a borda.
*/
.bd-camada {
	position: absolute;
	inset-inline: -4%;
	top: -14%;
	width: 108%;
	height: 128%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	user-select: none;
}

.bd-camada[data-camada="luz"]           { background-image: var(--arte-luz); }
.bd-camada[data-camada="horizonte"]     { background-image: var(--arte-horizonte); }
.bd-camada[data-camada="frente"]        { background-image: var(--arte-frente); }

/* ---------- a nuvem que atravessa sozinha, sem scroll ----------

   As duas camadas de nuvem NÃO pintam nada: quem pinta é o filho .bd-nuvem-
   esteira, e é ele que desliza em looping infinito.

   Como funciona, em uma frase: a esteira tem o DOBRO da largura da camada e
   carrega duas cópias do mesmo tile lado a lado; ela anda exatamente uma cópia
   e volta ao zero. Como o tile emenda na horizontal, o quadro no fim do passo é
   idêntico ao do começo — o olho não vê a volta, e não existe "tela acabou".

   Três coisas que parecem detalhe e não são:

   1. ⛔ A esteira é FILHA da camada, e a camada continua com 108% de largura.
      O GSAP move a nuvem-frente em xPercent, que é medido sobre a largura do
      próprio elemento: alargar a camada dobraria calado o deslocamento de
      rolagem que já foi aprovado.

   2. Anima a propriedade `translate`, não `transform`. O GSAP escreve em
      `transform`; uma @keyframes em `transform` ganharia da linha do GSAP e
      atropelaria o parallax. Em `translate` as duas convivem — o navegador
      soma. (Aqui a esteira nem é tocada pelo GSAP, mas a regra fica valendo:
      quem animar por CSS dentro do hero usa `translate`.)

   3. -50% de uma esteira de 200% = 100% da camada = uma cópia exata. Esse
      casamento é o looping. ⛔ Mexer em `width` ou em `background-size` sem
      mexer no outro quebra a emenda. */
.bd-nuvem-esteira {
	position: absolute;
	inset-block: 0;
	left: 0;
	width: 200%;
	background-repeat: repeat-x;
	background-position: 0 center;
	background-size: 50% 100%;
	animation: bd-nuvem-passa var(--volta, 180s) linear infinite;
}

@keyframes bd-nuvem-passa {
	from { translate: 0 0; }
	to   { translate: -50% 0; }
}

/* A de trás anda na metade da velocidade da da frente. É o mesmo truque de
   profundidade do parallax, só que no tempo em vez de no scroll. */
.bd-camada[data-camada="nuvens-fundo"] .bd-nuvem-esteira {
	background-image: var(--arte-nuvens-fundo);
	--volta: 240s;
}

.bd-camada[data-camada="nuvens-frente"] .bd-nuvem-esteira {
	background-image: var(--arte-nuvens-frente);
	--volta: 120s;
}

/* O céu não pode nunca deixar buraco: ele é o fundo de tudo, então é a única
   camada que estica (100% 100%) em vez de cortar (cover).
   A arte agora tem estrelas, e esticar deforma estrela — então foi medido, não
   chutado: 2.449 estrelas, mediana de 3x3px na arte de 2560x1440. Em 1440 a
   caixa do céu é 1653x1224, o que dá 1,94 x 2,55px esticado contra 2,55 x
   2,55px se fosse cover. Diferença de 0,6px numa estrela de 2,5px: não dá pra
   ver.
   ⛔ Trocar pra cover cortaria 24% da largura da arte e reenquadraria o
   amanhecer. O esticão fica. */
.bd-camada[data-camada="ceu"] {
	inset-inline: -8%;
	top: -18%;
	width: 116%;
	height: 136%;
	background-image: var(--arte-ceu);
	background-size: 100% 100%;
}

/* A luz soma com o céu em vez de tapar. */
.bd-camada[data-camada="luz"] {
	mix-blend-mode: screen;

	/* O amanhecer começa contido e cresce com o scroll. Este 0.82 é o valor
	   de repouso e precisa bater com o início do tween em hero-ceu.js — se
	   os dois discordarem, a luz dá um salto no primeiro pixel de rolagem. */
	opacity: 0.82;
}

/*
  A borda de baixo do hero entrega o quadro para a cor da página.
  É isso que faz a cena "ceder" para a home clean em vez de cortar.
*/
.bd-hero__dissolucao {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 1;
	height: 28vh;
	background: linear-gradient(
		to bottom,
		rgba(247, 245, 240, 0) 0%,
		rgba(247, 245, 240, 0.55) 52%,
		var(--wp--preset--color--fundo) 100%
	);
	pointer-events: none;
}

/* ---------- o texto ---------- */

.bd-hero__texto {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--60);
}

.bd-hero__titulo {
	max-width: 14ch;
	margin: 0;
	font-family: var(--wp--preset--font-family--editorial);
	font-size: var(--wp--preset--font-size--cartaz);
	font-weight: 500;
	line-height: 1.02;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--texto);
}

.bd-hero__frase {
	max-width: 30ch;
	margin: var(--wp--preset--spacing--30) 0 0;
	font-size: var(--wp--preset--font-size--grande);
	line-height: 1.45;
	color: var(--wp--preset--color--texto);
}

/* Fio curto entre o título e a frase — o mesmo gesto do resto do site. */
.bd-hero__fio {
	width: 56px;
	height: 2px;
	margin-top: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--terracota);
	transform-origin: left center;
}

/* ---------- chamada para descer ----------

   ⚠️ A COR AQUI FOI MEDIDA, NÃO ESCOLHIDA (handoff 006 §1.1).

   Este é o único texto miúdo do site que cai em cima da arte em movimento, e o
   fundo dele não é uma cor: é nuvem passando por baixo do véu da dissolução. Por
   isso a conta é feita no PIOR pixel — basta uma letra cair no pixel ruim pra ela
   sumir. Média não vale nada aqui.

   Medição: navegador real, link escondido, esteira congelada em 0/10/20/30/40%
   da volta, 8 larguras (1440→320). 137.640 pixels de fundo. Pior contraste:

       #6F7378  cinza global, o de antes ....... 3,04:1   reprova AA
       #5A5E63  alvo inicial do handoff ........ 4,16:1   reprova AA
       #565A5F  ................................ 4,42:1   reprova AA
   ✅  #52565B  cinza-forte, o que está em uso .. 4,70:1   passa (mínimo 4,5:1)

   O alvo que o handoff sugeriu não dá conta: o fundo no celular é mais escuro
   que no desktop e derruba os dois primeiros. #52565B é o mais CLARO da família
   que ainda passa em todas as larguras — escurecer mais só tiraria discrição.

   ⛔ O token global `cinza` (#6F7378) continua #6F7378 e não foi tocado; quem
   mudou foi só este elemento, com um token novo ao lado. ⛔ Não volte a usar
   `--wp--preset--color--cinza` aqui.

   Ressalva registrada: a seta respira até opacity .65, e nesse instante ela dá
   ~2,6:1. Ela é decorativa (aria-hidden, o texto do lado diz a mesma coisa), e o
   ritmo da respiração já foi aprovado — então não mexi. Se um dia quiserem 3:1
   também na seta, o caminho é subir o piso da @keyframes de .65 para .80. */

.bd-hero__descer {
	position: absolute;
	z-index: 2;
	left: 50%;
	bottom: clamp(1.5rem, 5vh, 3rem);
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	transform: translateX(-50%);
	color: var(--wp--preset--color--cinza-forte);
	font-size: var(--wp--preset--font-size--miudo);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.bd-hero__descer svg {
	width: 14px;
	height: 14px;
	animation: bd-respirar 2.6s ease-in-out infinite;
}

@keyframes bd-respirar {
	0%, 100% { transform: translateY(0);    opacity: 0.65; }
	50%      { transform: translateY(5px);  opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
	.bd-hero__descer:hover {
		color: var(--wp--preset--color--oliva);
	}
}

/* ---------- a primeira seção da home, que recebe a cena ---------- */

.bd-entrada {
	position: relative;
	z-index: 3;
	background: var(--wp--preset--color--fundo);
}

/* =========================================================
   CELULAR — altura menor, menos camada, sem pin prolongado
   (o "sem pin" quem decide é o JS; aqui é só a aparência)
   ========================================================= */

@media (max-width: 768px) {
	.bd-hero {
		min-height: 78vh;
		min-height: 78svh;
	}

	.bd-hero__titulo {
		max-width: 11ch;
	}

	.bd-hero__frase {
		max-width: 26ch;
		font-size: var(--wp--preset--font-size--medio);
	}

	/* Menos camada no celular: a de fundo some, a de frente fica.
	   Menos pixel pra compor e a profundidade continua de pé. */
	.bd-camada[data-camada="nuvens-fundo"] {
		display: none;
	}

	.bd-hero__dissolucao {
		height: 22vh;
	}

	.bd-hero__descer {
		left: var(--wp--preset--spacing--30);
		transform: none;
	}
}

/* =========================================================
   MENOS MOVIMENTO — obrigatório
   O hero vira um quadro fixo e legível. Nada se mexe.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.bd-hero {
		min-height: 72vh;
		min-height: 72svh;
	}

	.bd-hero__descer svg {
		animation: none;
	}

	/* A nuvem para de atravessar. Quem pede menos movimento está pedindo
	   exatamente isto: movimento que anda sozinho, sem o dedo da pessoa, é o
	   pior tipo pra quem tem enjoo de tela. O `translate: none` não é enfeite —
	   sem ele a nuvem congelaria no meio do passo, com a emenda possivelmente
	   no meio da tela. Parada, ela volta pro quadro de origem. */
	.bd-nuvem-esteira {
		animation: none !important;
		translate: none !important;
	}

	/* Se o JS tiver deixado transform residual, isto devolve tudo ao lugar. */
	.bd-camada,
	.bd-hero__titulo,
	.bd-hero__frase,
	.bd-hero__fio,
	.bd-hero__texto {
		transform: none !important;
		opacity: 1 !important;
	}

	/* ...menos a luz: o repouso dela é 0.82, não 1. Sem esta linha, quem
	   pediu menos movimento veria um amanhecer mais forte que o de todo
	   mundo — a regra de cima é para limpar resíduo, não para clarear. */
	.bd-camada[data-camada="luz"] {
		opacity: 0.82 !important;
	}
}