/* Hero da home — padrão Grupo UNEED. */

.hero {
	position: relative;
	display: grid;
	align-items: center;
	/* dvh, não vh: em telefone, `vh` é calculado com a barra do navegador
	   RECOLHIDA, então 92vh estoura a tela visível enquanto a barra está
	   aparecendo — e o hero começa cortado. `dvh` acompanha a altura real. */
	min-height: min(760px, 92dvh);
	padding-block: clamp(6rem, 4rem + 8vw, 9rem) clamp(4rem, 3rem + 4vw, 6rem);
	overflow: hidden;
	text-align: center;
}

/* --- Camada do shader ----------------------------------------------------
   O NeuroNoise é a ÚNICA arte do hero. Nasce transparente e entra com
   fade quando confirma que está desenhando — sem isso o visitante vê um
   retângulo preto antes do primeiro quadro. */

.hero__shader {
	position: absolute;
	inset: -12% -10% -6%;
	z-index: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 1.2s var(--ease-out);
}

.hero__shader[data-shader-pronto="true"] { opacity: 1; }

.hero__shader canvas { width: 100%; height: 100%; display: block; }

/* --- Alternativa sem shader ------------------------------------------------
   Brilho em CSS, sempre presente, atrás do canvas.

   Substituiu a arte de arcos em SVG. Os arcos apareciam junto com o
   shader sempre que alguma regra falhava em escondê-los na hora certa —
   e isso aconteceu de formas diferentes três vezes. Um gradiente não tem
   esse modo de falha: ele fica atrás por construção, e com o shader por
   cima simplesmente não é visto.

   Some quando o shader assume, para não somar luminosidade. */

.hero::before {
	content: "";
	position: absolute;
	inset: -20% -10% auto;
	height: 90%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 60% at 30% 25%, color-mix(in srgb, var(--arte-1) 30%, transparent), transparent 70%),
		radial-gradient(55% 55% at 72% 40%, color-mix(in srgb, var(--arte-2) 24%, transparent), transparent 68%),
		radial-gradient(45% 45% at 52% 8%, color-mix(in srgb, var(--arte-3) 12%, transparent), transparent 65%);
	transition: opacity 1.2s var(--ease-out);
}

.shader .hero::before { opacity: 0; }

.hero__conteudo {
	position: relative;
	z-index: 2;
}

.hero__prova {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-5);
	margin-bottom: var(--sp-8);
	border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
	border-radius: var(--r-pill);
	background: color-mix(in srgb, var(--bg) 55%, transparent);
	backdrop-filter: blur(8px);
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.hero__titulo {
	font-size: var(--fs-display);
	/* Contraste sobre a arte, sem escurecê-la. */
	text-shadow: 0 2px 30px var(--bg), 0 1px 10px color-mix(in srgb, var(--bg) 80%, transparent);
	/* Largura generosa: com a quebra explícita (|) o título assenta em
	   três linhas em telas grandes. `balance` fica de fora — ele decidiria
	   a quebra por conta própria e brigaria com a composição escolhida. */
	max-width: var(--medida-hero);
	margin-inline: auto;
}

.hero__texto {
	text-shadow: 0 1px 16px var(--bg);
	margin: var(--sp-8) auto 0;
	max-width: 46rem;
	color: var(--text-muted);
	font-size: clamp(1rem, .95rem + .35vw, 1.1875rem);
}

.hero__acoes { margin-top: var(--sp-10); }

/* --- Entrada do hero ---------------------------------------------------
   CSS puro, de propósito: é conteúdo acima da dobra e não pode depender
   de JavaScript para aparecer. O GSAP só assume abaixo da dobra.

   Sem a classe .js, os elementos já nascem visíveis — quem tem JS
   desligado vê a página completa, sem animação. */

.js .hero__prova,
.js .hero__titulo,
.js .hero__texto,
.js .hero__acoes,
.js .hero__rolar {
	opacity: 0;
	animation: ua-entra .9s var(--ease-out) forwards;
}

.js .hero__prova  { animation-delay: .05s; }
.js .hero__titulo { animation-delay: .15s; }
.js .hero__texto  { animation-delay: .30s; }
.js .hero__acoes  { animation-delay: .42s; }
.js .hero__rolar  { animation-delay: .60s; }

@keyframes ua-entra {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.js .hero__prova,
	.js .hero__titulo,
	.js .hero__texto,
	.js .hero__acoes,
	.js .hero__rolar {
		opacity: 1;
		animation: none;
		transform: none;
	}
}

/* --- Seta de rolagem --------------------------------------------------- */

.hero__rolar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-top: var(--sp-16);
	border: 1px solid var(--line);
	color: var(--text-subtle);
	animation: ua-flutua 2.6s var(--ease-in-out) infinite;
}

.hero__rolar:hover { color: var(--text); border-color: var(--brand); }

@keyframes ua-flutua {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__rolar { animation: none; }
}

@media (max-width: 820px) {
	.hero {
		/* Sem altura mínima: em telefone deitado, 92vh empurrava todo o
		   conteúdo para fora da tela e o hero virava uma tela em branco
		   com um título. */
		min-height: auto;
		text-align: left;
		padding-block: clamp(4rem, 3rem + 6vw, 7rem) var(--sp-12);
	}

	.hero__titulo, .hero__texto { margin-inline: 0; }
	.hero__acoes { justify-content: flex-start; }
	.hero__rolar { display: none; }
}

@media (max-width: 600px) {
	/* Botões em largura cheia: dois lado a lado em 343px deixam cada um
	   com ~160px, apertado demais para o rótulo e para o dedo. */
	.hero__acoes .btn { flex: 1 1 100%; }
}