/* ===========================================================================
   c-hero - primeira dobra
   =========================================================================== */

.c-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(88vh, 820px);
	padding: var(--e-6) var(--e-3) var(--e-7);
	overflow: hidden;
}

/* ---------------------------------------------------------------- fundo ---- */

.c-hero__fundo {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* Halo dourado atras do titulo. Puro CSS: nao vale carregar imagem para um
   degrade que o navegador desenha de graca. */
.c-hero__brilho {
	position: absolute;
	top: -20%;
	left: 50%;
	width: min(1100px, 130vw);
	height: min(1100px, 130vw);
	transform: translateX(-50%);
	background: radial-gradient(circle at 50% 50%,
	            rgba(217, 180, 90, 0.13) 0%,
	            rgba(200, 85, 47, 0.06) 34%,
	            transparent 66%);
}

.c-hero__grade {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
	background-size: 68px 68px;
	/* Desvanece nas bordas para a grade nao "acabar" com um corte reto. */
	mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 30%, transparent 100%);
	-webkit-mask-image: radial-gradient(ellipse 78% 62% at 50% 42%, #000 30%, transparent 100%);
}

/* Gravura da personagem, do wallpaper oficial (metin2_wall_7).
   Nao e a imagem colada: tools/build_hero_arte.py passa um filtro passa-alta e
   devolve so a linha, dourada sobre transparente, porque o original e desenhado
   sobre pergaminho claro e um retangulo creme numa pagina preta brigaria com tudo.

   POR QUE `left: 58%` E NAO UMA LARGURA FIXA
   Isto e uma garantia de contraste, nao estetica. Medindo o pior pixel que a
   gravura produz com a opacidade abaixo -- (56,47,29) -- o titulo fica em 11,59:1,
   o subtitulo em 6,52:1 e o dourado dos botoes em 6,67:1, todos folgados. Mas a
   nota ("Windows 10 ou superior") usa --ink-3 #837f79, que JA e so 4,97:1 sobre o
   fundo limpo: qualquer coisa atras dela a joga abaixo de 4,5:1, e baixar a
   opacidade nao salva -- a 0,12 ainda dava 4,16:1.

   Entao a solucao nao e opacidade, e regiao. Comecando em 58% da largura, a borda
   esquerda da caixa cai depois de onde o texto termina (o subtitulo tem
   max-width: 56ch, ~476px, e a nota e mais curta ainda) em qualquer viewport
   acima do corte de 900px. O h1 pode entrar na caixa, e pode: ele e --ink, com
   11,59:1. */
.c-hero__arte {
	position: absolute;
	left: 58%;
	right: 0;
	bottom: 0;
	height: 88%;
	/* background-image vem inline, do PHP: e o servidor que sorteia qual das
	   quatro gravuras aparece no primeiro carregamento. */
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: contain;
	opacity: 0.22;
}

.c-hero__conteudo { position: relative; }

/* --------------------------------------------------------------- titulo ---- */

.c-hero__titulo {
	font-size: clamp(2.4rem, 7vw, 5.25rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.035em;
}

/* Texto so para leitor de tela: a animacao e aria-hidden, entao a frase real
   precisa existir em algum lugar. */
.c-hero__acessivel {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.c-hero__datilo { display: block; }

.c-hero__linha {
	display: block;
}

/* A ultima linha ganha o dourado: e o "Sem duvidas." batendo o martelo. */
.c-hero__linha:last-child {
	background: linear-gradient(96deg, var(--ouro-claro), var(--ouro) 45%, var(--brasa));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Cursor que acompanha a digitacao. O JS posiciona via --cursor-x/--cursor-y. */
.c-hero__cursor {
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 1em;
	transform: translate(var(--cursor-x, 0), var(--cursor-y, 0));
	background: var(--ouro);
	border-radius: 2px;
	opacity: 0;
	transition: transform 90ms linear;
}

.c-hero__cursor[data-piscando="1"] {
	animation: c-hero-piscar 1s steps(2, start) infinite;
}

@keyframes c-hero-piscar {
	0%   { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 1; }
}

/* ------------------------------------------------------------- apoio ------ */

.c-hero__sub {
	max-width: 56ch;
	margin-top: var(--e-3);
	color: var(--ink-2);
	font-size: clamp(1rem, 1.5vw, 1.1875rem);
}

.c-hero__botoes {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--e-4);
}

.c-hero__cta { padding-inline: 1.75rem; }

.c-hero__nota {
	margin-top: var(--e-2);
	color: var(--ink-3);
	font-size: 0.8125rem;
}

/* --------------------------------------------------------- responsivo ----- */

/* Em tela estreia o texto ocupa a largura toda, e a gravura passaria POR BAIXO
   dele em vez de ao lado. Sai: uma decoracao nao vale reduzir a legibilidade do
   titulo, e ainda economiza 53 KB em conexao movel. */
@media (max-width: 900px) {
	.c-hero__arte { display: none; }
}

@media (max-width: 640px) {
	.c-hero {
		min-height: 0;
		padding-top: var(--e-5);
	}

	.c-hero__botoes > .btn {
		flex: 1 1 100%;
	}
}