/**
 * La cita bíblica que va rotando.
 *
 * Se conserva la tipografía que ya tenía el widget de Elementor: solo se
 * añade el comportamiento, no se le cambia el aspecto.
 */

.fs-ver {
	/* OJO: NO puede quedarse en línea.
	 *
	 * Esto nació como <span>, o sea en línea, y min-height no aplica a los
	 * elementos en línea no reemplazados: la reserva de altura de abajo no
	 * estaba haciendo absolutamente nada, y por eso el fondo de hojas daba
	 * un brinco cada vez que aparecía el renglón de la referencia. En flex
	 * sí aplica, y de paso permite centrarlas. */
	display: flex;
	flex-direction: column;
	justify-content: center;

	/* Centradas en vertical dentro del hueco reservado. Si se dejaran
	 * arriba, «El Señor es mi pastor; nada me faltará.» —que ocupa un
	 * renglón menos que las otras— se quedaría pegada al borde de arriba
	 * con un hueco debajo, y se notaría la reserva.
	 *
	 * Reserva aproximada para el primer pintado. En cuanto corre el
	 * JavaScript se sustituye por la altura medida de verdad, que es la de
	 * la cita más larga de las cuatro al ancho que toque. */
	min-height: 3.2em;

	transition: opacity .9s ease;
}

.fs-ver.es-yendose {
	opacity: 0;
}

.fs-ver__cita {
	display: block;
	margin-top: .35em;
	opacity: 0;
	transition: opacity .6s ease;
}

.fs-ver.es-completa .fs-ver__cita {
	opacity: 1;
}

/* El cursor solo mientras se escribe: un cursor parpadeando para siempre
   bajo una frase de consuelo es ruido. */
.fs-ver.es-escribiendo .fs-ver__texto::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: .95em;
	margin-left: 2px;
	vertical-align: text-bottom;
	background: currentColor;
	opacity: .55;
	animation: fs-ver-latido 1.1s steps(1) infinite;
}

@keyframes fs-ver-latido {
	0%, 50%   { opacity: .55; }
	51%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.fs-ver,
	.fs-ver__cita { transition: none; }
	.fs-ver__cita { opacity: 1; }
	.fs-ver.es-escribiendo .fs-ver__texto::after { display: none; }
}

@media (max-width: 640px) {
	.fs-ver { min-height: 5.2em; }
}
