/**
 * Slideshow per il blocco Copertina — animazioni (sito ed editor)
 * ------------------------------------------------------------
 * Le immagini aggiunte hanno la stessa classe dello sfondo della Copertina
 * (.wp-block-cover__image-background): posizione, ritaglio e bicromia
 * arrivano dal CSS di WordPress. Qui ci sono solo dissolvenza e movimenti.
 *
 * Variabili su ogni immagine:
 *   --fx, --fy           punto focale (0–1)
 *   --px1/--py1 → --px2/--py2   percorso della panoramica (0–1)
 *   --pz                 zoom durante il percorso (0.1 = +10%)
 *   --cc-interval        durata di una slide
 */

/* --- Livelli ---------------------------------------------------------------------
   Ordine esplicito, dal basso: immagini → velo → contenuto → pulsante pausa.
   Serve perché nell'editor le immagini aggiunte stanno in fondo alla Copertina
   e, senza z-index, coprirebbero velo e testo.
   .cc-cover-slideshow è la classe aggiunta sul sito; :has() copre l'editor. */
:is(.wp-block-cover.cc-cover-slideshow, .wp-block-cover:has(> img.cc-slide-extra)) > img.cc-slide {
	z-index: 0;
}
:is(.wp-block-cover.cc-cover-slideshow, .wp-block-cover:has(> img.cc-slide-extra)) > .wp-block-cover__background {
	z-index: 1;
}
:is(.wp-block-cover.cc-cover-slideshow, .wp-block-cover:has(> img.cc-slide-extra)) > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.wp-block-cover > img.cc-slide {
	/* Il movimento dura un po' più della slide, così non si ferma prima del cambio */
	--cc-dur: calc(var(--cc-interval, 6000ms) + 1500ms);
	transform-origin: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
}

/* --- Dissolvenza ------------------------------------------------------------
   L'immagine della Copertina resta sempre sotto; le altre compaiono sopra.
   .is-prev tiene visibile l'immagine uscente finché quella nuova non l'ha coperta. */
.wp-block-cover > img.cc-slide-extra {
	opacity: 0;
	transition: opacity 1.5s ease-in-out;
	object-position: calc(var(--fx, .5) * 100%) calc(var(--fy, .5) * 100%);
}
.wp-block-cover > img.cc-slide-extra:is(.is-active, .is-prev) {
	opacity: 1 !important; /* vince sull'opacity:0 scritto nell'HTML */
}

/* --- Zoom lento verso il punto focale ------------------------------------------ */
.wp-block-cover > img.cc-slide.is-move-zoom:is(.is-active, .is-prev) {
	animation: ccCoverZoom var(--cc-dur) linear forwards;
}
@keyframes ccCoverZoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* --- Panoramiche ---------------------------------------------------------------
   Le direzioni impostano partenza e arrivo; un percorso disegnato
   nell'editor li sovrascrive con le variabili scritte sull'immagine. */
.wp-block-cover > img.cc-slide.is-move-pan-down  { --px1: var(--fx, .5); --py1: 0; --px2: var(--fx, .5); --py2: 1; }
.wp-block-cover > img.cc-slide.is-move-pan-up    { --px1: var(--fx, .5); --py1: 1; --px2: var(--fx, .5); --py2: 0; }
.wp-block-cover > img.cc-slide.is-move-pan-right { --px1: 0; --py1: var(--fy, .5); --px2: 1; --py2: var(--fy, .5); }
.wp-block-cover > img.cc-slide.is-move-pan-left  { --px1: 1; --py1: var(--fy, .5); --px2: 0; --py2: var(--fy, .5); }

.wp-block-cover > img.cc-slide:is(.is-move-pan-down, .is-move-pan-up, .is-move-pan-right, .is-move-pan-left, .is-move-path):is(.is-active, .is-prev) {
	/* Lo zoom facoltativo del percorso si concentra sul punto di arrivo */
	transform-origin: calc(var(--px2, .5) * 100%) calc(var(--py2, .5) * 100%);
	animation: ccCoverPath var(--cc-dur) ease-in-out forwards;
}
@keyframes ccCoverPath {
	from {
		object-position: calc(var(--px1, .5) * 100%) calc(var(--py1, .5) * 100%);
		transform: scale(1);
	}
	to {
		object-position: calc(var(--px2, .5) * 100%) calc(var(--py2, .5) * 100%);
		transform: scale(calc(1 + var(--pz, 0)));
	}
}

/* Pausa: si ferma anche il movimento in corso */
.cc-cover-slideshow.is-paused > img.cc-slide {
	animation-play-state: paused;
}

/* --- Pulsante pausa, discreto, in basso a destra -------------------------------- */
.wp-block-cover > .cc-cover-pause {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3; /* sopra velo e contenuto */
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 50%;
	background: rgba(0, 0, 0, .35);
	color: #fff;
	font-size: .75rem;
	line-height: 1;
	cursor: pointer;
}
.wp-block-cover > .cc-cover-pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
/* Testo per i lettori di schermo, invisibile a video */
.cc-cover-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Riduci movimento: solo l'immagine della Copertina, ferma ------------------ */
@media (prefers-reduced-motion: reduce) {
	.wp-block-cover > img.cc-slide { animation: none !important; }
	.wp-block-cover > img.cc-slide-extra { display: none; }
	.wp-block-cover > .cc-cover-pause { display: none; }
}