/**
 * Home Journey — tema visual do motor scroll-world (assets/js/home-journey-engine.js)
 * aplicado à home. Só mapeia os --sw-* do motor para os tokens que já existem em
 * home.css (body.home), sem duplicar valor nenhum — se a paleta da home mudar, este
 * arquivo acompanha sozinho.
 *
 * Carrega só na front page, depois de home.css (ver denner_site_enqueue_assets()).
 */

body.home .sw-root {
	--sw-bg: var(--paper);
	--sw-ink: var(--ink);
	--sw-ink-soft: var(--ink-3);
	--sw-accent: var(--color-blue, #2f50ff);
	--sw-rule: var(--rule);
	--sw-font-display: var(--font-display);
	--sw-font-body: var(--font-body);
	--sw-font-mono: var(--font-mono);
}

/* config.nav=false (home-journey.php) já tira a nav de dentro da topbar do
   motor, mas a topbar em si (div vazia, sem brand/cta) ainda seria montada e
   ficaria fixed:top:0 por cima do cabecalho real — display:none tira ela do
   layout e do caminho de clique de vez. */
body.home .sw-topbar {
	display: none;
}

/* Trilha de pontos (.sw-route, lado direito) é a navegação de etapas da home
   — com o rótulo sempre visível (não só no hover/etapa ativa) ela funciona
   como um stepper permanente, sem precisar de uma segunda barra fixa. */
body.home .sw-route__label {
	opacity: 1;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.92);
	border-color: var(--rule-soft);
}
body.home .sw-route__dot:not(.is-active) .sw-route__label {
	background: transparent;
	border-color: transparent;
	backdrop-filter: none;
	color: var(--ink-3);
	font-weight: 500;
}

/* Ponto ativo da trilha: um leve pulsar no anel, só pra sinalizar "aqui é
   onde você está" sem chamar mais atenção que o texto. Ligado só no ponto
   .is-active (ver dots.forEach em home-journey-engine.js) — os outros ficam
   parados. Desliga com prefers-reduced-motion (mesma regra do motor). */
@keyframes hj-route-pulse {
	0%, 100% {
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--sw-accent) 22%, transparent);
	}
	50% {
		box-shadow: 0 0 0 10px color-mix(in srgb, var(--sw-accent) 10%, transparent);
	}
}
body.home .sw-route__dot.is-active i {
	animation: hj-route-pulse 2.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
	body.home .sw-route__dot.is-active i {
		animation: none;
	}
}

/* "role para ver o núcleo evoluir": ficava sempre visível (só sumia
   perto do fim do scroll), competindo com o resto da cena. Some por
   padrão e só aparece, bem de leve, ao passar o mouse em cima do ícone —
   uma dica disponível pra quem procura, não um elemento fixo na tela.
   !important necessário: o motor grava opacity inline a cada frame de
   scroll (home-journey-engine.js), e só uma regra !important em folha de
   estilo (sem @layer) consegue vencer um inline style sem !important. */
body.home .sw-hint {
	opacity: 0 !important;
	transition: opacity 0.25s ease;
}
body.home .sw-hint:hover {
	opacity: 0.55 !important;
}
@media (prefers-reduced-motion: reduce) {
	body.home .sw-hint {
		transition: none;
	}
}

body.home .sw-btn--primary {
	background: var(--sw-accent);
	color: #fff;
}

body.home .sw-btn--ghost {
	color: var(--ink);
	border-color: var(--rule);
}

/* Bug real, não so ajuste fino: theme.css tem "img, picture, video { height:
   auto }" (reset global) e, por ser uma regra sem @layer, ela vence a regra
   do motor (que está em @layer sw) mesmo essa tendo height:100% — cascade
   layer sempre perde pra CSS fora de layer, não importa a especificidade.
   Resultado: a caixa do video ficava mais alta que o viewport (proporção
   nativa do clipe, 16:9) e sempre cortava por baixo (os pés do personagem),
   ignorando object-position. Aqui a gente restaura o height:100% com uma
   especificidade que bate o reset do tema. */
#denner-home-journey .sw-scene__video,
#denner-home-journey .sw-scene__still {
	height: 100%;
	max-width: none;
}

/* Cabecalho translucido enquanto o bloco do nucleo esta na tela (classe
   hj-active, ligada pelo IntersectionObserver em home-journey.php) — o video
   fixo do motor sempre esteve atras do cabecalho real (mesmo z-index menor),
   so nao aparecia porque o fundo dele era quase opaco. Troca o branco solido
   por um vidro leve: mantem o texto do menu legivel (o blur ja resolvia isso
   mesmo com pouca opacidade) e deixa a cabeca do personagem, que existe no
   quadro, aparecer por tras em vez de ser cortada visualmente. .is-scrolled
   (menu.js, dispara a ~12px de scroll) e sobrescrito aqui tambem, senao o
   header voltaria solido assim que o scroll comecasse. */
body.hj-active .site-header,
body.hj-active .site-header.is-scrolled {
	background: rgba(255, 255, 255, 0.32);
	box-shadow: none;
}

@media (min-width: 861px) {
	/* Com a caixa do video corrigida (regra acima) e o cabecalho translucido
	   (regra acima), o enquadramento nao precisa mais sacrificar a cabeca pra
	   mostrar os pes — 55% mostra o personagem inteiro, orelha a pata. Só
	   desktop: o motor já usa um enquadramento próprio (44%/46%) pros clipes
	   9:16 do celular, feito pra aquela proporção. */
	body.home .sw-scene__video,
	body.home .sw-scene__still {
		object-position: center 55%;
	}

	/* A cena "Início" é a única sem punch (título+corpo+3 fichas+CTA) — mais alta
	   que as demais etapas — e o motor sobrescreve o transform:translateY(-50%)
	   da base com um valor inline pequeno (a animação de fade da própria cena),
	   então "top" aqui é, na prática, o topo real do bloco, não um centro. Um
	   top:50% deixava sobrar conteúdo pra baixo do viewport (corpo e CTA
	   cortados). Sobe pra logo abaixo do cabeçalho e aperta o respiro entre os
	   elementos só nessa cena, o bastante pra caber título+corpo+3 fichas+CTA
	   inteiros numa tela comum sem precisar rolar. */
	body.home .sw-copylayer > .sw-copy:first-child {
		top: 84px;
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__eyebrow {
		margin-top: 8px;
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__title {
		margin-top: 6px;
		font-size: clamp(1.6rem, 3.2vw, 2.5rem);
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__body {
		margin-top: 12px;
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__tags {
		margin-top: 16px;
		gap: 8px;
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__ficha {
		padding-top: 6px;
	}
	body.home .sw-copylayer > .sw-copy:first-child .sw-copy__cta {
		margin-top: 16px;
	}

	/* Mesmo problema da cena "Início" (ver acima) na última cena, "Publicação":
	   também não usa punch e também leva o transform inline do motor, então
	   top:50% da base virava um topo literal, não um centro — o bloco (mais
	   baixo que os das etapas com punch, mas ainda assim) nascia abaixo do
	   padrão visual das demais. Centraliza pelo mesmo raciocínio: metade do
	   espaço sobrando acima. Não precisa apertar o respiro (conteúdo mais
	   curto que o do Início — sem a 3ª ficha). */
	body.home .sw-copylayer > .sw-copy:last-child {
		top: 106px;
	}
}

/* O container do journey ocupa a altura do stage do motor (fixed, cobre viewport
   enquanto a track por baixo dá o espaço de scroll) — sem CSS de layout extra aqui,
   isso já é resolvido pelo motor via injectCSS(). */
#denner-home-journey {
	position: relative;
}