/*
 * Animaciones al hacer scroll
 * ---------------------------
 * Todo el efecto visual vive en este fichero. Si se elimina esta hoja de
 * estilos, la pagina vuelve a mostrarse sin animaciones.
 */

:root {
	--reveal-distance: 2.25rem;
	--reveal-duration: 700ms;
	--reveal-easing: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Evita una barra horizontal fugaz durante las entradas laterales. */
html.reveal-ready,
html.reveal-ready body {
	overflow-x: clip;
}

/*
 * El script anade esta clase desde el head, antes de que se pinte el body.
 * El contenido espera a las fuentes y el header aguarda fuera de la pantalla.
 */
html.animation-loading #page_conten > article,
html.animation-loading #page_header > div {
	visibility: hidden;
}

html.animation-loading #site_header {
	top: calc(0rem - var(--height-header));
}

html.reveal-ready #site_header {
	transition: top var(--reveal-duration) var(--reveal-easing);
}

html.reveal-ready.fonts-ready #site_header {
	top: 0;
}

/*
 * Los elementos solo se ocultan cuando JS confirma que IntersectionObserver
 * esta disponible. Sin JS (o en un navegador antiguo) el contenido es visible.
 */
html.reveal-ready .scroll-reveal {
	opacity: 0;
	transform: translate3d(0, var(--reveal-distance), 0);
	transition:
		opacity var(--reveal-duration) var(--reveal-easing),
		transform var(--reveal-duration) var(--reveal-easing);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

html.reveal-ready .scroll-reveal.reveal-left {
	transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

html.reveal-ready .scroll-reveal.reveal-right {
	transform: translate3d(var(--reveal-distance), 0, 0);
}

html.reveal-ready .scroll-reveal.reveal-fade {
	transform: none;
}

html.reveal-ready .scroll-reveal.is-visible {
	opacity: 1;
	transform: translate3d(0, 0, 0);
	will-change: auto;
}

/*
 * El titulo principal permanece oculto hasta que JS confirma que su fuente
 * esta cargada. Asi se evita que cambie de tipografia durante la entrada.
 */
html.reveal-ready #page_header h1 {
	opacity: 0;
}

html.reveal-ready.fonts-ready #page_header h1 {
	animation: hero-reveal 900ms var(--reveal-easing) 150ms both;
}

@keyframes hero-reveal {
	from {
		opacity: 0;
		transform: translate3d(0, 1.5rem, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* Accesibilidad: si el usuario reduce el movimiento, todo queda inmediato. */
@media (prefers-reduced-motion: reduce) {
	html.reveal-ready {
		scroll-behavior: auto;
	}

	html.reveal-ready .scroll-reveal,
	html.reveal-ready #page_header h1,
	html.reveal-ready #site_header {
		animation: none;
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* En pantallas pequenas el movimiento lateral se acorta. */
@media (max-width: 569px) {
	:root {
		--reveal-distance: 1.25rem;
		--reveal-duration: 600ms;
	}
}