/*
 * Núcleo de movimiento (spec R1 §7.1 y §7.3): estados previos bajo .vs-js y movimiento reducido.
 * Portado del prototipo v22 (titulares partidos, .rv, .marco y cascada). Los estados previos
 * se quedan visibles (opacidad baja y desplazados), nunca invisibles.
 */

/* Titulares partidos: cada palabra sube dentro de su caja. */
.w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}

.w > span {
	display: inline-block;
	transition:
		transform var(--vs-dur-revelado) var(--vs-curva-ease),
		opacity var(--vs-dur-revelado) var(--vs-curva-ease);
}

.vs-js .pre .w > span {
	transform: translateY(80%);
	opacity: 0.12;
}

/* Revelado de bloques y de los hijos de una cascada. */
.rv,
:where([data-cascada]) > * {
	transition:
		opacity var(--vs-dur-revelado) var(--vs-curva-ease),
		transform var(--vs-dur-revelado) var(--vs-curva-ease);
}

.vs-js .rv.pre {
	opacity: 0.2;
	transform: translateY(48px);
}

.vs-js :where([data-cascada]) > .pre {
	opacity: 0.2;
	transform: translateY(40px);
}

/* Fotos: el marco se abre y la imagen se asienta. */
.vs-js .marco.pre {
	clip-path: inset(12% 0);
}

.vs-js .marco.pre img {
	transform: scale(1.18);
}

.vs-js *,
.vs-js *::before,
.vs-js *::after {
	/* Movimiento reducido: nada se anima ni transiciona; todo en su estado final. */
	@media (prefers-reduced-motion: reduce) {
		animation: none !important;
		transition: none !important;
	}
}