/* ==== counter-in-image-circle ==== */
/* ============================================================================
 * Element:     Contatore dentro il cerchio
 * Class:       .hi-counter-in-image-circle
 * Description: L'immagine del blocco diventa un cerchio e il contatore le si siede al centro, dentro un disco semitrasparente che lascia intravedere la foto.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-counter-in-image-circle` nel campo Extra class del
 *            Vertical Wrapper (US Builder) che contiene, in quest'ordine,
 *            un elemento Image e un elemento Counter:
 *
 *              .hi-counter-in-image-circle   (.w-vwrapper)
 *              |- .w-image > .w-image-h > img
 *              +- .w-counter
 *                 |- .w-counter-value        il numero
 *                 +- .w-counter-title        l'etichetta
 *
 * Rimozione: cancellare questo file = ritorno immediato allo stato attuale
 *            (immagine sopra, contatore sotto).
 *
 * ---------------------------------------------------------------------------
 * L'EFFETTO E' FATTO DI TRE STRATI, NON DI DUE IMMAGINI
 *   .w-image     l'immagine, portata a riempire il quadrato e arrotondata
 *   .w-counter   il disco centrale, un velo semitrasparente sopra la foto
 *   :after       il filo di luce sul bordo del cerchio
 *
 * Il disco non contiene una copia dell'immagine: e' uno strato di colore
 * semitrasparente, quindi cio' che si vede al suo interno E' la foto sotto,
 * a fuoco, solo scurita. Niente da tenere allineato fra due copie.
 *
 * La sfocatura c'e' ma e' leggera, 6px come nel mockup: ammorbidisce i
 * contorni senza nascondere la foto. Alzandola molto si torna al "vetro
 * smerigliato" delle prime versioni, che nasconde proprio cio' che qui si
 * vuole far vedere. Le due note qui sotto riguardano quella sfocatura.
 *
 * ATTENZIONE (backdrop root). `backdrop-filter` guarda cio' che sta sotto fino
 * al primo antenato che fa da "backdrop root": lo diventa un elemento con
 * filter, opacity < 1, mask, clip-path, mix-blend-mode, contain: paint o
 * isolation: isolate. Se una di queste finisse sul wrapper o sull'immagine, il
 * disco resterebbe un cerchio piatto senza sfocatura. E' il motivo per cui qui
 * il wrapper ha solo `position: relative`, e per cui il ritaglio tondo sta sul
 * bordo dell'<img> (border-radius) invece che su un `overflow: hidden` del
 * contenitore.
 *
 * ATTENZIONE (centratura). Il disco e' centrato con `inset: 0; margin: auto` e
 * non con `translate(-50%, -50%)`: un antenato trasformato e' causa nota di
 * sfocature disallineate in WebKit.
 * ---------------------------------------------------------------------------
 * PERCHE' LA DOPPIA CLASSE SUL WRAPPER
 * Il CSS del plugin viene accodato PRIMA dei <style> del builder
 * (`us-theme-options-css`, `us-design-options-css`), quindi a parita' di
 * specificita' vincerebbe il builder. `.classe.classe` porta la specificita' a
 * (0,2,0) e chiude la questione senza `!important` e senza nominare le classi
 * generate `us_custom_...`.
 *
 * Le regole sui figli non ne hanno bisogno: `.wrapper .figlio` e' gia' (0,2,0),
 * e soprattutto le dichiarazioni `!important` che il builder mette su
 * `.w-counter` (colore, corpo, peso) arrivano ai figli solo per EREDITARIETA',
 * che perde contro qualsiasi dichiarazione diretta sul figlio. L'unica cosa
 * davvero intoccabile e' il corpo di 13px scritto inline sull'etichetta dal
 * builder: quello resta suo, si cambia nel builder.
 * ---------------------------------------------------------------------------
 * IL CORPO DEL NUMERO NON SI TOCCA: SI ADATTA IL DISCO
 * Il contatore dentro il cerchio deve avere lo stesso corpo di quelli in
 * colonna a destra, altrimenti la fila di numeri non si legge come una fila.
 * Sul sito e' automatico: e' lo stesso elemento Counter con la stessa classe
 * `us_custom_...` dei laterali, quindi basta NON dichiarare qui il font-size e
 * i corpi coincidono da soli, oggi e dopo ogni modifica nel builder.
 *
 * Una versione precedente di questo file faceva l'opposto — corpo in `cqi`,
 * cioe' proporzionale al diametro del cerchio — e il numero nel cerchio
 * finiva molto piu' grande dei laterali. Se il testo non ci sta non si
 * rimpicciolisce il testo: si allarga il disco.
 *
 * Da cui la regola del disco: e' il PIU' GRANDE fra la percentuale del cerchio
 * (`--hi-cic-disc`, 42% come il mockup: e' questo il valore che si vede quasi
 * sempre) e un minimo che garantisce solo che il testo ci stia
 * (`--hi-cic-disc-min`). Il minimo NON deve mai essere la misura normale,
 * altrimenti il disco si gonfia e la proporzione col cerchio se ne va: e'
 * tarato su quanto il testo occupa davvero, e subentra solo sotto i ~375px di
 * cerchio, dove il 42% non basterebbe piu' a contenere un testo che, per
 * scelta, non rimpicciolisce.
 * ============================================================================ */

.hi-counter-in-image-circle.hi-counter-in-image-circle {

	/* ---- LEVE DI TARATURA ---- */

	/* Diametro massimo del cerchio. 100% = tutta la colonna. */
	--hi-cic-size: 100%;

	/* Diametro del disco centrale, in percentuale del cerchio.
	   42% e' il valore del mockup (`.ring-content`: width 42%). */
	--hi-cic-disc: 42%;

	/* Sfocatura di cio' che sta sotto il disco. 6px e' il valore del mockup
	   (demo1.hidoly.dev/cva-proposta-1-B, `.ring-content`): ammorbidisce i
	   contorni delle forme senza nasconderle, la foto dentro il disco si legge
	   ancora. Oltre i 30px il disco diventa una macchia uniforme e la
	   trasparenza sparisce, per quanto basso sia il velo.
	   Non c'e' un ripiego per i browser senza `backdrop-filter`: a 6px la
	   differenza e' impercettibile, e il contrasto dei testi lo regge il velo,
	   che e' identico nei due casi. Se si sale molto, rimetterlo — un
	   `@supports not (backdrop-filter: blur(1px))` con un velo piu' coprente. */
	--hi-cic-blur: 6px;

	/* Velo del disco: da' il colore ed e' la leva della trasparenza — piu' e'
	   basso, piu' si intravede la foto sotto.

	   ATTENZIONE, E' ANCHE LA LEVA DELLA LEGGIBILITA', ed e' praticamente
	   l'unica: con 6px di sfocatura sotto i testi passa l'immagine quasi a
	   fuoco, con i suoi contrasti locali. Misurato su questa foto (velo .64,
	   sfocatura 6px), sfondo tipico e sfondo piu' chiaro sotto ciascun testo:
	       104 da 12,0:1 a 7,3:1        IMPIANTI da 6,7:1 a 5,8:1
	   Su una foto molto piu' chiara di questa (neve, cielo pieno) la stessa .64
	   non basta piu': salire verso .80 e rimisurare. La verifica si fa
	   sull'etichetta, non sul numero: e' piccola e azzurra, quindi cede molto
	   prima. */
	--hi-cic-veil: rgba(11, 22, 41, .64);

	/* Morbidezza del bordo del disco, in percentuale del suo raggio.
	   0 come nel mockup, che il bordo tondo lo fa con un semplice
	   `border-radius` e nessuna maschera.
	   0 = bordo netto, ed e' cio' che permette al disco di restare un OGGETTO
	   anche da trasparente: il confine e' un gradino, non un passaggio, quindi
	   la foto che traspare non lo sfilaccia. Se invece il bordo sfuma, la
	   trasparenza e la sfumatura si sommano e il disco torna a sembrare un
	   alone. Alzarlo solo se si vuole quell'effetto. */
	--hi-cic-feather: 0%;

	/* Filo di contorno del cerchio. `transparent` per toglierlo. */
	--hi-cic-ring: rgba(255, 255, 255, .18);
	--hi-cic-ring-width: 1px;

	/* Diametro minimo del disco, in multipli del corpo del NUMERO (`em` qui si
	   misura sul font-size del contatore). E' cio' che tiene il testo dentro
	   quando il cerchio si stringe. Con un'etichetta lunga va alzato: la
	   verifica e' che il disco resti piu' largo del testo piu' largo.

	   E' UN PARACADUTE, NON UNA MISURA: deve restare SOTTO il 42% in tutti i
	   casi normali, altrimenti gonfia il disco e la proporzione col cerchio non
	   e' piu' quella del mockup. Con 4.6em, su un cerchio da 390px, il disco
	   arrivava al 58%. Va quindi tarato su cio' che il testo occupa davvero:
	   misurata, la scatola dei due testi sta in un cerchio di 122px di diametro
	   (angolo piu' lontano dal centro 61px), 140px con un po' d'aria.
	   Il termine in em serve se qualcuno alza il corpo del contatore nel
	   builder; quello in px copre l'etichetta, che il builder tiene a 13px
	   fissi e che quindi non rimpicciolisce insieme al numero. */
	--hi-cic-disc-min: max(3.2em, 140px);

	/* Distanza fra numero ed etichetta, anch'essa in em: cresce col testo. */
	--hi-cic-gap: .3em;

	/* Spaziatura fra le lettere dell'etichetta. */
	--hi-cic-label-tracking: .34em;

	/* Parte dell'immagine che sopravvive al ritaglio quadrato. */
	--hi-cic-crop: center;

	/* ---- STRUTTURA ---- */

	position: relative;
	display: block;
	/* il wrapper era flex: ora impila per sovrapposizione */
	width: 100%;
	max-width: var(--hi-cic-size);
	margin-inline: auto;
	aspect-ratio: 1 / 1;
	/* il quadrato che contiene il cerchio */
}

/* ---- IMMAGINE ---- */

.hi-counter-in-image-circle>.w-image {
	position: absolute;
	inset: 0;
	margin: 0;
	/* il vwrapper dava un margin-bottom ai figli */
}

.hi-counter-in-image-circle .w-image-h {
	height: 100%;
}

.hi-counter-in-image-circle .w-image img {
	width: 100%;
	height: 100%;
	max-height: none;
	/* il tema imposta height/max-height: inherit */
	object-fit: cover;
	object-position: var(--hi-cic-crop);
	border-radius: 50%;
}

/* ---- ANELLO DI CONTORNO ----
   Un box-shadow inset sull'immagine non si vedrebbe: le ombre interne stanno
   sopra lo sfondo ma sotto il contenuto. Serve uno strato proprio, sopra
   tutto e trasparente al mouse. */
.hi-counter-in-image-circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: inset 0 0 0 var(--hi-cic-ring-width) var(--hi-cic-ring);
	pointer-events: none;
}

/* ---- DISCO CENTRALE ---- */

.hi-counter-in-image-circle>.w-counter {
	position: absolute;
	inset: 0;
	margin: auto;
	/* centratura senza transform */
	/* Il piu' grande fra il valore estetico e il minimo che regge il testo. */
	width: max(var(--hi-cic-disc), var(--hi-cic-disc-min));
	height: max(var(--hi-cic-disc), var(--hi-cic-disc-min));
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Il velo e' uno strato a se' e non il fondo del disco: cosi' l'eventuale
   sfumatura del bordo tocca solo il velo e mai il testo, che resta a pieno
   contrasto fino all'ultimo pixel. */
.hi-counter-in-image-circle>.w-counter::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background-color: var(--hi-cic-veil);
	-webkit-backdrop-filter: blur(var(--hi-cic-blur));
	backdrop-filter: blur(var(--hi-cic-blur));
}

/* `closest-side` = il raggio del disco, quindi le percentuali del gradiente
   sono percentuali del raggio: pieno fino a (100 - sfumatura), poi via. */
@supports ((-webkit-mask-image: radial-gradient(#000, #000)) or (mask-image: radial-gradient(#000, #000))) {
	.hi-counter-in-image-circle>.w-counter::before {
		-webkit-mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--hi-cic-feather)), transparent 100%);
		mask-image: radial-gradient(circle closest-side, #000 calc(100% - var(--hi-cic-feather)), transparent 100%);
	}
}

/* ---- NUMERO ED ETICHETTA ----
   `position: relative` li porta sopra lo strato del velo, che e' posizionato e
   li precede nell'ordine del documento, senza ricorrere agli z-index.
   Il colore non e' toccato: il numero ha il suo inline dal builder
   (--color-alt-content-text) e l'etichetta eredita --color-alt-content-link,
   che e' gia' l'azzurro CVA. */

.hi-counter-in-image-circle .w-counter-value {
	position: relative;
	/* gia' nel tema, ripetuto perche' qui e' necessario */
	/* NIENTE font-size qui: il numero deve restare quello del builder, uguale
	   ai contatori laterali (vedi la nota in testa al file). */
	line-height: 1;
	font-variant-numeric: tabular-nums;
	/* le cifre non ballano mentre conta */
}

/*
 * L'ETICHETTA E IL BUCO CHE LA SEPARAVA DAL NUMERO
 * Nel markup l'etichetta e' uno <span> inline dentro .w-counter, che porta il
 * corpo del numero (fino a 58px). La riga che la contiene non e' alta quanto i
 * suoi 13px ma quanto lo "strut" del blocco, cioe' l'interlinea calcolata sul
 * corpo del PADRE: il testo piccolo galleggia in mezzo a quel vuoto. Misurato
 * in pagina: margin-top 9,6px, distanza reale 26px. I 16px di troppo sono la
 * riga, non il margine, e infatti abbassare il margine non li toglieva.
 * Diventando elemento di un contenitore flex lo span e' "blockificato": si
 * porta dietro la propria interlinea e il buco sparisce. Da li' in poi la
 * distanza e' una sola cosa, --hi-cic-gap, ed essendo in em cresce col testo.
 */
.hi-counter-in-image-circle .w-counter-title {
	position: relative;
	display: block;
	margin: var(--hi-cic-gap) 0 0;
	line-height: 1.2;
	text-transform: uppercase;

	/* La spaziatura viene aggiunta anche DOPO l'ultima lettera: su un testo
	   centrato lo sposta a sinistra di quella stessa quantita'. Il rientro
	   della prima riga, uguale alla spaziatura, lo rimette in asse. */
	letter-spacing: var(--hi-cic-label-tracking);
	text-indent: var(--hi-cic-label-tracking);
}

/* ==== counter-inline ==== */
/* ============================================================================
 * Element:     Contatore in linea
 * Class:       .hi-custom-counter
 * Description: Valore e titolo del contatore Impreza sempre sulla stessa riga, dentro la colonna, senza scatto di larghezza durante il conteggio.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-custom-counter` nel campo Extra class
 *            dell'elemento Counter di Impreza (US Builder > Counter).
 * Rimozione: cancellare questo file = ritorno immediato allo stato attuale.
 *
 * NOTA SUL NOME
 * Il file si chiama `counter-inline.css` ma la classe e' rimasta
 * `.hi-custom-counter`: e' gia' scritta nel campo Extra class di sei blocchi
 * nella sola home, e rinominarla qui spegnerebbe lo stile su tutti finche' non
 * viene cambiata anche nel builder. Per allineare anche la classe: prima
 * sostituire `hi-custom-counter` con `hi-inline-counter` nei blocchi, poi in
 * questo file. Negli altri file di css/ nome e classe combaciano
 * (`counter-in-image-circle.css` -> `.hi-counter-in-image-circle`).
 *
 * ---------------------------------------------------------------------------
 * PERCHE' SBORDAVA, E PERCHE' IL WRAP NON ERA LA RISPOSTA
 * Il requisito e' che valore e titolo restino SEMPRE su una riga, dentro la
 * colonna. Con `flex-wrap: wrap` il titolo scendeva sotto: niente sbordo, ma
 * requisito violato. Rimesso `nowrap`.
 *
 * Con `nowrap` il contenuto e' rigido: se non ci sta, esce. Quindi l'unica
 * variabile su cui agire e' il CORPO DEL VALORE.
 *
 * LA CAUSA VERA
 * Il corpo era `clamp(34px, 3.4vw, 58px)`: scala con la larghezza del
 * VIEWPORT. Ma cio' che deve contenerlo e' la larghezza della COLONNA, e le
 * due non crescono insieme: quando il contenitore raggiunge la sua larghezza
 * massima la colonna si ferma, mentre 3.4vw continua a salire fino a 58px
 * (a 1706px di viewport). In quella finestra il numero cresce dentro una
 * colonna che non cresce piu' -> sborda. Ecco perche' dipendeva dalla
 * risoluzione.
 *
 * IL RIMEDIO
 * Questo file dichiara la colonna come container di query (`container-type`),
 * cosi' il corpo del valore puo' essere espresso in `cqi` = 1% della
 * larghezza del CONTENITORE invece che del viewport. Il valore va impostato
 * nel builder, vedi in fondo.
 * ---------------------------------------------------------------------------
 */

/* contatori */
.hi-custom-counter {
  display: flex;
  flex-direction: row;
  align-items: flex-end;

  /* nowrap: valore e titolo non si separano mai. Lo sbordo NON si evita qui,
	   si evita col corpo del valore (vedi nota in fondo). */
  flex-wrap: nowrap;
  gap: 8px;
}

.hi-custom-counter .w-counter-value,
.hi-custom-counter .w-counter-title {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Il titolo e' `span.w-counter-title`, fratello di `.w-counter-value`: qui il
   font tocca solo l'etichetta (l'unita' di misura), il valore resta nel font
   del tema. Se un giorno servisse anche sul numero, la regola andrebbe su
   `.w-counter-value` e non sui suoi span, perche' il `::before` piu' in basso
   riserva la larghezza e va misurato nello stesso font delle cifre visibili.
   Dopo IBM Plex Mono ci sono i monospace di sistema come ripiego: il font non
   viene registrato qui, va aggiunto tra quelli del tema. */
.hi-custom-counter .w-counter-title {
  margin: 0;
  line-height: 1;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Rende il contatore un container di query, cioe' la misura di riferimento per
   le unita' cqi usate dal corpo del valore. Il contatore e' un blocco che
   riempie la colonna, quindi 100cqi = larghezza della colonna.
   ATTENZIONE: `container-type: inline-size` applica il contenimento della
   larghezza. Se il contatore risultasse collassato o invisibile, significa che
   Impreza lo rende un elemento dimensionato dal contenuto: in quel caso
   togliere questa regola e usare il ripiego in fondo. */
@supports (font-size: 1cqi) {
  .hi-custom-counter {
    container-type: inline-size;
  }
}

/* conteggio senza scatto: riserva la larghezza del valore finale.
   aria-label lo contiene già, scritto da Impreza. height:0 = larghezza sì, altezza no.

   DA VERIFICARE: se `aria-label` contenesse anche il suffisso (es. "1,407 Mld €"
   invece di "1407"), qui verrebbe riservata la larghezza di TUTTA quella stringa
   al corpo grande del valore, molto piu' del necessario, e sarebbe una seconda
   causa di sbordo indipendente dal font. Controllo: ispezionare .w-counter-value
   e leggere cosa c'e' dentro aria-label. */
.hi-custom-counter .w-counter-value::before {
  content: attr(aria-label);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

/* ============================================================================
 * IL CORPO DEL VALORE - DA IMPOSTARE NEL BUILDER
 *
 * Sostituire nel campo Font size dell'elemento:
 *     da   clamp(34px, 3.4vw, 58px)      <- scala col viewport
 *     a    clamp(34px, 24cqi, 58px)      <- scala con la colonna
 *
 * Minimo e massimo restano i tuoi, quindi dove oggi funziona non cambia nulla:
 * cambia solo il comportamento nella fascia intermedia, dove prima sbordava.
 *
 * COME SI TARA IL 24
 * Il vincolo e':  larghezza(numero) + gap + larghezza(titolo) <= colonna
 * Misurando in devtools sul contatore piu' largo ("1,407"):
 *   - larghezza del numero diviso il suo font-size -> quante "em" occupa
 *     (con 5 caratteri sta intorno a 2,6em)
 *   - larghezza del titolo "Mld EUR" + gli 8px di gap -> lo spazio fisso
 * Da cui:  cqi = (100 - spazio_fisso/colonna * 100) / em_del_numero
 * Con colonna ~195px, titolo+gap ~60px e 2,6em -> circa 26cqi.
 * 24 e' preso volutamente un po' sotto, come margine. Se il numero risulta
 * troppo piccolo alzalo di 2 alla volta e ricontrolla la larghezza peggiore.
 *
 * ATTENZIONE AL MINIMO
 * Sotto una certa larghezza vince il minimo di 34px e lo sbordo torna: con
 * 2,6em e 60px fissi servono almeno ~148px di colonna. Piu' stretto di cosi'
 * Impreza impila le colonne a tutta larghezza, quindi il caso non si presenta.
 * Da verificare alla larghezza in cui le colonne sono ancora tre e piu' strette.
 *
 * RIPIEGO SENZA CONTAINER QUERIES
 * Se `container-type` dovesse dare problemi, si resta su vw abbassando il
 * MASSIMO fino al valore che ci sta quando la colonna smette di crescere:
 *     clamp(34px, 3.4vw, 41px)
 * dove 41px = 3,4% della larghezza massima del contenitore (1200px -> 40,8px;
 * da correggere con la misura reale del contenitore del sito).
 * Risolve la finestra larga, non le larghezze intermedie: rimedio piu' grezzo
 * ma senza alcuna dipendenza da feature nuove.
 * ============================================================================ */

/* ==== image-circle-hole ==== */
/* ============================================================================
 * Element:     Immagine tonda col buco
 * Class:       .hi-image-circle-hole
 * Description: L'immagine diventa un cerchio con un foro al centro - una ciambella - e dal foro si vede lo sfondo della sezione. Il foro ha la stessa misura del disco di counter-in-image-circle.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-image-circle-hole` nel campo Extra class
 *            (US Builder) di UNO di questi due:
 *
 *            a) il singolo elemento Image  -> riguarda solo quella;
 *            b) la Row / il Wrapper che le contiene
 *               -> tutte le immagini dentro diventano ciambelle.
 *
 * Rimozione: cancellare questo file = l'immagine torna rettangolare e piena.
 *
 * ---------------------------------------------------------------------------
 * PARENTE DI counter-in-image-circle, MA CON UNO STRATO SOLO
 * Li' il cerchio e' fatto di tre strati: la foto, un disco semitrasparente
 * sopra e i testi dentro il disco. Qui gli strati sono uno: il centro non e'
 * COPERTO, e' TOLTO. Non c'e' niente sopra la foto, quindi niente velo, niente
 * `backdrop-filter` e nessuna delle precauzioni che li' servono a farlo
 * funzionare (backdrop root, centratura senza transform).
 *
 * Il ritaglio tondo e la misura del foro sono pero' gli stessi: i due elementi
 * finiscono nella stessa fila e devono leggersi come una famiglia.
 *
 * Manca solo il filo di luce sul bordo (`--hi-cic-ring`): li' lo disegna uno
 * pseudo-elemento del wrapper, qui la classe puo' stare direttamente
 * sull'`<img>`, che pseudo-elementi non ne ha. Se servisse, va messo su un
 * contenitore, non su questo file.
 *
 * ---------------------------------------------------------------------------
 * IL BUCO E' UNA MASCHERA, NON UN DISCO DI COLORE SOPRA
 * Un cerchio del colore della sezione sopra la foto sembrerebbe un buco solo
 * finche' dietro c'e' una tinta piatta: su un gradiente, su un'immagine di
 * fondo o a cavallo del confine fra due sezioni diventa una toppa visibile, e
 * va ritinteggiato ogni volta che cambia lo sfondo. `mask-image` invece
 * toglie davvero i pixel, quindi dal foro passa QUALSIASI cosa ci sia dietro,
 * per sempre e senza taratura.
 *
 * Il prezzo e' che senza `mask-image` non c'e' ripiego possibile: resta il
 * cerchio pieno, senza foro. E' un mancato ornamento, non un difetto di
 * lettura, e riguarda solo browser precedenti a Safari 15.4 / Chrome 120 per
 * la sintassi non prefissata (il `-webkit-` qui sotto copre i WebKit vecchi).
 *
 * ---------------------------------------------------------------------------
 * LA MISURA DEL FORO E' UN DIAMETRO, COME NEL CONTATORE
 * `--hi-ich-hole` e' il DIAMETRO del foro in percentuale del diametro del
 * cerchio: 42%, lo stesso numero di `--hi-cic-disc` e della `.ring-content`
 * del mockup (demo1.hidoly.dev/cva-proposta-1-B). I due elementi si tarano
 * cosi' con lo stesso valore e restano confrontabili a occhio.
 *
 * Il gradiente pero' ragiona in RAGGI. Da qui il `/ 2`: un'ellisse di raggi
 * `21% 21%` - percentuali della larghezza e dell'altezza del riquadro, che qui
 * e' quadrato - e' un foro largo il 42%. Scrivere il diametro e dividerlo
 * serve a far valere la leva anche quando NON le si passa una percentuale:
 * `--hi-ich-hole: 140px` da' un foro di 140px, non di 280.
 *
 * Si poteva fare piu' corto con `circle closest-side`, dove su un riquadro
 * quadrato la percentuale del gradiente coincide per caso col diametro del
 * foro. E' la coincidenza il problema: vale solo per le percentuali e solo
 * finche' il riquadro e' quadrato, e chi ci scrivesse `140px` otterrebbe un
 * foro di 280 senza capire perche'.
 *
 * `--hi-ich-hole: 0` e' il caso limite e si comporta bene: gradiente di raggio
 * nullo, nessun foro, cerchio pieno.
 *
 * ---------------------------------------------------------------------------
 * IL MINIMO CHE C'E' NEL CONTATORE QUI NON SERVE
 * Nel contatore il disco e' `max(42%, max(3.2em, 140px))`: il minimo esiste
 * solo perche' dentro il disco ci sta del testo che, per scelta, non
 * rimpicciolisce. Qui dentro non c'e' niente, quindi il foro e' il 42% a
 * qualunque misura - che e' anche il motivo per cui e' questo il file "pulito"
 * dei due.
 *
 * Da sapere se i due elementi stanno nella STESSA FILA: sotto un certo
 * diametro il disco del contatore si gonfia oltre il 42% mentre la ciambella
 * resta al 42%, e i due centri smettono di somigliarsi. La soglia dipende dal
 * corpo del contatore impostato nel builder, perche' il minimo e' in `em`: con
 * un numero da 58px, 3.2em fanno ~186px, cioe' il 42% di un cerchio da ~440px.
 * Se serve che coincidano si alza `--hi-ich-hole` dal campo CSS del builder
 * fino a pareggiarli; non si abbassa il minimo del contatore, che li' tiene
 * dentro il testo.
 *
 * ---------------------------------------------------------------------------
 * DAL FORO SI VEDE LO SFONDO, NON IL BIANCO
 * Attraverso il foro passa cio' che sta DIETRO l'immagine. Se il contenitore
 * ha un fondo suo - il builder lo sa mettere sull'elemento Image, e il tema lo
 * mette su `.w-image-h` quando c'e' una cornice - si vedra' quello e il foro
 * sembrera' pieno: va tolto li', non qui.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' LA CLASSE E' SCRITTA DUE VOLTE
 * Il CSS del plugin viene accodato PRIMA dei <style> generati dal builder
 * (`us-design-options-css`), quindi a parita' di specificita' vincerebbe il
 * builder - che sull'elemento Image sa scrivere proprio `border-radius` e
 * dimensioni. La classe ripetuta porta la specificita' a (0,2,x) e chiude la
 * questione senza `!important`.
 * ============================================================================ */

/* ---- I DUE VALORI CHE FINISCONO DENTRO IL GRADIENTE ----
   Registrarli serve a una cosa sola: rendere innocuo l'errore di unita'. Nel
   `calc()` della maschera una percentuale meno un NUMERO non e' un'operazione
   valida, quindi basta scrivere `--hi-ich-feather: 0` invece di `0%` per
   invalidare l'INTERA `mask-image` e ritrovarsi col cerchio pieno: niente foro
   e niente errore che lo spieghi. Con `@property` un valore del tipo sbagliato
   viene ignorato e resta quello di partenza - si perde la modifica, non
   l'effetto.
   I valori iniziali sono ripetuti fra le leve qui sotto, che e' dove si va a
   cercarli e a cambiarli: qui contano il TIPO e il ripiego.
   Prima di Safari 16.4 / Firefox 128 la regola viene saltata e la trappola
   torna: l'unita' va scritta comunque. */

@property --hi-ich-hole {
	syntax: "<length-percentage>";
	inherits: true;
	initial-value: 42%;
}

@property --hi-ich-feather {
	syntax: "<percentage>";
	inherits: true;
	initial-value: 1%;
}

.hi-image-circle-hole {

	/* ---- LEVE DI TARATURA ----
	   Si possono sovrascrivere per singolo blocco dal campo CSS del builder. */

	/* Diametro massimo del cerchio. 100% = tutta la colonna. */
	--hi-ich-size: 100%;

	/* Diametro del foro, in percentuale del diametro del cerchio.
	   42% e' il valore del mockup, lo stesso di `--hi-cic-disc`. */
	--hi-ich-hole: 42%;

	/* Morbidezza del bordo del foro, in percentuale del suo raggio - la stessa
	   unita' di `--hi-cic-feather`.
	   1% e' meno di un pixel su un cerchio da 400 e non si vede: serve solo a
	   togliere la scalettatura che un gradiente con stacco netto lascia sulle
	   curve. A `0%` - con il segno di percentuale, vedi sopra - il bordo e'
	   netto ma seghettato; da ~8% in su il foro comincia a sfumare davvero e la
	   ciambella perde il contorno. */
	--hi-ich-feather: 1%;

	/* Parte dell'immagine che sopravvive al ritaglio quadrato. */
	--hi-ich-crop: center;
}

/* ---- IL CERCHIO COL FORO ----
   Due selettori perche' la classe puo' stare sul contenitore (tutte le
   immagini dentro) o direttamente sull'immagine (solo quella). */

.hi-image-circle-hole.hi-image-circle-hole img,
img.hi-image-circle-hole.hi-image-circle-hole {

	/* Il quadrato che contiene il cerchio. `height`/`max-height` vanno
	   riscritti: il tema li mette a `inherit` sulle immagini, e con un valore
	   ereditato l'`aspect-ratio` non ha voce in capitolo. */
	display: block;
	width: 100%;
	max-width: var(--hi-ich-size, 100%);
	height: auto;
	max-height: none;
	margin-inline: auto;
	aspect-ratio: 1 / 1;

	/* La foto riempie il quadrato senza deformarsi. */
	object-fit: cover;
	object-position: var(--hi-ich-crop, center);

	/* Il bordo esterno: tondo per `border-radius`, non per maschera, perche'
	   qui il bordo lo disegna il browser e viene levigato: un gradiente
	   allo stesso posto arriverebbe seghettato. */
	border-radius: 50%;

	/* Il foro. Fuori dall'ultima fermata il colore continua, quindi tutto cio'
	   che sta oltre il raggio del gradiente resta opaco: la maschera agisce
	   solo al centro. */
	-webkit-mask-image: radial-gradient(ellipse calc(var(--hi-ich-hole, 42%) / 2) calc(var(--hi-ich-hole, 42%) / 2),
			transparent calc(100% - var(--hi-ich-feather, 1%)),
			#000 100%);
	mask-image: radial-gradient(ellipse calc(var(--hi-ich-hole, 42%) / 2) calc(var(--hi-ich-hole, 42%) / 2),
			transparent calc(100% - var(--hi-ich-feather, 1%)),
			#000 100%);
}

/* ==== image-grayscale-hover ==== */
/* ============================================================================
 * Element:     Immagine in grigio che riprende colore in hover
 * Class:       .hi-image-grayscale-hover
 * Description: Le immagini diventano grigie e sbiadite; quella puntata dal mouse riprende il colore pieno. Pensata per la fila di loghi di "Riconoscimenti e certificazioni".
 * ============================================================================
 *
 * Uso      : aggiungere `hi-image-grayscale-hover` nel campo Extra class
 *            (US Builder) di UNO di questi due:
 *
 *            a) la Row / il Wrapper che contiene tutti i loghi
 *               -> tutte le immagini dentro diventano grigie, e riprende il
 *                  colore SOLO quella puntata, una per volta (e' il caso dei
 *                  riconoscimenti);
 *
 *            b) il singolo elemento Image
 *               -> riguarda solo quella.
 *
 *            In entrambi i casi l'unita' che risponde al mouse e' l'immagine,
 *            non il contenitore: puntare il bordo della riga non accende nulla.
 *
 * Rimozione: cancellare questo file = i loghi tornano a colori pieni.
 *
 * ---------------------------------------------------------------------------
 * RIFERIMENTO
 * L'effetto e' quello del mockup demo1.hidoly.dev/cva-proposta-1-B/gruppo.html
 * (`css/gruppo.css`, `.award-cell img`), da cui sono presi i valori di
 * partenza: grigio pieno, opacita' .55, transizione .4s.
 *
 * Nel mockup i due filtri sono `grayscale(1) opacity(.55)`: l'opacita' e' una
 * funzione di `filter` e non la proprieta' `opacity`, cosi' l'intero effetto
 * sta in una sola proprieta' e la transizione ne anima una sola. Da tenere,
 * anche perche' `opacity` creerebbe un contesto di composizione che puo'
 * disturbare eventuali strati sovrapposti.
 *
 * ---------------------------------------------------------------------------
 * SOLO <img>, NON GLI SFONDI CSS
 * La regola agisce sugli `<img>` — cioe' sull'elemento Image di Impreza. Un
 * logo messo come background di un box NON viene toccato: `filter` su quel box
 * ingrigirebbe anche il testo che contiene, che non e' cio' che si vuole.
 * Se servisse, va messa la classe su un elemento che contiene SOLO lo sfondo.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' LA CLASSE E' SCRITTA DUE VOLTE
 * Il CSS del plugin viene accodato PRIMA dei <style> generati dal builder
 * (`us-design-options-css`), quindi a parita' di specificita' vincerebbe il
 * builder — che sull'elemento Image sa scrivere proprio dei filtri. La classe
 * ripetuta porta la specificita' a (0,2,x) e chiude la questione senza
 * `!important`.
 *
 * PERCHE' LE REGOLE DEL COLORE SONO TRE E NON UNA
 * Un selettore non riconosciuto invalida l'INTERA regola in cui si trova, non
 * solo se stesso. `:has()` e `:focus-visible` stanno quindi in regole separate:
 * su un browser che non li conosce si perde il loro pezzo di effetto, non
 * l'hover di base.
 * ============================================================================ */

.hi-image-grayscale-hover {

	/* ---- LEVE DI TARATURA ----
	   Si possono sovrascrivere per singolo blocco dal campo CSS del builder. */

	/* Quanto grigio: 1 = nessun colore, 0 = immagine intatta. */
	--hi-igh-gray: 1;

	/* Quanto resta visibile da spenta. Piu' basso = loghi piu' discreti, ma
	   sotto ~.35 su fondo bianco un logo chiaro sparisce del tutto. */
	--hi-igh-opacity: .55;

	/* Durata del passaggio grigio <-> colore. */
	--hi-igh-duration: .4s;
	--hi-igh-easing: ease;
}

/* ---- STATO A RIPOSO ----
   Due selettori perche' la classe puo' stare sul contenitore (primo caso) o
   direttamente sull'immagine (secondo). */

.hi-image-grayscale-hover.hi-image-grayscale-hover img,
img.hi-image-grayscale-hover.hi-image-grayscale-hover {
	filter: grayscale(var(--hi-igh-gray, 1)) opacity(var(--hi-igh-opacity, .55));
	transition: filter var(--hi-igh-duration, .4s) var(--hi-igh-easing, ease);
}

/* ---- IL COLORE TORNA SULL'IMMAGINE PUNTATA ---- */

.hi-image-grayscale-hover.hi-image-grayscale-hover img:hover,
img.hi-image-grayscale-hover.hi-image-grayscale-hover:hover {
	filter: grayscale(0) opacity(1);
}

/* La scatola che contiene l'immagine conta come immagine: nel markup di
   Impreza l'`<img>` sta dentro `.w-image-h`, spesso dentro un `<a>`, e quei
   contenitori hanno un po' di aria intorno. Senza questa regola il colore si
   accende e si spegne mentre il mouse attraversa quel bordo.
   `:has(> img)` = "l'antenato piu' vicino che contiene DIRETTAMENTE
   un'immagine": si ferma li' e non risale mai al contenitore di tutti i loghi,
   quindi le altre immagini restano grigie. */
.hi-image-grayscale-hover.hi-image-grayscale-hover :has(> img):hover img,
.hi-image-grayscale-hover.hi-image-grayscale-hover:has(> img):hover > img {
	filter: grayscale(0) opacity(1);
}

/* Da tastiera: se il logo e' un link, il colore torna quando il link prende il
   fuoco. Senza questa regola l'effetto esisterebbe solo per chi usa il mouse. */
.hi-image-grayscale-hover.hi-image-grayscale-hover a:focus-visible img,
a.hi-image-grayscale-hover.hi-image-grayscale-hover:focus-visible img {
	filter: grayscale(0) opacity(1);
}

/* Chi ha chiesto meno animazioni vede comunque l'effetto, ma senza la
   dissolvenza: il cambio e' immediato. La regola in base.css non arriva qui,
   copre le sole classi `hi-cva-*`. */
@media (prefers-reduced-motion: reduce) {

	.hi-image-grayscale-hover.hi-image-grayscale-hover img,
	img.hi-image-grayscale-hover.hi-image-grayscale-hover {
		transition-duration: 1ms;
	}
}

/* ==== text-animated-scrolling ==== */
/* ============================================================================
 * Element:     Testo animato allo scroll
 * Class:       .hi-animated-scrolling-text
 * Description: Il testo si accende un carattere per volta, nell'ordine di lettura, mentre la pagina scorre.
 * ============================================================================
 *
 * Uso      : aggiungere `hi-animated-scrolling-text` nel campo Extra class
 *            dell'elemento (WPBakery: Custom Heading > Extra class name).
 *            Funziona su qualsiasi tag, non solo <h2>.
 * Coppia   : questo file lavora insieme a `text-animated-scrolling.js`, che
 *            spezza il testo in `<span class="hi-ast-ch">` numerati.
 *            Senza quel file non c'e' effetto: NESSUN SELETTORE CSS SA
 *            INDIRIZZARE UN CARATTERE, quindi le lettere devono diventare
 *            elementi prima che il CSS possa animarle una per una.
 * Supporto : dove `animation-timeline` non esiste il JS non tocca il DOM e il
 *            titolo resta quello del tema. Nessuna rottura, nessun testo
 *            invisibile.
 * Rimozione: cancellare i due file = ritorno immediato allo stato attuale.
 *
 * ---------------------------------------------------------------------------
 * PERCHE' A CARATTERE E NON A SFUMATURA CONTINUA
 * La versione precedente accendeva il testo con un gradiente inclinato
 * ritagliato sulle glifi (`background-clip: text`) che scorreva sul blocco: una
 * sola sfumatura continua, che tagliava le lettere a meta' mentre passava.
 * Il mockup fa un'altra cosa: divide il titolo in caratteri e ne accende
 * `round(progresso * totale)`, commutando il colore di netto. Quello scatto
 * secco non piaceva. Questa versione tiene l'avanzamento a carattere del
 * mockup e gli mette sotto una dissolvenza: ogni lettera passa da spenta ad
 * accesa in un intervallo proprio, e gli intervalli si sovrappongono.
 * La leva e' `--hi-ast-overlap`, misurata in caratteri:
 *     1 = scatto secco, identico al mockup
 *     6 = alcune lettere in dissolvenza insieme (valore tarato)
 *     8 = molto morbido, quasi la vecchia sfumatura continua
 * ---------------------------------------------------------------------------
 * LA FINESTRA DI SCROLL VA IN LUNGHEZZE, NON IN PERCENTUALI
 * La versione precedente usava `animation-range: cover 33% cover 68%` con il
 * commento "traduce la finestra della demo (top del titolo da 60vh a 18vh)".
 * MISURATO IN PAGINA, NON LA TRADUCEVA. Le percentuali della range `cover`
 * sono percentuali del percorso totale, che vale `altezza del viewport +
 * altezza dell'elemento`: con l'h2 di questa pagina, alto 493px su un viewport
 * di 813px, il 33% cadeva col titolo a 0,47vh (l'effetto partiva tardi) e il
 * 68% col titolo gia' uscito sopra il bordo. Dipendeva dall'altezza del
 * blocco, quindi ogni titolo si comportava in modo diverso.
 *
 * In lunghezze la stessa finestra si dice esatta e senza dipendere
 * dall'altezza: a un offset X della range `cover`, il top dell'elemento sta a
 * `viewport - X`. Quindi "top a 60vh" e' `calc(100vh - 60vh)`, e le due leve
 * qui sotto sono direttamente i numeri del mockup.
 * Verificato a sei posizioni di scroll: titolo a 0,50vh -> 22% acceso,
 * 0,40vh -> 46%, 0,30vh -> 69%, 0,20vh -> 93%.
 * ---------------------------------------------------------------------------
 * NOTA SULLA DOPPIA CLASSE
 * In pagina il CSS del plugin viene PRIMA degli <style> del builder
 * (`us-theme-options-css`, `us-design-options-css`), dove finiscono regole tipo
 *     .us_custom_xxxxxxxx{color:var(--color-alt-content-text)!important}
 * A parita' di specificita' vincerebbe il builder. `.classe.classe` porta la
 * specificita' a (0,2,0) e chiude la questione senza nominare nessuna classe
 * generata da WPBakery.
 *
 * IL COLORE VA DICHIARATO SUGLI SPAN
 * Sul titolo il builder scrive `color: ... !important`. Se il colore "spento"
 * si dichiarasse sulla radice, i caratteri lo prenderebbero per EREDITARIETA',
 * e l'ereditarieta' perde contro l'important: le lettere resterebbero del
 * colore del builder e l'effetto sarebbe invisibile (accaduto, in prova).
 * Dichiarato sugli span vince, perche' sugli span non c'e' nessuna regola
 * avversaria.
 *
 * NIENTE SHORTHAND `animation`
 * `animation-timeline` e `animation-range` sono sue sub-property reset-only:
 * la shorthand le riazzera. Qui si usano solo le proprieta' lunghe, cosi'
 * l'ordine delle dichiarazioni non puo' rompere nulla.
 *
 * NOTA SUL PREFISSO
 * Questa classe usa `hi-` e non `hi-cva-` come il resto del plugin: e' voluto,
 * la classe e' gia' referenziata nei blocchi del builder e rinominarla
 * spegnerebbe l'effetto sulle pagine dove e' in uso.
 * ============================================================================ */

.hi-animated-scrolling-text.hi-animated-scrolling-text {

	/* ---- LEVE DI TARATURA ---- */

	/* Colore "spento" e colore "acceso" (gli stessi del mockup). */
	--hi-ast-off: rgba(81, 178, 221, .5);
	--hi-ast-on: #ffffff;

	/* Finestra di scroll, detta come la dice il mockup: dove si trova il TOP
	   del titolo quando l'effetto parte e quando e' finito. */
	--hi-ast-start: 60vh;
	--hi-ast-end: 18vh;

	/* Su quanti caratteri si estende la dissolvenza di ciascuno. */
	--hi-ast-overlap: 6;
}

@supports (animation-timeline: view()) {

	/* La linea del tempo e' UNA SOLA, quella del titolo, dichiarata qui e usata
	   da tutti i suoi caratteri. Con `view()` anonimo ogni <span> avrebbe la
	   propria, legata alla riga in cui si trova: le lettere di una stessa riga
	   si accenderebbero tutte insieme e le righe si sovrapporrebbero. */
	.hi-animated-scrolling-text.hi-animated-scrolling-text {
		view-timeline-name: --hi-ast;
	}

	.hi-ast-ch {
		color: var(--hi-ast-off);

		/* Offset della range `cover` a cui parte il primo carattere, e corsa
		   entro cui si esaurisce l'ultimo. */
		--hi-ast-da: calc(100vh - var(--hi-ast-start));
		--hi-ast-corsa: calc(var(--hi-ast-start) - var(--hi-ast-end));

		animation-name: hi-ast-accendi;
		animation-timing-function: linear;
		animation-fill-mode: both;
		animation-timeline: --hi-ast;

		/* La fetta di corsa di QUESTO carattere: parte al suo posto nella
		   sequenza e si esaurisce `--hi-ast-overlap` caratteri piu' avanti. */
		animation-range:
			cover calc(var(--hi-ast-da) + var(--hi-ast-corsa) * var(--i) / var(--n))
			cover calc(var(--hi-ast-da) + var(--hi-ast-corsa) * (var(--i) + var(--hi-ast-overlap)) / var(--n));
	}

	@keyframes hi-ast-accendi {
		to { color: var(--hi-ast-on); }
	}

	/* Se la preferenza cambia dopo che il JS ha spezzato il testo, i caratteri
	   restano: niente animazione e tutti direttamente accesi. */
	@media (prefers-reduced-motion: reduce) {
		.hi-ast-ch {
			animation-name: none;
			color: var(--hi-ast-on);
		}
	}
}