/**
 * Page Enter — animación de entrada al cargar cualquier página.
 *
 * - Anima únicamente la opacidad (sin transform) sobre el <main> y el banner
 *   de hero, para no pisar transforms ni offsets propios del maquetador
 *   (imágenes flotantes, .oz-pb-has-offset, .imagen-flotante-suave, etc.).
 * - El hero entra primero (rápido), luego el main con un pequeño delay.
 * - Mientras carga el JS, el contenido NO se oculta (no hay flash de
 *   contenido invisible si el JS falla). Solo se anima si el body recibe
 *   la clase .ss-page-enter-ready (la añade el JS antes de soltar la entrada).
 */

/* Estado inicial: oculto, listo para animarse cuando el JS dispare. */
.ss-page-enter-armed main#main,
.ss-page-enter-armed .site-main,
.ss-page-enter-armed section.oz-page-hero {
	opacity: 0;
}

/* 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;
	}
}