/* ═══════════════════════════════════════════════════════════════
   Presentazione: dissolvenza in solo CSS.

   Le foto sono sovrapposte. Ognuna entra in dissolvenza sopra la
   precedente e poi resta opaca fino alla fine del giro, scendendo di un
   piano (`z-index`) perche' la successiva possa entrarle sopra. Non
   esiste un istante in cui due foto sono entrambe semitrasparenti,
   quindi non si vede mai attraverso.

   Il rapporto del riquadro serve solo dove l'altezza e' libera, cioe' da
   telefono: da schermo largo la colonna della home impone la sua altezza
   e `aspect-ratio` viene ignorato.
   ═══════════════════════════════════════════════════════════════ */

.dmr-slides {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	aspect-ratio: var(--dmr-formato, 1400 / 1600);
	overflow: hidden;
}

.dmr-slides > .dmr-slide {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	opacity: 0;
	animation-name: dmr-dissolvenza;
	animation-duration: calc(var(--dmr-quante) * var(--dmr-durata));
	/* Meno la sfumatura: cosi' la dissolvenza avviene nel secondo che
	   *precede* il turno della foto, e al caricamento la prima e' gia'
	   opaca invece di entrare da un fondo bianco. */
	animation-delay: calc(var(--i) * var(--dmr-durata) - var(--dmr-sfumatura));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	/* `backwards` tiene la foto trasparente durante l'attesa del suo turno:
	   senza, prima di partire mostrerebbe lo stile di base e sarebbero
	   tutte visibili insieme per un istante al caricamento. */
	animation-fill-mode: both;
}

.dmr-slides > .dmr-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Una sola foto: niente da alternare. */
.dmr-slides > .dmr-slide:only-child {
	animation: none;
	opacity: 1;
}

/* Chi ha chiesto meno animazioni vede la prima foto, ferma. */
@media (prefers-reduced-motion: reduce) {
	.dmr-slides > .dmr-slide {
		animation: none;
		opacity: 0;
	}
	.dmr-slides > .dmr-slide:first-child {
		opacity: 1;
	}
}