/**
 * Hero "scroll story" (design v2.1) — par de lisa-hero-scroll.js e do
 * partial template-parts/hero-scroll.php.
 *
 * Aqui vive APENAS o que não pode ser inline no partial:
 *  - @keyframes lisaFloat (referenciado pelos estilos inline dos pontos);
 *  - o position: sticky do palco e a altura da trilha — que precisam ser
 *    revertíveis por media query (inline não perde para @media);
 *  - os DOIS estados do progressive enhancement, alternados pela classe
 *    `.is-ready` (posta por lisa-hero-scroll.js só com JS + motion pleno):
 *      · padrão (sem JS / movimento reduzido): hero pronto — o fundo navy da
 *        própria .lisa-hero aparece, pontos flutuando, trilha em altura
 *        natural, SVG/canvas/hint ocultos;
 *      · .is-ready: palco sticky 100vh, SVG/canvas/hint visíveis, hero
 *        absoluto centrado — e o JS assume via estilos inline.
 *
 * O markup interno do hero (.lisa-hero__*) é estilizado por lisa-home.css —
 * nada disso se repete aqui. Este arquivo depende de lisa-theme-home no
 * enqueue (a ordem garante que os overrides abaixo vençam).
 *
 * @package Lisa_Theme
 */

@keyframes lisaFloat {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-16px);
	}
}

/* =========================================================================
 * Estado padrão (sem JS ou com prefers-reduced-motion): hero pronto.
 * A trilha e o palco ficam no fluxo normal, dimensionados pelo conteúdo.
 * ========================================================================= */

/* A .lisa-hero base tem overflow:hidden (pontos decorativos) — mas overflow
   em ancestral QUEBRA position:sticky dos descendentes. No modo scroll o
   recorte é responsabilidade do próprio palco (.is-ready [data-stage]). */
.lisa-hero--scroll {
	overflow: visible;
}

.lisa-hero--scroll [data-stage] {
	position: relative;
}

.lisa-hero--scroll [data-bg] {
	background: transparent; /* deixa o navy da própria .lisa-hero aparecer */
}

.lisa-hero--scroll [data-glow] {
	opacity: 0; /* o gradiente da .lisa-hero já cobre o fallback */
}

.lisa-hero--scroll [data-floaters] {
	opacity: 1;
}

.lisa-hero--scroll [data-logo],
.lisa-hero--scroll [data-canvas],
.lisa-hero--scroll [data-hint] {
	display: none;
}

.lisa-hero--scroll [data-hero] {
	position: relative;
}

/* O hero do modo scroll é regido por este script (estilos inline em
   opacity/transform) — a cascata de entrada de lisa-home.css não se aplica. */
.lisa-hero--scroll .lisa-hero__title,
.lisa-hero--scroll .lisa-hero__subtitle,
.lisa-hero--scroll .lisa-hero__search,
.lisa-hero--scroll .lisa-hero__suggestions {
	animation: none;
}

/* =========================================================================
 * Estado animado (.is-ready — JS ativo e movimento permitido).
 * A altura da trilha é definida pelo JS (data-scroll-vh, inline).
 * ========================================================================= */

.lisa-hero--scroll.is-ready [data-stage] {
	position: sticky;
	top: 0;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

.lisa-hero--scroll.is-ready [data-bg] {
	background: #f5f3ef; /* creme inicial da animação (JS anima até o navy) */
}

.lisa-hero--scroll.is-ready [data-floaters] {
	opacity: 0;
}

.lisa-hero--scroll.is-ready [data-logo],
.lisa-hero--scroll.is-ready [data-canvas] {
	display: block;
}

.lisa-hero--scroll.is-ready [data-hint] {
	display: flex;
}

.lisa-hero--scroll.is-ready [data-hero] {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 80px 16px;
}

/* =========================================================================
 * Movimento reduzido: mesmo que .is-ready tenha sido aplicada (ex.: o
 * usuário ativou a preferência com a página aberta), volta ao hero pronto.
 * !important vence a altura inline posta pelo JS na trilha.
 * ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	.lisa-hero--scroll [data-track] {
		height: auto !important;
	}

	.lisa-hero--scroll.is-ready [data-stage] {
		position: relative;
		top: auto;
		height: auto;
		overflow: visible;
	}

	.lisa-hero--scroll.is-ready [data-bg] {
		background: transparent !important;
	}

	.lisa-hero--scroll.is-ready [data-floaters] {
		opacity: 1 !important;
	}

	.lisa-hero--scroll.is-ready [data-logo],
	.lisa-hero--scroll.is-ready [data-canvas],
	.lisa-hero--scroll.is-ready [data-hint] {
		display: none;
	}

	.lisa-hero--scroll.is-ready [data-hero] {
		position: relative;
		inset: auto;
		padding: 0;
	}

	.lisa-hero--scroll [data-block] {
		opacity: 1 !important;
		transform: none !important;
	}
}