/* Colección XV · BASE 4 · Escena y espectáculo
   Portada inmersiva: escenario de gran escala, objeto protagonista y nombre. Secuencia de apertura: al abrir el
   sobre, la apertura (iris) pasa de un punto a un círculo y revela el retrato; con el scroll el círculo se vuelve
   una apertura panorámica (inset en vw/vh: la foto no se deforma). Recorrido por escenas numeradas con scroll
   natural; el objeto (viajero) sigue de escena en escena. Medidas de la apertura por concepto:
   --a0* cerrada (un punto), --a1* círculo, --a2* panorámica (t, r, b, l, k = radio). */

.base-escena {
	--a0t: 40vh; --a0r: 50vw; --a0b: 60vh; --a0l: 50vw; --a0k: 0px;
	--a1t: 18vh; --a1r: calc(50vw - 22vh); --a1b: 38vh; --a1l: calc(50vw - 22vh); --a1k: 22vh;
	--a2t: 10vh; --a2r: 6vw; --a2b: 40vh; --a2l: 6vw; --a2k: 18px;
}
.e-portada { --m: clamp(0, (var(--p, 0) - .08) / .7, 1); }
.e-escena { color: var(--tinta); }
.e-escenario { position: absolute; inset: -4% 0; }
.e-fondo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(calc(1 + var(--p, 0) * .08)); }
.e-apertura {
	position: absolute; inset: 0; z-index: 1;
	clip-path: inset(calc(var(--a1t) + (var(--a2t) - var(--a1t)) * var(--m)) calc(var(--a1r) + (var(--a2r) - var(--a1r)) * var(--m))
		calc(var(--a1b) + (var(--a2b) - var(--a1b)) * var(--m)) calc(var(--a1l) + (var(--a2l) - var(--a1l)) * var(--m))
		round calc(var(--a1k) + (var(--a2k) - var(--a1k)) * var(--m)));
}
html:not(.e-abierto) .e-apertura { clip-path: inset(var(--a0t) var(--a0r) var(--a0b) var(--a0l) round var(--a0k)); }
html.e-abriendo .e-apertura { transition: clip-path 1.6s cubic-bezier(.77,0,.175,1); }
.e-retrato { position: absolute; inset: 0; }
.e-apertura-arte { position: absolute; inset: 0; }
.e-objeto { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.e-objeto img { position: absolute; }
.e-titulos {
	position: absolute; z-index: 3; left: 50%; top: calc(100vh - var(--a1b) + 2vh); width: min(92vw, 1100px);
	display: grid; justify-items: center; gap: 8px; text-align: center;
	transform: translate(-50%, calc(var(--m) * -2vh));
}
.e-nombre { font-size: calc(clamp(4rem, 9vw, 8.4rem) * var(--n, 1)); color: var(--nombre-color, var(--tinta)); padding: 0 .15em .12em; }
.e-evento { color: var(--acento); }
.e-pista { position: absolute; z-index: 4; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); opacity: calc(1 - var(--p, 0) * 4); }

/* Escenas: cada sección ocupa una pantalla, con su número grande detrás y su rótulo. */
.e-sec { min-height: 100vh; min-height: 100svh; display: grid; align-items: center; }
.e-marco { position: relative; width: 100%; opacity: clamp(.25, var(--p, .5) * 3.2, 1); transform: scale(calc(.97 + clamp(0, var(--p, .5) * 3, 1) * .03)); }
.e-numero {
	position: absolute; z-index: -1; top: -.32em; left: -.04em; pointer-events: none;
	font-family: var(--sans); font-weight: 800; font-size: clamp(8rem, 22vw, 20rem); line-height: 1; letter-spacing: -.06em;
	color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--tinta) 22%, transparent);
	transform: translateY(calc((var(--p, .5) - .5) * -14vh));
}
.xv-centro > .e-numero { left: 50%; translate: -50% 0; }
.e-rotulo { margin-bottom: clamp(26px, 4vh, 44px); color: var(--acento); }
.e-par { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(28px, 6vw, 90px); align-items: end; }
.e-par-b { display: grid; gap: 18px; }
.e-fecha-caja { position: relative; display: grid; justify-items: center; padding: clamp(30px, 4vw, 54px) clamp(40px, 6vw, 80px); margin-bottom: 10px; }
.e-dia { font-size: clamp(7rem, 16vw, 12rem); font-weight: 200; }
.e-mes { font-family: var(--script); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--acento); line-height: 1; margin-top: -.1em; }
.e-cuenta { justify-items: center; margin: 22px 0 10px; }
.e-lugar { background: color-mix(in srgb, var(--papel) 88%, transparent); }
.e-programa-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(28px, 6vw, 90px); align-items: start; }
.e-programa-grid .xv-itinerario { margin: 0; max-width: none; }
.e-programa-obj { position: relative; height: 34vh; }
.e-vestir { margin-top: 56px; }
.e-vestir .xv-vestimenta { justify-items: start; text-align: left; }
.e-vestir .xv-muestras { justify-content: flex-start; }
.e-galeria .xv-galeria { grid-auto-rows: clamp(150px, 17vw, 240px); }
.e-galeria .g-ancha { grid-column: span 8; grid-row: span 2; }
.e-galeria .g-media { grid-column: span 4; }
.e-detalles-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 60px); align-items: start; }
.e-rsvp { margin-inline: auto; }
.e-nombre-fin { font-size: calc(clamp(4.4rem, 11vw, 9rem) * var(--n, 1)); color: var(--acento); }

.base-escena .xv-viajero { z-index: 0; }

@media (max-width: 760px) {
	.base-escena {
		--a0t: 36vh; --a0r: 50vw; --a0b: 64vh; --a0l: 50vw;
		--a1t: 14vh; --a1r: 12vw; --a1b: 46vh; --a1l: 12vw; --a1k: 38vw;
		--a2t: 10vh; --a2r: 4vw;  --a2b: 44vh; --a2l: 4vw;  --a2k: 14px;
	}
	.e-par, .e-programa-grid, .e-detalles-grid { grid-template-columns: 1fr; }
	.e-programa-obj { height: 18vh; }
	.e-galeria .g-ancha { grid-column: span 6; }
	.e-galeria .g-media { grid-column: span 3; }
	.e-numero { font-size: 40vw; top: -.2em; }
	.e-sec { min-height: auto; }
}
html.quieto .e-portada { --m: 0; }
html.quieto .e-marco, html.quieto .e-numero { opacity: 1; transform: none; }