/* ===== AZ Loghi — la striscia che scorre =====
   Nessun JavaScript: l'animazione la porta avanti il browser, che la
   sospende da solo quando la scheda va in secondo piano. */

.az-log{
	--az-log-altezza:56px;
	/* Il tetto alla larghezza di un logo, in multipli dell'altezza.
	   I loghi si allineano per altezza: uno molto lungo, senza freno, si
	   prenderebbe mezza striscia. Ma chi ci sbatte contro non viene
	   tagliato, viene rimpicciolito da `object-fit` — e quindi esce piu'
	   basso degli altri, che in una fila allineata per altezza e' proprio
	   la cosa che si nota. Era 2,6 (il Museo, 3,26 a 1, usciva alto 96
	   invece di 120), poi 4 (Infotab orizzontale, 4,66 a 1, usciva 103).
	   A 5 ci passano i marchi orizzontali veri.
	   Lo stesso numero sta in az-loghi.php come AZ_LOG_TETTO. */
	--az-log-larghezza:calc(var(--az-log-altezza) * 5);
	--az-log-durata:40s;
	--az-log-spazio:56px;   /* distanza fra un logo e l'altro */
	overflow:hidden;
	width:100%;
	/* Lo spazio sopra e sotto serve al logo ingrandito e alla sua ombra:
	   la striscia ha overflow nascosto per il gioco dello scorrimento, e
	   senza margine il logo che si alza verrebbe tagliato di netto. */
	padding:16px 0;
}
.az-log *{ box-sizing:border-box; }

/* Il titolino: nero, grasso e ben visibile.
   
   La misura e' un `clamp`: 1,25rem sul telefono, fino a 1,75 su schermo
   largo. Un corpo fisso o sarebbe minuscolo sul grande o straborderebbe
   sul piccolo, e questa scritta sta in fondo a ogni pagina del sito.
   
   Niente `text-transform: uppercase`, che c'era prima: rendeva tutto in
   maiuscolo e quindi le maiuscole scritte davvero — la S di "Serviti" —
   sparivano dentro le altre. Un testo che cancella le scelte di chi lo
   scrive e' un testo che decide al posto suo.
   
   E niente opacita' ridotta: era .55, cioe' un grigio slavato su fondo
   chiaro. Se una scritta merita di stare in pagina, merita di leggersi. */
.az-log-titolo{
	/* Riga in flex, non testo centrato: i due filetti ai lati sono figli
	   veri della riga, quindi si prendono da soli lo spazio che avanza e
	   la scritta resta al centro qualunque cosa ci sia scritto dentro.
	   Con `text-align` avrebbero dovuto essere posizionati a mano, e a
	   ogni cambio di testo sarebbero finiti storti. */
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
	gap:clamp(10px, 2vw, 20px);

	text-align:center;
	font-size:clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight:800;
	font-style:italic;
	letter-spacing:.2px;
	line-height:1.2;
	text-transform:none;
	color:#000;
	opacity:1;
	margin:0 0 22px;
}

/* I due filetti che affiancano la scritta.

   Ognuno e' una riga sottile che sfuma verso l'esterno e si chiude, dal
   lato della scritta, con lo STESSO punto che separa un logo dall'altro:
   9px, #067781. E' quello che lega il titolo alla striscia — si capisce
   a colpo d'occhio che sono la stessa cosa, senza doverlo spiegare.

   Sono disegnati con due sfondi sovrapposti invece che con altri
   elementi: il punto e' un cerchio (radial-gradient), la riga e' una
   sfumatura alta 2px centrata in altezza (linear-gradient). Cosi' non
   serve aggiungere niente alla marcatura, e un lettore di schermo non
   trova due elementi vuoti da annunciare.

   L'altezza e' 9px come il punto: se fosse 2px come la riga, il cerchio
   verrebbe tagliato sopra e sotto e sembrerebbe una lenticchia.

   Il colore e' SEMPRE #067781, punto e riga: a sfumare verso l'esterno
   e' solo la trasparenza, non la tinta. Un verde-azzurro schiarito
   sarebbe un altro colore, e in fondo alla pagina si vedrebbe. */
.az-log-titolo::before,
.az-log-titolo::after{
	content:'';
	/* si prendono lo spazio che avanza, ma con un tetto: su schermi molto
	   larghi due righe lunghissime prenderebbero il sopravvento sul testo */
	flex:1 1 0;
	min-width:0;
	max-width:180px;
	height:9px;
	background-repeat:no-repeat;
}

/* quello di sinistra: sfuma da fuori verso dentro, punto all'estremita' destra */
.az-log-titolo::before{
	background-image:
		radial-gradient(circle at calc(100% - 4.5px) 50%, #067781 4.5px, transparent 4.6px),
		linear-gradient(to right, rgba(6,119,129,0), #067781);
	background-size:100% 100%, calc(100% - 12px) 2px;
	background-position:0 0, 0 50%;
}

/* quello di destra: specchiato */
.az-log-titolo::after{
	background-image:
		radial-gradient(circle at 4.5px 50%, #067781 4.5px, transparent 4.6px),
		linear-gradient(to left, rgba(6,119,129,0), #067781);
	background-size:100% 100%, calc(100% - 12px) 2px;
	background-position:0 0, 100% 50%;
}

/* Le righe di separazione, sopra e sotto la striscia.

   Stesso principio dei filetti che affiancano il titolo: il colore e'
   sempre #067781 e a sfumare e' solo la trasparenza, verso i due lati.
   Il capo trasparente e' la stessa tinta ad alfa zero e non
   `transparent`, che in certi motori sfuma passando per il grigio.

   Non serve un margine ai lati per farle finire dove finiscono i loghi:
   stanno dentro `.az-log`, che ha gia' la sua sfumatura ai bordi, quindi
   si spengono esattamente dove si spengono i loghi. Le tre cose finiscono
   insieme, ed e' quello che le fa sembrare una cosa sola. */
.az-log-riga{
	height:2px;
	margin:0 0 18px;
	background:linear-gradient(to right,
		rgba(6,119,129,0), #067781 22%, #067781 78%, rgba(6,119,129,0));
	/* la riga sotto la striscia: lo spazio va sopra, non sotto */
	border:0;
}
.az-log-pista + .az-log-riga{ margin:18px 0 0; }

@media (max-width:700px){
	.az-log-riga{ margin-bottom:12px; }
	.az-log-pista + .az-log-riga{ margin:12px 0 0; }
}

/* Le due file affiancate. Insieme fanno il doppio della larghezza utile:
   l'animazione ne scorre esattamente la meta', cosi' quando riparte la
   seconda copia si trova dove stava la prima e il salto non si vede. */
.az-log-pista{
	display:flex;
	width:max-content;
	animation:az-log-scorri var(--az-log-durata) linear infinite;

	/* Tre righe che decidono se l'animazione e' fluida o a scatti.
	
	   `will-change` avvisa il browser prima di cominciare: promuove la
	   fila a livello suo sulla scheda grafica, invece di farla
	   ridisegnare dal processore a ogni fotogramma. Senza, con immagini
	   grandi ridotte a 120px il browser le ricampiona in continuazione.
	
	   `backface-visibility` e la Z a zero in `translate3d` sono la
	   maniera storica di chiedere la stessa cosa ai browser che
	   `will-change` non lo guardano. Non fanno danno dove non servono. */
	will-change:transform;
	backface-visibility:hidden;
	transform:translate3d(0,0,0);
}
.az-log-fila{
	display:flex;
	align-items:center;
	gap:var(--az-log-spazio);
	padding-right:var(--az-log-spazio);
	flex:none;
}

/* Il punto fra un logo e l'altro.
   
   E' un elemento decorativo puro, disegnato dal CSS: non sta nella
   marcatura, quindi non finisce nella pagina, non viene letto dai lettori
   di schermo e non tocca il meccanismo del giro.
   
   Sta **dopo ogni logo, ultimo compreso**. Sembra un errore e non lo e':
   le due file si susseguono senza stacco, quindi il punto dell'ultimo
   logo e' quello che separa la fine di una copia dall'inizio della
   successiva. Togliendolo all'ultimo, al riavvolgimento si vedrebbe
   mancare un intervallo — ed e' proprio il momento in cui non deve
   succedere niente di visibile. */
.az-log-fila > *{ position:relative; }
.az-log-fila > *::after{
	content:'';
	position:absolute;
	/* a meta' dello spazio vuoto che segue, quindi sempre in mezzo ai due
	   loghi qualunque sia la loro larghezza */
	left:calc(100% + var(--az-log-spazio) / 2);
	top:50%;
	transform:translate(-50%, -50%);
	width:9px; height:9px;
	border-radius:50%;
	/* Il verde-azzurro di casa, non `currentColor`: prima ereditava il
	   colore del testo del pie' di pagina e l'opacita' al 25% lo rendeva
	   un grigino qualunque. Un colore scelto va mostrato per quello che
	   e', quindi niente trasparenza sopra. */
	background:#067781;
	pointer-events:none;
}

/* translate3d e non translateX: la terza coordinata, anche a zero, e' cio'
   che manda l'animazione sulla scheda grafica invece che sul processore.
   E' la differenza fra uno scorrimento liscio e uno che vibra.

   Un terzo, non la meta': la pista contiene TRE copie della fila, quindi
   spostarsi di 1/3 vuol dire spostarsi di una fila esatta — la seconda
   copia finisce dov'era la prima e il riavvolgimento non si vede. La terza
   copia e' li' solo per riempire lo schermo nell'ultimo istante della
   corsa, ed e' cio' che permette a una fila corta di coprire un monitor
   largo il doppio. La lunghezza della corsa resta una fila come prima:
   stessa distanza, stesso tempo, stessa velocita' di sempre.

   `calc(-100% / 3)` e non -33.333% scritto a mano: e' la stessa cosa per
   il browser, che infatti la riduce subito a -33.3333% — su una pista di
   6800px sono sette millesimi di pixel, invisibili. Si scrive cosi' perche'
   dice da dove viene il numero: un terzo, perche' le copie sono tre. Se un
   domani diventano quattro, si vede subito cosa cambiare. */
@keyframes az-log-scorri{
	from{ transform:translate3d(0,0,0); }
	to  { transform:translate3d(calc(-100% / 3),0,0); }
}

/* Si ferma se ci passi sopra: e' il momento in cui uno sta guardando
   un logo e vuole leggerlo. */
.az-log:hover .az-log-pista{ animation-play-state:paused; }

/* Un tetto all'altezza **e** uno alla larghezza.
   
   Allineando solo l'altezza, un logo quadrato e uno lungo tre volte tanto
   finiscono con superfici molto diverse: il quadrato sembra piccolo anche
   se e' alto uguale. Col tetto anche in larghezza il logo lungo si abbassa
   da solo e le due macchie pesano quasi uguale all'occhio.
   
   height/width auto e non fissi: cosi' l'immagine sceglie da sola quale
   dei due limiti la tocca per prima, senza deformarsi mai. */
.az-log-logo{
	/* L'altezza e' **definita**, non `auto`, e questo e' il punto.
	
	   Con height:auto un'immagine ancora da scaricare non ha da cui
	   partire: gli attributi width/height le danno la proporzione ma non
	   una misura, e il browser la disegna 0x0 — la fila veniva larga 448px
	   invece di 1950 e si vedeva un buco passare. Dura poco, il tempo che
	   i file arrivino, ma e' esattamente il momento in cui qualcuno guarda
	   la striscia per la prima volta.
	
	   Con l'altezza fissa lo spazio esiste da subito. La larghezza resta
	   auto e si adegua, con un tetto; se un logo e' cosi' lungo da
	   toccarlo, `object-fit:contain` lo fa entrare nel riquadro senza
	   deformarlo mai — e' quello che protegge le proporzioni ora che
	   l'altezza non e' piu' negoziabile. */
	/* `--az-log-peso` e' il ritocco ottico del singolo logo: 1 se non e'
	   stato toccato, 0,9 per rimpicciolirlo del 10%, e cosi' via. Sta
	   sull'involucro, quindi qui si eredita. Moltiplica anche il tetto,
	   se no un logo rimpicciolito manterrebbe il vecchio limite e a un
	   certo punto smetterebbe di rimpicciolire. */
	height:calc(var(--az-log-altezza) * var(--az-log-peso, 1));
	width:auto;
	max-width:calc(var(--az-log-larghezza) * var(--az-log-peso, 1));
	object-fit:contain;
	flex:none;
	display:block;
	/* i loghi arrivano da file molto grandi: questo evita che vengano
	   ricampionati mentre scorrono */
	backface-visibility:hidden;
	transition:filter .25s ease, opacity .25s ease;
}

/* L'involucro del logo: c'e' SEMPRE, anche quando non si clicca.

   E' un <a> se il logo ha un indirizzo, un <span> se non ce l'ha, e da
   qui in giu' si comportano allo stesso modo. Serve perche' il punto fra
   i loghi si disegna su questo elemento: un'immagine nuda non puo'
   portarlo, ed e' cosi' che la fila dei punti si interrompeva.

   Non deve aggiungere niente di suo (niente sottolineature, niente colore
   di sfondo del tema), ma quando e' un collegamento deve restare visibile
   a chi naviga con la tastiera. */
.az-log-voce{ display:block; line-height:0; text-decoration:none; border:0; flex:none;
	transition:transform .28s cubic-bezier(.2,.7,.3,1), filter .28s ease; }
/* Il riquadro attorno al logo: solo per chi naviga da tastiera.

   Cliccando con il mouse su un collegamento il browser gli lascia il
   fuoco, e il riquadro restava li' anche dopo - piu' ancora quando il
   link apre una scheda nuova e tornando indietro il logo e' ancora
   "acceso". Alla prima riga si toglie il contorno in tutti i casi in cui
   il browser NON lo considera necessario (`:focus:not(:focus-visible)`,
   cioe' in pratica il clic col mouse e il tocco sullo schermo), e si
   spegne anche l'eventuale alone che il tema mette per conto suo.

   La riga dopo lo rimette per `:focus-visible`, che e' il TAB. Togliere
   il contorno a tutti sarebbe stato piu' semplice e sbagliato: chi
   naviga da tastiera non avrebbe piu' saputo dove si trova. */
.az-log-voce:focus,
.az-log-voce:focus-within{ outline:none; box-shadow:none; }
.az-log-voce:focus:not(:focus-visible){ outline:none; box-shadow:none; }
.az-log-link:focus-visible{ outline:2px solid currentColor; outline-offset:4px; border-radius:6px; }

/* La reazione al passaggio del mouse.
   
   Non e' solo bellezza: da quando i loghi portano al sito del cliente,
   qualcosa deve dire che si puo' cliccare. Un logo fermo dentro una
   striscia che scorre non sembra un pulsante.
   
   `drop-shadow` e non `box-shadow`: questi PNG sono trasparenti, e una
   box-shadow disegnerebbe l'ombra del **rettangolo** attorno al file,
   non del disegno. drop-shadow segue la sagoma vera.
   
   Il fuoco da tastiera riceve la stessa cosa: chi naviga col TAB deve
   vedere dove si trova quanto chi ha il mouse. */
.az-log-voce:hover,
.az-log-link:focus-visible{
	transform:scale(1.1) translateY(-2px);
	filter:drop-shadow(0 5px 10px rgba(0,0,0,.22));
}
/* Chi non ha un collegamento si anima lo stesso, ma senza ombra: non e'
   cliccabile, quindi non deve promettere niente. */
/* (Qui c'erano due regole per il logo figlio diretto della fila. Non
   succede piu': dalla 3.0 il logo sta sempre dentro un involucro.) */

/* In grigio, a colori al passaggio: tiene insieme loghi di colori molto
   diversi senza che la striscia diventi un arcobaleno. */
.az-log-grigio .az-log-logo{ filter:grayscale(1); opacity:.65; }
.az-log-grigio .az-log-logo:hover{ filter:grayscale(0); opacity:1; }

/* Sui bordi la striscia sfuma invece di essere tagliata di netto: fa
   capire che continua, e nasconde l'ingresso e l'uscita dei loghi. */
@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
	.az-log{
		-webkit-mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		mask-image:linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
		/* La sfumatura ai bordi e' bella ma costa: senza un livello suo
		   il browser la ricalcola su tutta la striscia a ogni fotogramma,
		   ed e' proprio quello che si vede come vibrazione. */
		isolation:isolate;
	}
}

@media (max-width:700px){
	.az-log{ --az-log-spazio:34px; }
	/* filetti piu' corti: in poco spazio la scritta viene prima di loro */
	.az-log-titolo::before,
	.az-log-titolo::after{ max-width:52px; }
	.az-log-logo{ height:calc(var(--az-log-altezza) * .8 * var(--az-log-peso, 1)); }
}

/* Chi ha chiesto meno movimento non lo riceve: la striscia si ferma e
   resta una fila leggibile. Per qualcuno il movimento continuo non e' un
   vezzo fastidioso, e' mal di testa. */
@media (prefers-reduced-motion: reduce){
	.az-log-pista{ animation:none; }
	/* niente ingrandimento al passaggio: resta solo l'ombra, che e' un
	   segnale fermo e non un movimento */
	.az-log-voce{ transition:none; }
	.az-log-voce:hover, .az-log-link:focus-visible{ transform:none; }
	.az-log{ overflow-x:auto; }
	.az-log-logo{ transition:none; }
}