/*
 * Jacleroi Portfolio — slider dei loghi clienti.
 *
 * Un "binario" con dentro due copie della stessa fila, affiancate, che scorre
 * verso sinistra di meta' della sua lunghezza: quando la prima copia e'
 * uscita, la seconda e' esattamente dove stava la prima, e il giro ricomincia
 * senza salti.
 *
 * Dalla 1.6.0:
 * - un'animazione sola, sul binario. Prima ce n'era una per fila: se il
 *   browser ne rallentava o riavviava una sola, le due file si sfasavano e sul
 *   telefono dopo un po' restava un tratto vuoto;
 * - i bordi sfumano con due fasce sovrapposte del colore della pagina, non
 *   piu' con `mask-image`: una maschera sopra un elemento animato largo
 *   migliaia di pixel e' una combinazione che su iOS fa sparire il contenuto.
 *
 * Caricato solo sulle pagine che contengono lo slider.
 */

.jlrp-loghi {
	--jlrp-loghi-misura: 200px;
	--jlrp-loghi-spazio: 48px;
	--jlrp-loghi-sfondo: #f7f6f4;

	overflow: hidden;
	position: relative;
}

/* I bordi sfumano invece di tagliare il logo di netto. */
.jlrp-loghi::before,
.jlrp-loghi::after {
	bottom: 0;
	content: "";
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 8%;
	z-index: 1;
}

.jlrp-loghi::before {
	background: linear-gradient(90deg, var(--jlrp-loghi-sfondo), transparent);
	left: 0;
}

.jlrp-loghi::after {
	background: linear-gradient(270deg, var(--jlrp-loghi-sfondo), transparent);
	right: 0;
}

.jlrp-loghi__binario {
	animation: jlrp-loghi-scorri var(--jlrp-loghi-durata, 45s) linear infinite;
	display: flex;
	width: max-content;
}

.jlrp-loghi__fila {
	display: flex;
	flex-shrink: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

@keyframes jlrp-loghi-scorri {
	to {
		transform: translateX(-50%);
	}
}

/* I file sono quadrati 600x600 con il marchio al centro: stessa misura per
   tutti, nessun ritaglio.
   Lo spazio e' un margine a destra di OGNI logo, non un `gap` sulla fila:
   cosi' anche l'ultimo logo di una copia ha il suo spazio prima del primo
   della copia dopo, e il giro si chiude senza un punto piu' stretto. */
.jlrp-loghi__logo {
	flex: 0 0 var(--jlrp-loghi-misura);
	margin: 0 var(--jlrp-loghi-spazio) 0 0;
	position: relative;
}

/* `!important` perche' sul sito ogni immagine riceve uno stile inline
   `width:100%;height:60%`. */
.jlrp-loghi__logo img {
	display: block;
	height: auto !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* Bianco e nero sotto, colore sopra e spento. Il selettore e' a tre classi
   perche' i plugin di lazyload danno `opacity` alle immagini con regole a una
   classe stampate dopo questo foglio (Smush: `.lazyloaded { opacity: 1 }`),
   e a pari specificita' vincerebbero loro: il colore resterebbe acceso. */
.jlrp-loghi .jlrp-loghi__logo .jlrp-loghi__bn {
	opacity: 1;
}

.jlrp-loghi .jlrp-loghi__logo .jlrp-loghi__colore {
	inset: 0;
	opacity: 0;
	position: absolute;
	transition: opacity 0.3s;
}

/* Colore e pausa solo dove c'e' un vero puntatore. Su un telefono il tocco
   lascia `:hover` acceso finche' non si tocca altrove: lo slider restava
   fermo e il logo toccato a colori. */
@media (hover: hover) {
	.jlrp-loghi:hover .jlrp-loghi__binario {
		animation-play-state: paused;
	}

	.jlrp-loghi .jlrp-loghi__logo:hover .jlrp-loghi__colore {
		opacity: 1;
	}
}

@media (max-width: 601px) {
	.jlrp-loghi {
		--jlrp-loghi-misura: 140px;
		--jlrp-loghi-spazio: 32px;
	}
}

/* Chi ha chiesto meno movimento vede i loghi fermi, in griglia. */
@media (prefers-reduced-motion: reduce) {
	.jlrp-loghi::before,
	.jlrp-loghi::after {
		display: none;
	}

	.jlrp-loghi__binario {
		animation: none;
		width: auto;
	}

	.jlrp-loghi__fila {
		flex-shrink: 1;
		flex-wrap: wrap;
		justify-content: center;
	}

	.jlrp-loghi__fila[aria-hidden="true"] {
		display: none;
	}
}