/*
 * Andaventura — hero: titular, corona de destinos y control.
 *
 * La corona la pinta WebGL (assets/js/hero-corona.js). Aquí va todo lo demás:
 * la composición centrada del primer pliegue, el escenario donde se monta el
 * canvas, las pastillas de destino y el rótulo inferior. Ninguna de esas
 * piezas depende de JavaScript para verse.
 *
 * SISTEMA DE MOTION
 *   curvas     --e-out entradas y respuesta · --e-io movimiento en pantalla
 *   duraciones tap 140 · ui 220 · move 420 · story 900
 *   reglas     el hover vive en CSS y solo bajo (hover:hover); nada usa
 *              `transition: all`; pulsar siempre responde con scale(.97).
 */

:root {
	/* Las curvas del navegador son demasiado blandas; estas tienen intención. */
	--e-out: cubic-bezier(0.23, 1, 0.32, 1);
	--e-io: cubic-bezier(0.77, 0, 0.175, 1);

	--t-tap: 140ms;
	--t-ui: 220ms;
	--t-move: 420ms;
	--t-story: 900ms;
}

/* ================================================================== HERO */

.av-hero {
	position: relative;
	/*
	 * Un solo pliegue. El titular ocupa lo que necesita y la corona se queda
	 * con lo que sobre: el canvas no tiene medida propia, así que una pantalla
	 * corta da un anillo menor en lugar de empujar el rótulo fuera de vista.
	 */
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	/* La cabecera es `position: fixed` y no ocupa flujo: el hueco lo reserva
	   el hero, o el antetítulo se le mete debajo. */
	padding-block: calc(var(--av-header-h) + clamp(0.25rem, 1vw, 1rem)) clamp(0.75rem, 1.6vw, 1.5rem);
	overflow: clip;
}

/*
 * Sin halo detrás de la corona: el fondo es blanco cálido y la niebla del
 * shader ya mezcla hacia él. Cualquier realce localizado se cuela entre
 * tarjetas y se lee como un panel iluminado. El espacio respira solo.
 */
.av-hero > * { position: relative; }

/* ------------------------------------------------------------- el titular */

.av-hero__say {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.5rem;
	flex: 0 0 auto;
}

/* La estrella del isotipo: marca el arranque sin repetir el logotipo. */
.av-hero__mark {
	display: block;
	width: 18px;
	color: var(--av-clay);
	opacity: 0.9;
}

.av-hero__kicker { margin-top: -0.35rem; }

.av-hero__h1 {
	/*
	 * Hasta 80px. Los saltos son composición: van marcados con <span> y no se
	 * dejan al algoritmo del navegador.
	 */
	font-size: clamp(2.1rem, 1rem + 3.4vw, 3.7rem);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.05;
	text-wrap: initial;
	margin-top: 0.15rem;
}

.av-hero__h1 .l { display: block; overflow: hidden; }
.av-hero__h1 .l > span { display: block; }

.av-hero__copy {
	/* Una sola línea en escritorio: dos renglones aquí le quitan altura al
	   anillo, que es lo que hay que mirar. */
	max-width: 64ch;
	font-size: 0.95rem;
	color: var(--av-ink-body);
	margin-top: 0.2rem;
}

.av-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.7rem;
	margin-top: 0.4rem;
}

/*
 * Botones sobrios: el primario es carbón; el acento cobre queda para estados
 * activos y microdetalles, no para pintar botones por toda la Home.
 */
.av-btn--hero {
	background: var(--av-ink);
	color: var(--av-ivory);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.78rem;
	font-weight: 600;
}

@media (hover: hover) and (pointer: fine) {
	.av-btn--hero:hover { background: var(--av-forest); }
}

/* ---------------------------------------------------------- entradas */

@keyframes av-line-in { from { transform: translateY(104%); } }
@keyframes av-soft-in { from { opacity: 0; } }
@keyframes av-rise-in { from { opacity: 0; transform: translateY(14px); } }

/*
 * `backwards` es deliberado: el fotograma inicial solo se aplica durante el
 * retardo. Si la animación no llegara a correr, la pieza se queda en su
 * estilo normal, que es visible. Nada crítico depende de JavaScript.
 */
.av-hero__h1 .l > span { animation: av-line-in var(--t-story) var(--e-io) backwards; }
.av-hero__h1 .l:nth-child(1) > span { animation-delay: 160ms; }
.av-hero__h1 .l:nth-child(2) > span { animation-delay: 240ms; }

.av-hero__mark,
.av-hero__kicker,
.av-hero__copy,
.av-hero__actions { animation: av-soft-in var(--t-story) var(--e-out) backwards; }

.av-hero__mark { animation-delay: 40ms; }
.av-hero__kicker { animation-delay: 90ms; }
.av-hero__copy { animation-delay: 430ms; }
.av-hero__actions { animation-delay: 520ms; }

.av-corona__stage { animation: av-soft-in 1200ms var(--e-out) 380ms backwards; }
.av-corona__pills,
.av-corona__bar { animation: av-rise-in var(--t-story) var(--e-out) backwards; }
.av-corona__pills { animation-delay: 660ms; }
.av-corona__bar { animation-delay: 760ms; }

/* ================================================================ CORONA */

.av-corona {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin-top: clamp(0.75rem, 1.6vw, 1.5rem);
}

.av-corona__stage {
	position: relative;
	width: 100%;
	/* Se lleva el hueco restante del pliegue, con un suelo para que el
	   anillo no se vuelva ilegible en pantallas muy bajas. */
	flex: 1 1 auto;
	min-height: 280px;
	/* El arrastre es horizontal; el dedo tiene que seguir pudiendo bajar. */
	touch-action: pan-y;
	cursor: grab;
	user-select: none;
	-webkit-user-select: none;
}

.av-corona__stage.is-dragging { cursor: grabbing; }

/* Sobre una lámina el cursor dice lo que hay: se puede abrir. */
.av-corona__stage.is-over { cursor: pointer; }

.av-corona__gl {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/*
 * Semilla de las texturas. Las fotografías tienen que estar en el documento
 * para que el motor las hornee sin una segunda descarga. Con WebGL activo no
 * se ven; sin él, `no-gl` las convierte en una tira legible en lugar de dejar
 * un hueco.
 */
.av-corona__seed {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 1rem;
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
}

.av-corona__seed li { flex: 0 0 auto; width: 200px; }
.av-corona__seed img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }

.av-corona.no-gl .av-corona__seed {
	position: static;
	opacity: 1;
	pointer-events: auto;
	overflow-x: auto;
	padding-inline: var(--av-gutter);
	scroll-snap-type: x mandatory;
	height: clamp(300px, 44svh, 500px);
	flex: 0 0 auto;
}

.av-corona.no-gl .av-corona__seed li { scroll-snap-align: center; width: clamp(190px, 24vw, 260px); }
.av-corona.no-gl .av-corona__gl { display: none; }
.av-corona.no-gl .av-corona__stage { cursor: auto; height: auto; }

/* La instrucción de uso, en el margen. No compite con nada. */
.av-corona__hint {
	position: absolute;
	right: max(0.75rem, calc(var(--av-gutter) - 2.25rem));
	top: 50%;
	transform: translateY(-50%);
	writing-mode: vertical-rl;
	white-space: nowrap;
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	opacity: 0.55;
	pointer-events: none;
}

.av-corona__hint::after {
	content: '';
	display: block;
	width: 1px;
	height: 46px;
	margin: 0.9rem auto 0;
	background: currentColor;
	opacity: 0.5;
}

@media (max-width: 1100px) {
	.av-corona__hint { display: none; }
}

/* ------------------------------------------------------------ pastillas */

.av-corona__pills {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: clamp(0.6rem, 1.3vw, 1.1rem);
	padding-inline: var(--av-gutter);
	flex: 0 0 auto;
}

.av-corona__pill {
	padding: 0.5rem 1rem;
	border-radius: 999px;
	border: 1px solid transparent;
	background: oklch(99% 0.006 85 / 0.72);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--av-ink-muted);
	transition:
		color var(--t-ui) var(--e-out),
		background-color var(--t-ui) var(--e-out),
		border-color var(--t-ui) var(--e-out),
		transform var(--t-tap) var(--e-out);
}

.av-corona__pill.on {
	background: var(--av-clay);
	color: var(--av-ivory);
	border-color: transparent;
}

.av-corona__pill:active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
	.av-corona__pill:hover { color: var(--av-ink-strong); border-color: var(--av-ink-hair); }
	.av-corona__pill.on:hover { color: var(--av-ivory); background: var(--av-clay-bright); }
}

.av-corona__pill:focus-visible {
	outline: 2px solid var(--av-clay);
	outline-offset: 3px;
}

@media (max-width: 820px) {
	.av-corona__pills {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		scroll-snap-type: x proximity;
	}
	.av-corona__pills::-webkit-scrollbar { display: none; }
	.av-corona__pill { flex: 0 0 auto; scroll-snap-align: center; }
}

/* --------------------------------------------------------------- rótulo */

.av-corona__bar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: clamp(0.5rem, 1.1vw, 0.95rem);
	flex: 0 0 auto;
}

.av-corona__frame {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem;
	border-radius: 999px;
	border: 1px solid var(--av-ink-hair);
	background: oklch(99% 0.006 85 / 0.8);
}

.av-corona__arrow {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--av-ink-strong);
	transition:
		background-color var(--t-ui) var(--e-out),
		transform var(--t-tap) var(--e-out);
}

.av-corona__arrow svg { width: 17px; height: 17px; }
.av-corona__arrow:active { transform: scale(0.94); }

@media (hover: hover) and (pointer: fine) {
	.av-corona__arrow:hover { background: var(--av-ivory-deep); }
}

.av-corona__arrow:focus-visible {
	outline: 2px solid var(--av-clay);
	outline-offset: 2px;
}

.av-corona__read {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	min-width: clamp(190px, 26vw, 300px);
	justify-content: center;
	padding-inline: 0.5rem;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--av-ink-strong);
	white-space: nowrap;
}

.av-corona__read span { color: var(--av-ink-hair); }

.av-corona__read .av-icon {
	color: var(--av-clay);
	transition: transform var(--t-ui) var(--e-out);
}

@media (hover: hover) and (pointer: fine) {
	.av-corona__read:hover .av-icon { transform: translateX(4px); }
}
.av-corona__place { color: var(--av-ink-muted); font-weight: 500; }

.av-corona__read:focus-visible {
	outline: 2px solid var(--av-clay);
	outline-offset: 4px;
	border-radius: 6px;
}

@media (hover: hover) and (pointer: fine) {
	.av-corona__read:hover .av-corona__name { text-decoration: underline; text-underline-offset: 4px; }
}

/*
 * Portátiles bajos. Con una cabecera fija de 84px, un viewport de 790px no da
 * para el titular a tamaño completo más el anillo más el control. Se aprieta
 * la tipografía —no se quita contenido— para que el rótulo del destino, que
 * es la pieza que dice que la corona se puede tocar, entre en el pliegue.
 */
@media (min-width: 821px) and (max-height: 850px) {
	.av-hero__h1 { font-size: clamp(2rem, 0.9rem + 3vw, 3.15rem); }
	.av-hero__say { gap: 0.35rem; }
	.av-hero__actions { margin-top: 0.25rem; }
	.av-corona { margin-top: 0.5rem; }
	.av-corona__stage { min-height: 250px; }
}

/* Portátil 1366×768: el viewport útil ronda los 620px. Segundo escalón. */
@media (min-width: 821px) and (max-height: 700px) {
	.av-hero { padding-block: calc(var(--av-header-h) + 0.25rem) 0.6rem; }
	.av-hero__h1 { font-size: clamp(1.8rem, 0.8rem + 2.6vw, 2.6rem); }
	.av-hero__copy { font-size: 0.88rem; }
	.av-hero__mark { display: none; }
	.av-corona__stage { min-height: 205px; }
	.av-corona__pills { margin-top: 0.45rem; }
	.av-corona__bar { margin-top: 0.4rem; }
	.av-corona__arrow { width: 36px; height: 36px; }
}

/* ================================================================ MÓVIL */

@media (max-width: 820px) {
	.av-hero { padding-block: calc(var(--av-header-h) + 0.75rem) var(--av-s-2); }

	/* Los dos botones caben en una línea si dejan de ser de escritorio. */
	.av-hero__actions { gap: 0.5rem; }
	.av-hero__actions .av-btn { padding: 0.7rem 1.1rem; font-size: 0.8rem; }
	.av-hero__copy { font-size: 0.9rem; max-width: 34ch; }
	.av-hero__h1 { letter-spacing: -0.028em; }
	.av-corona__stage { min-height: 300px; }
	.av-corona__read { min-width: 0; font-size: 0.68rem; letter-spacing: 0.12em; }
	.av-corona__arrow { width: 38px; height: 38px; }
}

/* ====================================================== MOVIMIENTO REDUCIDO */

/*
 * Se quita el movimiento, no el contenido: la corona sigue montada y sigue
 * pudiendo girarse a mano; solo deja de girar sola y de entrar animada.
 */
@media (prefers-reduced-motion: reduce) {
	.av-hero__h1 .l > span,
	.av-hero__mark,
	.av-hero__kicker,
	.av-hero__copy,
	.av-hero__actions,
	.av-corona__stage,
	.av-corona__pills,
	.av-corona__bar { animation: none; }
}