/**
 * Page Enter — animación de entrada al cargar cualquier página.
 *
 * NOTA (Ozado): el estado "armado" ya NO oculta el contenido. Antes ponía
 *   todo el .site-main (y el hero) en opacity:0 hasta que el JS lo revelaba
 *   con un fade de 0,7s; como es el CONTENEDOR PADRE, dejaba invisible el
 *   héroe y todo lo demás => el LCP/FCP se disparaban (~1s de contenido en
 *   blanco en móvil). Ahora el contenido nace VISIBLE; el movimiento de
 *   entrada lo dan las animaciones del héroe (transform), no un fade que
 *   oculte la página entera. El JS puede seguir agregando las clases: ya no
 *   tienen efecto de ocultado.
 */

/* Estado inicial: VISIBLE (antes opacity:0). */
.ss-page-enter-armed main#main,
.ss-page-enter-armed .site-main,
.ss-page-enter-armed section.oz-page-hero {
	opacity: 1;
}

/* Transición: solo opacidad, sin transform — no rompe layouts. */
.ss-page-enter-armed main#main,
.ss-page-enter-armed .site-main {
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s;
	will-change: opacity;
}

.ss-page-enter-armed section.oz-page-hero {
	transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity;
}

/* Estado visible (lo añade el JS al body). */
.ss-page-enter-ready main#main,
.ss-page-enter-ready .site-main,
.ss-page-enter-ready section.oz-page-hero {
	opacity: 1;
}

/* Respeta reduce-motion: no animar. */
@media (prefers-reduced-motion: reduce) {
	.ss-page-enter-armed main#main,
	.ss-page-enter-armed .site-main,
	.ss-page-enter-armed section.oz-page-hero {
		opacity: 1 !important;
		transition: none !important;
	}
}