/*
 * Animazioni discrete del tema CADesk, accodato da inc/assets.php dopo css/cadesk.css
 * su tutte le pagine. Due parti.
 *
 * 1. Il motore delle animazioni di sezione (con js/cadesk-motion.js), guidato da
 *    attributi dati che le funzioni di inc/landing-sections.php stampano secondo la
 *    sezione «Animazione» (scheda Avanzate) di ogni widget CADesk. Questa parte non
 *    conosce le classi cl-*: legge solo gli attributi, cosi' ogni sezione si regola o si
 *    spegne dall'editor. Il contratto:
 *
 *    Sulla radice della sezione (<section class="cl-…">):
 *      data-anim="fade-up | fade | slide-left | scale | none"
 *          il preset: dissolvenza dal basso (16px), dissolvenza, da sinistra (16px),
 *          ingrandimento leggero (da .96). Senza attributo, o «none», niente.
 *      data-anim-trigger="view | load"
 *          quando parte: allo scorrimento (ogni voce quando entra per il 15% nella
 *          finestra, una volta sola) o al caricamento (tutte le voci subito).
 *      data-anim-duration="450"   durata di ogni voce, in ms
 *      data-anim-delay="0"        ritardo prima della prima voce, in ms
 *      data-anim-stagger="70"     scarto fra una voce e la successiva, in ms
 *
 *    Dentro, sulle voci che entrano in sequenza (nell'ordine del markup):
 *      data-anim-item         la voce segue il preset della radice
 *      data-anim-item="num"   variante: scivola da sinistra di 12px (la cifra in
 *                             filigrana dei vantaggi)
 *      data-anim-item="pop"   variante: piccolo «pop», da .9 a 1 (il quadrato del
 *                             numero dei passi)
 *      data-anim-item="bg"    variante: dissolvenza lenta (700ms, da .4 a 1) che parte
 *                             da sola, senza aspettare lo script: lo sfondo dell'hero,
 *                             che e' l'elemento piu' grande sopra la piega (LCP) e non
 *                             deve dipendere da uno script differito. Non parte da 0:
 *                             Chrome, per un elemento animato da opacita' 0, registra
 *                             l'LCP alla fine dell'animazione (misurato: +700ms); da
 *                             .4 l'immagine e' dipinta al primo fotogramma e l'LCP
 *                             resta quello. La durata e' fissa: se seguisse quella
 *                             della sezione, scritta dallo script a dissolvenza gia'
 *                             partita, l'opacita' farebbe un salto.
 *          Sulla stessa voce bg, due attributi in piu' che il widget dell'hero stampa:
 *          data-anim-bg="fade | zoom | none"
 *                             come entra: la dissolvenza (senza attributo, o fade),
 *                             la dissolvenza piu' un ingrandimento leggero dell'<img>
 *                             dentro (scale da 1.06 a 1 in 1200ms, sulla proprieta'
 *                             «scale»: l'opacita' di partenza resta .4), o niente.
 *          data-anim-parallax="light | medium"
 *                             scorrendo, lo sfondo resta indietro di 24 o 40px al
 *                             massimo: un'animazione guidata dallo scorrimento
 *                             (animation-timeline: view(), solo CSS, dentro @supports)
 *                             sulla proprieta' «translate», mentre lo sfondo e' tutto
 *                             (immagine, velo e punti insieme, cosi' il velo non si
 *                             stacca dall'immagine). Il riquadro si allunga di
 *                             altrettanto sopra e sotto la sezione, che lo taglia
 *                             (overflow: clip): non si scopre mai il fondo. Vale anche
 *                             senza preset, e' un effetto di scorrimento.
 *      data-anim-item="lines" variante: un contenitore che tiene il posto nella
 *                             sequenza (riceve il ritardo) ma non si anima da se'; dentro
 *                             ha le righe:
 *      data-anim-item="line"  variante: la riga si scopre dal basso (clip-path da
 *                             inset(0 0 100% 0) a inset(0)) risalendo di 16px: il
 *                             titolo dell'hero riga per riga
 *      data-anim-item="rule"  variante: una riga da 2px che si disegna, da sinistra
 *                             (scaleX da 0 a 1, transform-origin dal suo CSS) o lungo
 *                             l'asse che --cl-rx/--cl-ry dicono (1,0 con origin in alto:
 *                             dall'alto in basso, la linea fra i passi sul telefono).
 *                             Fra i passi (dentro il passo, entra con lui) e sotto
 *                             l'occhiello (una voce a se', dopo l'occhiello)
 *    Una voce dentro un'altra voce (la cifra dentro .cl-benefit, la linea dentro il
 *    passo) entra con quella e ne eredita il ritardo; le righe «line» dentro «lines»
 *    hanno invece ritardo = quello del contenitore + indice × meta' dello scarto, cosi'
 *    si scoprono una dopo l'altra. Le varianti valgono con ogni preset.
 *
 *    Lo script scrive --cl-dur sulla radice, --cl-delay su ogni voce e aggiunge la
 *    classe is-in quando la voce deve entrare. I preset sono tre variabili sulla
 *    radice (--cl-x, --cl-y, --cl-s: spostamento e scala di partenza); una variante le
 *    ridefinisce sulla voce. Un solo stato nascosto e un solo fotogramma li leggono;
 *    line e rule hanno il loro stato nascosto e il loro fotogramma (clip-path, scala
 *    su un asse), bg e lines non ne hanno.
 *
 *    I punti sulla mappa dell'hero (.cl-hero-pin, geometria e colore in css/cadesk.css)
 *    hanno l'anello che pulsa senza fine (da 1 a 2.2, da .6 a 0, 3 s), sfalsato con un
 *    ritardo negativo dall'indice --i: sono decorativi e fuori dalla sequenza, non
 *    hanno data-anim-item. Con «meno animazioni» l'anello sta fermo.
 *
 *    Gli stati iniziali nascosti valgono solo con la classe «js» sull'<html>, che uno
 *    script inline in testa alla pagina aggiunge (inc/assets.php) prima di questo
 *    foglio: senza JavaScript tutto e' visibile da subito, e con JavaScript niente
 *    lampeggia prima di nascondersi. Le animazioni hanno fill-mode backwards e i
 *    fotogrammi dichiarano solo il «from»: alla fine ogni elemento torna al suo stile
 *    naturale, senza transform ne' opacity residui. Niente will-change: opacity e
 *    transform vanno al compositor da sole, e un will-change permanente costerebbe
 *    memoria su ogni voce.
 *
 * 2. Le micro-interazioni al passaggio (pulsanti e la loro pressione, frecce, puntini
 *    del carosello, la cifra e il titolo dei vantaggi, voci della nav e l'ombra della
 *    nav dopo 100px di scorrimento, con is-scrolled dallo script), la sottolineatura
 *    fissa della voce corrente (aria-current dallo script, scorrendo la home) e, sotto
 *    i 760px, il pulsante del menu che diventa una X e la tendina che si dissolve
 *    (is-open sulla nav e aria-expanded sul pulsante, dallo script). Non sono
 *    animazioni di sezione: usano le classi cl-* di css/cadesk.css.
 *    Le regole :hover stanno in @media (hover: hover): sul tocco non c'e' un puntatore
 *    che passa sopra, e un hover che resta appiccicato dopo il tocco e' un errore.
 *
 * Tutto il foglio, token e stampa a parte, sta in una media query: con «meno
 * animazioni» chiesto al sistema (prefers-reduced-motion) o con i colori forzati
 * (contrasto elevato di Windows) non c'e' nessuno stato nascosto, nessuna animazione e
 * nessuna transizione. Lo stato nascosto vale solo fuori dall'editor di Elementor
 * (body:not(.elementor-editor-active)): chi modifica vede sempre tutto. In stampa
 * tutto e' visibile, qualunque sia lo stato raggiunto a schermo.
 * Mai piu' di 16px di spostamento, niente rimbalzi, curva cubic-bezier(.2,.7,.2,1).
 * Spostamenti solo verticali, salvo i 12px della cifra, che restano dentro il margine
 * del contenitore: nessuno scorrimento orizzontale.
 */

/* ------------------------------------------------------------------ token */

:root {
	--cl-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: no-preference) and (forced-colors: none) {

	/* --------------------------------------------------------------- motore */

	/* Solo il «from»: il «to» e' lo stile naturale dell'elemento. Le variabili si
	   risolvono sulla voce animata (preset dalla radice, variante dalla voce). */
	@keyframes cl-in {
		from {
			opacity: 0;
			transform: translate(var(--cl-x, 0px), var(--cl-y, 0px)) scale(var(--cl-s, 1));
		}
	}

	/* lo sfondo: mai da 0, vedi «bg» in testa */
	@keyframes cl-bg {
		from {
			opacity: 0.4;
		}
	}

	/* l'ingrandimento leggero dell'immagine di sfondo (data-anim-bg="zoom"): sulla
	   proprieta' «scale», separata da «translate» della parallasse, cosi' le due non si
	   contendono transform */
	@keyframes cl-bg-zoom {
		from {
			scale: 1.06;
		}
	}

	/* la parallasse: da 0 allo spostamento massimo (--cl-par, dalla variante) mentre la
	   sezione esce dalla finestra; «both» perche' il valore tenga anche fuori dall'intervallo */
	@keyframes cl-bg-parallax {
		from {
			translate: 0 0;
		}

		to {
			translate: 0 var(--cl-par, 24px);
		}
	}

	/* una riga del titolo: si scopre dal basso risalendo */
	@keyframes cl-line {
		from {
			clip-path: inset(0 0 100% 0);
			transform: translateY(var(--cl-y, 16px));
		}
	}

	/* una riga che si disegna: scala da 0 lungo un asse (--cl-rx/--cl-ry: 0,1 da
	   sinistra; 1,0 dall'alto) */
	@keyframes cl-rule {
		from {
			transform: scale(var(--cl-rx, 0), var(--cl-ry, 1));
		}
	}

	/* l'anello dei punti sulla mappa: cresce e sfuma, senza fine */
	@keyframes cl-pin {
		to {
			transform: scale(2.2);
			opacity: 0;
		}
	}

	/* i preset: spostamento e scala di partenza */
	html.js [data-anim="fade-up"] {
		--cl-x: 0px;
		--cl-y: 16px;
		--cl-s: 1;
	}

	html.js [data-anim="fade"] {
		--cl-x: 0px;
		--cl-y: 0px;
		--cl-s: 1;
	}

	html.js [data-anim="slide-left"] {
		--cl-x: -16px;
		--cl-y: 0px;
		--cl-s: 1;
	}

	html.js [data-anim="scale"] {
		--cl-x: 0px;
		--cl-y: 0px;
		--cl-s: 0.96;
	}

	/* le varianti, sulla voce: vincono sulle variabili ereditate dalla radice */
	html.js [data-anim] [data-anim-item="num"] {
		--cl-x: -12px;
		--cl-y: 0px;
		--cl-s: 1;
	}

	html.js [data-anim] [data-anim-item="pop"] {
		--cl-x: 0px;
		--cl-y: 0px;
		--cl-s: 0.9;
	}

	/* una riga del titolo risale sempre di 16px, qualunque sia il preset */
	html.js [data-anim] [data-anim-item="line"] {
		--cl-y: 16px;
	}

	/* Stato iniziale: nascosta finche' lo script non la fa entrare. Solo con un preset
	   conosciuto (niente con «none» o con un valore sbagliato), mai le varianti bg e
	   lines (non si animano da se'), non line e rule (che hanno il loro stato, sotto), e
	   mai nell'editor di Elementor (il body dell'anteprima porta
	   elementor-editor-active): chi modifica non deve trovare una voce nascosta. */
	html.js body:not(.elementor-editor-active) :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item]:not(.is-in):not([data-anim-item="bg"], [data-anim-item="lines"], [data-anim-item="line"], [data-anim-item="rule"]) {
		opacity: 0;
		transform: translate(var(--cl-x, 0px), var(--cl-y, 0px)) scale(var(--cl-s, 1));
	}

	/* L'entrata: durata della sezione, ritardo della voce (una voce annidata lo
	   eredita dalla sua). */
	html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item].is-in:not([data-anim-item="bg"], [data-anim-item="lines"], [data-anim-item="line"], [data-anim-item="rule"]) {
		animation: cl-in var(--cl-dur, 450ms) var(--cl-ease) var(--cl-delay, 0ms) backwards;
	}

	/* Le righe del titolo (line): coperte dal basso e 16px piu' giu' finche' non entrano;
	   poi si scoprono con la durata della sezione e il ritardo che lo script ha scritto
	   su ciascuna. */
	html.js body:not(.elementor-editor-active) :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="line"]:not(.is-in) {
		clip-path: inset(0 0 100% 0);
		transform: translateY(var(--cl-y, 16px));
	}

	html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="line"].is-in {
		animation: cl-line var(--cl-dur, 450ms) var(--cl-ease) var(--cl-delay, 0ms) backwards;
	}

	/* Le righe che si disegnano (rule): a scala zero sul loro asse finche' non entrano;
	   poi crescono con la durata della sezione, dall'origine che il loro CSS ha dato. */
	html.js body:not(.elementor-editor-active) :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="rule"]:not(.is-in) {
		transform: scale(var(--cl-rx, 0), var(--cl-ry, 1));
	}

	html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="rule"].is-in {
		animation: cl-rule var(--cl-dur, 450ms) var(--cl-ease) var(--cl-delay, 0ms) backwards;
	}

	/* Lo sfondo (bg): parte da solo appena il foglio e' applicato, senza stato nascosto
	   e senza is-in, e da .4, cosi' e' dipinto gia' al primo fotogramma e l'LCP non si
	   sposta. Con data-anim-bg="none" niente. */
	html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="bg"]:not([data-anim-bg="none"]) {
		animation: cl-bg 700ms var(--cl-ease) backwards;
	}

	/* Con «zoom» l'immagine dentro parte un poco ingrandita e torna a 1 in 1,2 s; la
	   dissolvenza del contenitore resta quella. Solo l'immagine: il velo e i punti non
	   si ingrandiscono. clip-path su .cl-hero-bg (css/cadesk.css) tiene il bordo in piu'
	   dentro il rettangolo dell'immagine. */
	html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="bg"][data-anim-bg="zoom"] img {
		scale: 1;
		animation: cl-bg-zoom 1200ms var(--cl-ease) backwards;
	}

	/* La parallasse (data-anim-parallax), solo dove il browser sa guidare un'animazione
	   con lo scorrimento (Chrome ed Edge dal 115, Safari dal 26): altrove lo sfondo sta
	   fermo e il markup non cambia. Il riquadro dello sfondo si allunga di --cl-par
	   sopra e sotto (inset negativo: la sezione lo taglia) e scende da 0 a --cl-par
	   mentre la sezione esce dalla finestra (view(), intervallo «exit»: dal momento in
	   cui il bordo alto della sezione passa il bordo alto della finestra a quando e'
	   uscita tutta). Senza bisogno di html.js: niente stato nascosto. Dove c'e' anche
	   la dissolvenza (bg senza «none»), le due animazioni stanno nella stessa lista,
	   ciascuna con la sua linea del tempo: una sola regola «animation» vince sull'altra,
	   quindi la seconda le elenca tutte e due. */
	@supports (animation-timeline: scroll()) {
		[data-anim-parallax="light"] {
			--cl-par: 24px;
		}

		[data-anim-parallax="medium"] {
			--cl-par: 40px;
		}

		[data-anim-parallax] {
			inset: calc(-1 * var(--cl-par, 24px)) 0;
			animation: cl-bg-parallax linear both;
			animation-timeline: view();
			animation-range: exit 0% exit 100%;
		}

		html.js :is([data-anim="fade-up"], [data-anim="fade"], [data-anim="slide-left"], [data-anim="scale"]) [data-anim-item="bg"]:not([data-anim-bg="none"])[data-anim-parallax] {
			animation: cl-bg 700ms var(--cl-ease) backwards, cl-bg-parallax linear both;
			animation-timeline: auto, view();
			animation-range: normal, exit 0% exit 100%;
		}
	}

	/* I punti sulla mappa: l'anello pulsa, ogni punto sfalsato di 600ms dal precedente
	   (ritardo negativo: partono gia' in fasi diverse, senza aspettare). */
	.cl-hero-pin::after {
		animation: cl-pin 3s var(--cl-ease) calc(var(--i, 0) * -600ms) infinite;
	}

	/* ---------------------------------------------------- micro-interazioni */

	/* pulsanti: colori in 180ms; la pressione (scale .98, in 120ms) e' un cedimento
	   appena percettibile, niente rimbalzo */
	.cl-btn {
		transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 120ms var(--cl-ease);
	}

	.cl-btn:active {
		transform: scale(0.98);
	}

	/* le frecce dentro ai pulsanti si spostano di 2px nel loro verso: avanti (anche
	   quella del pulsante principale dell'hero), indietro, in alto a destra (il link
	   esterno della fascia MePA). Le icone di telefono ed email dei contatti non sono
	   frecce e stanno ferme. */
	.cl-btn svg {
		transition: transform 180ms var(--cl-ease);
	}

	/* Vantaggi: la cifra in filigrana e il titolo si preparano a muoversi al passaggio
	   (la transizione sta fuori dall'hover, cosi' vale anche al ritorno). */
	.cl-benefit-num {
		transition: color 200ms ease;
	}

	.cl-benefit-title {
		transition: transform 200ms var(--cl-ease);
	}

	/* puntini del carosello: crescono un poco al passaggio (il bersaglio allargato
	   dallo pseudo-elemento cresce con loro di 1-2px: non copre il puntino accanto) */
	.cl-panel-dot {
		transition: transform 180ms var(--cl-ease), background-color 180ms ease;
	}

	/* solo dove c'e' un puntatore che passa sopra, come la sottolineatura della nav */
	@media (hover: hover) {
		.cl-panel-next:hover svg {
			transform: translateX(2px);
		}

		.cl-panel-prev:hover svg {
			transform: translateX(-2px);
		}

		.cl-mepa-body .cl-btn:hover svg {
			transform: translate(1.5px, -1.5px);
		}

		.cl-hero-actions .cl-btn-primary:hover svg {
			transform: translateX(2px);
		}

		.cl-panel-dot:hover {
			transform: scale(1.2);
		}

		/* Vantaggi: sulla voce la cifra passa dal 400 all'accento pieno (500) e il
		   titolo si sposta di 4px a destra. Il colore e' quello della scheda Stile se
		   impostato («Colore al passaggio», che Elementor scrive con piu' specificita'). */
		.cl-benefit:hover .cl-benefit-num {
			color: var(--color-accent-500);
		}

		.cl-benefit:hover .cl-benefit-title {
			transform: translateX(4px);
		}
	}

	/* La nav, scorsa la pagina (is-scrolled dallo script, oltre i 100px; se ne va sotto
	   i 60), prende un'ombra leggera che la stacca dal contenuto che le passa sotto.
	   Solo l'ombra: la nav e' sticky e sta nel flusso, quindi non cambia ne' altezza ne'
	   padding (ridurre il padding spostava il contenuto di 8px e intorno alla soglia
	   poteva sfarfallare). position e top restano quelli di css/cadesk.css. */
	.cl-nav {
		transition: box-shadow 200ms var(--cl-ease);
	}

	.cl-nav.is-scrolled {
		box-shadow: 0 1px 0 var(--color-divider), 0 8px 24px color-mix(in srgb, var(--color-text) 6%, transparent);
	}

	/* Voci della nav: colore in 180ms e, dove c'e' un puntatore che passa sopra, una
	   sottolineatura da 2px che si allunga da sinistra. Sta nel colore del testo
	   (currentColor, quindi il verde dell'hover) a circa 4px sotto il contenuto, misurata
	   dal centro del box: cosi' e' allo stesso posto sia quando la voce e' inline sia
	   quando, sul tocco, e' un inline-flex alto 44px. Niente al focus da tastiera, che
	   ha gia' l'anello. */
	.cl-nav-home,
	.cl-nav-link {
		transition: color 180ms ease;
	}

	.cl-nav-link {
		position: relative;
	}

	.cl-nav-link::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(50% - 0.75em - 4px);
		height: 2px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: 0 50%;
		transition: transform 220ms var(--cl-ease);
	}

	@media (hover: hover) {
		.cl-nav-link:hover::after {
			transform: scaleX(1);
		}
	}

	/* La voce della sezione corrente (aria-current="true" dallo script, scorrendo la
	   home) tiene la sottolineatura ferma, anche senza puntatore: e' uno stato, non un
	   passaggio. Il colore e' in css/cadesk.css. */
	.cl-nav-link[aria-current="true"]::after {
		transform: scaleX(1);
	}

	/* Il pulsante del menu sotto i 760px (geometria e stati in css/cadesk.css). Le
	   barre esterne fanno due passi da 160ms: all'apertura prima vanno al centro
	   (translate) e poi ruotano (rotate, con 160ms di ritardo); alla chiusura
	   l'inverso, prima tornano dritte e poi al loro posto. La barra in mezzo si
	   restringe e sparisce nei primi 160ms. Niente rimbalzi: tutto sulla curva del
	   tema. La tendina si dissolve risalendo di 8px in 180ms; chiudendosi e' piu'
	   breve (120ms) e visibility aspetta la fine della dissolvenza, cosi' le voci
	   restano a schermo finche' non sono trasparenti. Lo spostamento di partenza sta
	   qui e non in cadesk.css: sopra i 760px la stessa .cl-nav-menu e' la riga della
	   nav e non deve spostarsi. */
	@media (max-width: 759.98px) {
		.cl-nav-toggle-bar {
			transition: rotate 160ms var(--cl-ease), translate 160ms var(--cl-ease) 160ms, scale 160ms var(--cl-ease), opacity 160ms ease;
		}

		.cl-nav-toggle[aria-expanded="true"] .cl-nav-toggle-bar {
			transition: translate 160ms var(--cl-ease), rotate 160ms var(--cl-ease) 160ms, scale 160ms var(--cl-ease), opacity 160ms ease;
		}

		.cl-nav-menu {
			transform: translateY(8px);
			transition: opacity 120ms ease, transform 120ms var(--cl-ease), visibility 0s linear 120ms;
		}

		.cl-nav.is-open .cl-nav-menu {
			transform: none;
			transition: opacity 180ms ease, transform 180ms var(--cl-ease), visibility 0s;
		}

		/* dentro la tendina la voce corrente ha la tacca a sinistra (cadesk.css), non
		   la sottolineatura, che qui correrebbe per tutta la riga */
		.cl-nav-menu .cl-nav-link::after {
			content: none;
		}

		/* senza JavaScript la tendina e' una riga nel flusso: niente spostamento */
		html:not(.js) .cl-nav-menu {
			transform: none;
			transition: none;
		}
	}
}

/* ---------------------------------------------------------------- stampa */

/* Sulla carta tutto e' visibile: una voce non ancora entrata (sotto la piega al momento
   della stampa) non deve uscire bianca, e un fotogramma a meta' non ha senso. */
@media print {
	html.js [data-anim-item] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		animation: none !important;
	}
}