/* ==========================================================================
   02 · Entrada — recorrido de entrada (1.3.1). Solo se aplica con data-media="sequence".
   Carga después de home.css, que no se modifica (los modos «video» y «placeholder» siguen igual).

   Geometría (alturas en svh, de modo que la barra de direcciones del móvil no mueva nada):
     escena = 100 + --e-scrub + --e-hand   ·   la escena fijada recorre --e-scrub (cuadros) + --e-hand (traspaso)
   entrada.js lee --e-scrub / --e-hand, calcula p (cuadros) y q (traspaso) a partir de la posición de scroll
   y escribe, en la sección, solo las variables que usa este archivo:
     --b6 · --b12 · --dim · --pe · --bed · --ground     (traspaso, función pura de q)
     --nq (en #novedades)                                (aparición del contenido de Novedades, desde q = .60)
   Sin JavaScript o con «reducir movimiento»: pósters fijos, sin escena fijada, sin capas del traspaso.
   ========================================================================== */

.scene--entrance[data-media="sequence"] {
	/* 1.3.1: 195 + 45 svh (antes 300 + 70): el recorrido fijado pasa de 370 a 240 svh (−35 %) con los mismos 120 cuadros y el mismo traspaso, solo con menos desplazamiento por cuadro.
	   1.9.2: la reproducción termina en el cuadro 108 (manifest.json): 177 svh = 195 × 108/119, el mismo desplazamiento por cuadro. */
	--e-scrub: 177;
	--e-hand: 45;
	--panel-inset: 8%;
	--ground: 1;
	--b6: 0; --b12: 0; --dim: 0; --pe: 0; --bed: 0;
}
.js:not(.glo-rm) .scene--entrance[data-media="sequence"] {
	--ground: 0;
	height: calc((100 + var(--e-scrub) + var(--e-hand)) * 1vh);
}
@supports (height: 1svh) {
	.js:not(.glo-rm) .scene--entrance[data-media="sequence"] { height: calc((100 + var(--e-scrub) + var(--e-hand)) * 1svh); }
}
@media (max-width: 860px) {
	.scene--entrance[data-media="sequence"] { --panel-inset: 4%; }
}

.scene--entrance[data-media="sequence"] .scene__stage { background: var(--ink); }

/* Capas de imagen: el póster (cuadro 0) siempre debajo; el lienzo lo cubre cuando dibuja. */
.entrance__poster, .entrance__blur { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.entrance__poster img, .entrance__blur img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Mismo anclaje vertical que dibuja entrada.js (focus del manifiesto): cuadro 0 arriba, último cuadro abajo; solo se nota en pantallas más anchas que 16:9. */
.entrance__poster img { object-position: 50% 0; }
.entrance__blur img { object-position: 50% 100%; }
/* El lienzo (opaco, negro de fábrica) no se ve hasta que entrada.js dibuja el primer cuadro válido y añade .is-painted: hasta
   entonces se ve el póster (1.2.2). object-fit: si el lienzo conserva un instante el tamaño anterior (giro de pantalla), se
   escala sin deformar. */
.entrance__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; object-fit: cover; }
.entrance__canvas.is-painted { opacity: 1; }
.entrance__blur--6 { opacity: var(--b6); }
.entrance__blur--12 { opacity: var(--b12); }
.entrance__dim { position: absolute; inset: 0; background: var(--ink); opacity: var(--dim); pointer-events: none; }

/* El fundido final de home.css (genérico de .scene--entrance) se sustituye por la base oscura del traspaso. */
.scene--entrance[data-media="sequence"] .scene__stage::after {
	background: linear-gradient(to bottom, rgba(11, 10, 10, 0) 58%, var(--ink) 100%);
	opacity: var(--ground);
}

/* Panel de cristal: nace en los bordes de la pantalla (donde las puertas se apartaron) y se asienta sobre su
   rectángulo. Cristal «claro» de la marca: borde fino, brillo interior, lecho ahumado bajo el texto. Sin
   desenfoque de fondo en vivo (el desenfoque ya viene en las imágenes prerrenderizadas). */
.entrance__panel {
	position: absolute;
	z-index: 3;
	left: calc(var(--panel-inset) * var(--pe));
	right: calc(var(--panel-inset) * var(--pe));
	top: calc((var(--header-h) + var(--safe-top) + 14px) * var(--pe));
	bottom: -24px;
	border-radius: calc(var(--r-outer) * var(--pe));
	border: 1px solid rgba(255, 255, 255, calc(0.2 * var(--pe)));
	background:
		linear-gradient(180deg, rgba(255, 255, 255, calc(0.07 * var(--pe))), rgba(255, 255, 255, 0) 38%),
		rgba(var(--smoke-rgb), calc(0.62 * var(--bed)));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, calc(0.22 * var(--pe))), 0 24px 80px rgba(0, 0, 0, calc(0.3 * var(--pe)));
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 160px), transparent 100%);
	pointer-events: none;
}

/* Sin JavaScript o con movimiento reducido: solo el póster. */
html:not(.js) .entrance__canvas, html:not(.js) .entrance__blur, html:not(.js) .entrance__dim, html:not(.js) .entrance__panel,
.glo-rm .entrance__canvas, .glo-rm .entrance__blur, .glo-rm .entrance__dim, .glo-rm .entrance__panel { display: none; }

/* Traspaso a Novedades -------------------------------------------------------
   Novedades sube por encima de la escena fijada (100svh): su contenido queda dentro del panel de cristal. */
.js:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades {
	margin-top: -100vh;
	position: relative;
	z-index: 2;
}
@supports (height: 1svh) {
	.js:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades { margin-top: -100svh; }
}
/* Cuando entrada.js está activo, la primera pantalla de Novedades es transparente (se ve la escena) y el resto
   conserva su fondo oscuro. Si entrada.js no cargara, Novedades conserva su fondo opaco de siempre. */
.glo-ent-ready:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades {
	background:
		radial-gradient(90% 60% at 80% 0%, rgba(215, 14, 22, 0.07), transparent 60%),
		linear-gradient(to bottom, transparent 100vh, var(--ink) 100vh);
}
@supports (height: 1svh) {
	.glo-ent-ready:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades {
		background:
			radial-gradient(90% 60% at 80% 0%, rgba(215, 14, 22, 0.07), transparent 60%),
			linear-gradient(to bottom, transparent 100svh, var(--ink) 100svh);
	}
}
.glo-ent-ready:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades .container {
	opacity: var(--nq, 1);
	transform: translate3d(0, calc((1 - var(--nq, 1)) * 16px), 0);
}
.glo-ent-ready:not(.glo-rm) .scene--entrance[data-media="sequence"] ~ .section--novedades.is-held { pointer-events: none; }