/* =========================================================================
   CARROSSEL DE DESTAQUE

   A rolagem é feita pelo próprio navegador, com scroll-snap. Arrastar com o
   dedo no celular funciona sem uma linha de JavaScript e com a física nativa
   do sistema — nenhuma biblioteca chega perto disso. O JS só cuida do avanço
   automático, das setas e dos pontinhos.
   ========================================================================= */

/*
 * Carrossel de largura total, com o cabeçalho por cima.
 *
 * Antes era uma moldura centralizada de 1320px com cantos arredondados. Ela
 * pediu na revisão da etapa 1 que ocupasse a tela inteira e que o menu ficasse
 * sobreposto, como no site oficial da HoYoverse que mandou de referência.
 */
.hero {
	padding: 0;
}

.hero__frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--surface);
}

/* -------------------------------------------------------------------------
   Trilho e slides
   ---------------------------------------------------------------------- */

.hero__track {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Esconde a barra de rolagem sem impedir a rolagem em si. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.hero__track::-webkit-scrollbar { display: none; }

@media (prefers-reduced-motion: reduce) {
	.hero__track { scroll-behavior: auto; }
}

.hero__slide {
	flex: 0 0 100%;
	width: 100%;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

.hero__link {
	display: block;
	position: relative;
	width: 100%;
	/*
	 * Tela cheia, pedido dela na segunda revisão.
	 *
	 * Antes a altura saía de min(50vw, 82vh). Numa janela alta e estreita quem
	 * ganhava era o 50vw, e o carrossel ocupava cerca de metade da tela — foi
	 * exatamente o que ela viu.
	 *
	 * svh e não vh: no celular o vh conta a barra do navegador que some ao
	 * rolar, e a arte daria um pulo. Aqui o mobile usa outro tratamento, mas a
	 * unidade fica correta de qualquer forma.
	 */
	height: 100vh;
	height: 100svh;
	color: inherit;
	text-decoration: none;
}

.hero__img {
	display: block;
	width: 100%;
	height: 100%;
	/* A proporção 2:1 está fixada no briefing e as artes que ela enviou são
	   16:9. O WordPress já corta ao gerar o tamanho 'teyvat-hero'; o
	   object-fit garante o enquadramento também se alguém subir uma imagem
	   fora de proporção, e cobre o recorte quando o max-height acima entra. */
	object-fit: cover;
	object-position: center;
}

/*
 * Escurecimento em duas pontas.
 *
 * Em cima, para o menu branco continuar legível sobre arte clara: o carrossel
 * dela tem tanto céu noturno quanto explosão branca.
 * Embaixo, para a etiqueta, o título e os pontinhos terem contraste.
 */
.hero__capa {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(to bottom, rgba(11, 11, 14, 0.72), rgba(11, 11, 14, 0.18) 22%, transparent 38%),
		linear-gradient(to top,    rgba(11, 11, 14, 0.85), rgba(11, 11, 14, 0.35) 26%, transparent 52%);
}

/* -------------------------------------------------------------------------
   Etiqueta e título sobre a arte
   ---------------------------------------------------------------------- */

.hero__conteudo {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	/* Alinhado à mesma coluna do logo no cabeçalho. */
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	/*
	 * O bloco fica mais alto do que a borda de baixo, a pedido dela.
	 *
	 * Com o carrossel ocupando a tela inteira, colado embaixo o texto ficava a
	 * uns 10% do rodapé e parecia largado. Aqui a distância acompanha a altura
	 * da tela, então o equilíbrio se mantém em monitor grande e em notebook.
	 */
	padding: 0 var(--gutter) clamp(4.5rem, 18vh, 12rem);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.75rem;
}

.hero__titulo {
	margin: 0;
	max-width: 20ch;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.5rem, 3.4vw, 3rem);
	line-height: 1.1;
	color: #fff;
	/* A arte por baixo muda a cada slide; a sombra garante o contraste mesmo
	   quando o degradê não é suficiente. */
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);

	/*
	 * Teto de três linhas, com reticências no que passar.
	 *
	 * Ela perguntou se um título muito grande caberia. Sem este limite não
	 * caberia: o texto cresceria para cima, entraria por baixo do menu e em
	 * telas baixas passaria da arte. Com o limite, um título longo é cortado
	 * de forma limpa e o desenho do slide nunca quebra.
	 */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}

/* As etiquetas coloridas moraram aqui enquanto só o carrossel as usava. Agora
   aparecem também nos parceiros, nas notícias e nos posts, então foram para o
   style.css, que carrega em todas as páginas. */

/* -------------------------------------------------------------------------
   Setas
   ---------------------------------------------------------------------- */

.hero__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: rgba(11, 11, 14, 0.55);
	border: 1px solid var(--border);
	border-radius: 50%;
	color: var(--text);
	cursor: pointer;
	opacity: 0;
	transition: opacity var(--speed) var(--ease),
	            background-color var(--speed) var(--ease),
	            border-color var(--speed) var(--ease),
	            color var(--speed) var(--ease);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hero__arrow {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.hero__arrow--prev { left: 1rem; }
.hero__arrow--next { right: 1rem; }

/* As setas aparecem ao aproximar o mouse. No toque elas não fazem falta —
   a pessoa arrasta. Mas continuam acessíveis pelo teclado. */
.hero__frame:hover .hero__arrow,
.hero__arrow:focus-visible {
	opacity: 1;
}

.hero__arrow:hover {
	background: rgba(212, 175, 55, 0.9);
	border-color: var(--gold-bright);
	color: #0B0B0E;
}

.hero__arrow[disabled] {
	opacity: 0 !important;
	pointer-events: none;
}

/* Em telas de toque as setas ficam escondidas de vez: ocupam espaço sobre a
   arte e não são usadas. */
@media (hover: none) {
	.hero__arrow { display: none; }
}

/* -------------------------------------------------------------------------
   Pontinhos
   ---------------------------------------------------------------------- */

/*
 * Alinhados à direita, na mesma coluna do conteúdo.
 *
 * Centralizados, ficariam em cima do título, que agora ocupa o canto inferior
 * esquerdo. À direita é também onde a referência da HoYoverse põe a navegação
 * entre slides.
 */
.hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(1rem, 2.5vw, 1.75rem);
	/* Empurra até a borda direita da mesma coluna central usada pelo título. */
	transform: translateX(calc(min(50vw, var(--wrap) / 2) - 100% - var(--gutter)));
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4rem 0.7rem;
	background: rgba(11, 11, 14, 0.45);
	border-radius: 999px;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.hero__dots {
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
}

.hero__dot {
	position: relative;
	width: 8px;
	height: 8px;
	padding: 0;
	background: rgba(255, 255, 255, 0.38);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color var(--speed) var(--ease), width var(--speed) var(--ease);
}

/* Área de toque de 44px sem aumentar o desenho do pontinho — regra de
   acessibilidade em celular. */
.hero__dot::before {
	content: '';
	position: absolute;
	left: 50%;
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.hero__dot:hover { background: rgba(255, 255, 255, 0.65); }

/*
 * O ativo vira uma cápsula na cor da etiqueta daquele slide.
 *
 * Ideia dela na segunda revisão: se o slide é de Genshin, o ponto fica na cor
 * de Genshin. Além do charme, dá uma segunda pista de qual jogo está à frente
 * sem precisar ler a etiqueta.
 *
 * O dourado continua como reserva, para slides sem etiqueta.
 */
.hero__dot.is-active {
	width: 22px;
	background: var(--ponto-cor, var(--gold));
}

@media (max-width: 900px) {
	/*
	 * No celular a etiqueta e o título saem de cima da arte e vão para baixo
	 * dela.
	 *
	 * A proporção 2:1 dá cerca de 195px de altura num celular. Um título de
	 * duas ou três linhas sobreposto nesse espaço cobre justamente a arte que
	 * a cliente escolheu, e ela é a primeira a reparar nisso. Embaixo, a arte
	 * aparece inteira e o texto fica legível sobre o fundo escuro.
	 *
	 * A proporção não muda: recortar 2:1 para um formato mais alto cortaria as
	 * laterais das artes-chave, que têm personagens espalhados na largura toda.
	 */
	.hero__link { height: auto; }

	.hero__img {
		height: auto;
		aspect-ratio: 2 / 1;
	}

	/* Sem sobreposição, o degradê perde a função. */
	.hero__capa {
		position: static;
		background: none;
	}

	.hero__conteudo {
		position: static;
		max-width: none;
		padding: 0.95rem var(--gutter) 1.3rem;
		gap: 0.55rem;
	}

	.hero__titulo {
		font-size: 1.0625rem;
		line-height: 1.25;
		max-width: none;
		text-shadow: none;
	}

	/*
	 * Ancorados pelo topo, na borda de baixo da arte. Presos pelo 'bottom'
	 * ficariam abaixo do texto, que agora tem altura variável conforme o
	 * título de cada slide.
	 */
	.hero__dots {
		top: calc(50vw - 2.1rem);
		bottom: auto;
		transform: translateX(-50%);
	}
}