/*
 * ThemaRMsistemi — scene animate e grafici.
 * Ogni scena dura --d e ha cinque tappe di uguale durata (0-20-40-60-80-100%).
 * Gli stili di base mostrano lo stato finale: chi ha "riduci animazioni" vede la soluzione.
 */

.scena{--d:15s;margin:0;position:relative;contain:layout paint}
.scena__disegno svg{contain:strict}
.scena__disegno{
	position:relative;border-radius:calc(var(--raggio) + 8px);overflow:hidden;
	background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--rosso) 9%,#101215),#0b0c0e 70%);
	border:1px solid var(--linea);box-shadow:0 40px 80px -40px rgba(0,0,0,.95);
	aspect-ratio:16/10;
}
.scena__disegno svg{display:block;width:100%;height:100%}
.scena svg *{transform-box:fill-box;transform-origin:center}
.scena svg text{font-family:var(--display)}

/* tappe */
.scena__passi{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.scena__passi li{min-width:0;font-size:12.5px;font-weight:600;color:#6b727a;animation:sc-passo var(--d) infinite;animation-delay:calc(var(--d) * (var(--n) - 5) / 5)}
.scena__passi li:last-child{color:var(--testo)}
.scena__passi i{display:block;height:3px;border-radius:3px;background:var(--linea);margin-bottom:8px;overflow:hidden;position:relative}
.scena__passi i::after{content:"";position:absolute;inset:0;background:var(--rosso);transform:scaleX(0);transform-origin:left;animation:sc-riempi var(--d) linear infinite;animation-delay:inherit}
.scena__passi span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes sc-passo{0%,19.6%{color:var(--testo)}20%,100%{color:#6b727a}}
@keyframes sc-riempi{0%{transform:scaleX(0)}19.6%{transform:scaleX(1)}20%,100%{transform:scaleX(0)}}

.scena__didascalie{display:grid;margin-top:10px;min-height:3.2em}
.scena__didascalie p{grid-area:1/1;margin:0;color:var(--testo-soft);font-size:14.5px;line-height:1.55;opacity:0;animation:sc-dida var(--d) infinite;animation-delay:calc(var(--d) * (var(--n) - 5) / 5)}
.scena__didascalie p:last-child{opacity:1}
@keyframes sc-dida{0%{opacity:0;transform:translateY(6px)}2%,18%{opacity:1;transform:none}20%,100%{opacity:0;transform:none}}

/* fuori vista la scena si ferma */
.scena.ferma *,.scena.ferma *::after{animation-play-state:paused!important}

.duecol--scena{grid-template-columns:.85fr 1.15fr}

/* ------------------------------------------------------------------ virus */
.v-cursore,.v-mail,.v-glitch,.v-errore,.v-nero,.v-bloccato,.v-bug,.v-notifica,.v-scan,.v-progresso{opacity:0}
.v-app{animation:v-app var(--d) infinite}
.v-barra{transform-origin:bottom!important;animation:v-barra var(--d) infinite backwards}
.v-linea{stroke-dasharray:1;animation:v-linea var(--d) infinite}
.v-cursore{animation:v-cursore var(--d) infinite}
.v-mail{animation:v-mail var(--d) infinite}
.v-bug{animation:v-bug var(--d) infinite backwards}
.v-glitch{animation:v-glitch var(--d) infinite steps(1)}
.v-errore{animation:v-errore var(--d) infinite}
.v-nero{animation:v-nero var(--d) infinite}
.v-bloccato{animation:v-bloccato var(--d) infinite}
.v-notifica{animation:v-notifica var(--d) infinite}
.v-scan{animation:v-scan var(--d) infinite linear}
.v-progresso{animation:v-progresso var(--d) infinite}
.v-prog{transform-origin:left!important;animation:v-prog var(--d) infinite}
.v-ok{animation:v-ok var(--d) infinite}

@keyframes v-app{0%,39%{opacity:1;transform:none}41%{transform:translate(-6px,2px)}43%{transform:translate(6px,-3px)}45%{transform:translate(-5px,1px) skewX(5deg)}47%{transform:translate(4px,2px)}49%{opacity:1;transform:none}50%,80%{opacity:0}83%,100%{opacity:1;transform:none}}
@keyframes v-barra{0%{transform:scaleY(0)}8%,80%{transform:scaleY(1)}81%{transform:scaleY(0)}89%,100%{transform:scaleY(1)}}
@keyframes v-linea{0%,3%{stroke-dashoffset:1}17%,80%{stroke-dashoffset:0}81%,84%{stroke-dashoffset:1}96%,100%{stroke-dashoffset:0}}
@keyframes v-cursore{0%{opacity:1;transform:translate(250px,290px)}6%{transform:translate(330px,175px)}12%{transform:translate(500px,96px)}18%{transform:translate(430px,230px)}22%{transform:translate(470px,282px)}23%{transform:translate(470px,282px) scale(.8)}24%{opacity:1;transform:translate(470px,282px)}27%,100%{opacity:0;transform:translate(470px,282px)}}
@keyframes v-mail{0%,18%{opacity:0;transform:translateX(50px)}21%,25%{opacity:1;transform:none}24%{transform:scale(1.03)}29%,100%{opacity:0;transform:scale(.96)}}
@keyframes v-bug{0%,26%{opacity:0;transform:scale(0)}29%{opacity:1;transform:scale(1.3)}31%{transform:scale(1)}36%{transform:translate(10px,-8px) rotate(16deg)}42%{transform:translate(-8px,6px) rotate(-12deg) scale(1.15)}48%{transform:translate(6px,10px) rotate(6deg) scale(1.25)}56%{transform:translate(-10px,-4px) scale(1.25)}64%{opacity:1;transform:scale(1.2)}70%{opacity:0;transform:scale(0) rotate(120deg)}100%{opacity:0;transform:scale(0)}}
@keyframes v-glitch{0%,37%{opacity:0;transform:none}38%{opacity:1;transform:translateX(-24px)}39%{opacity:.2;transform:translateX(10px)}40%{opacity:1;transform:translateX(18px)}42%{opacity:.5;transform:translateX(-10px)}44%{opacity:1;transform:translateX(26px)}46%{opacity:.3;transform:translateX(-4px)}48%{opacity:1;transform:translateX(-14px)}50%,100%{opacity:0;transform:none}}
@keyframes v-errore{0%,43%{opacity:0;transform:scale(.8)}45%{opacity:1;transform:scale(1.05)}46%,49%{opacity:1;transform:scale(1)}50%,100%{opacity:0}}
@keyframes v-nero{0%,49%{opacity:0}50%,80%{opacity:1}83%,100%{opacity:0}}
@keyframes v-bloccato{0%,50%{opacity:0}52%{opacity:1}54%{opacity:.3}56%,61%{opacity:1}63%,100%{opacity:0}}
@keyframes v-notifica{0%,57%{opacity:0;transform:translateY(-16px)}60%,78%{opacity:1;transform:none}81%,100%{opacity:0;transform:none}}
@keyframes v-scan{0%,63%{opacity:0;transform:translateY(0)}64%{opacity:1;transform:translateY(0)}70%{opacity:1;transform:translateY(278px)}70.1%{transform:translateY(0)}77%{opacity:1;transform:translateY(278px)}78%,100%{opacity:0;transform:translateY(278px)}}
@keyframes v-progresso{0%,63%{opacity:0}65%,79%{opacity:1}81%,100%{opacity:0}}
@keyframes v-prog{0%,64%{transform:scaleX(0)}78%,100%{transform:scaleX(1)}}
@keyframes v-ok{0%,81%{opacity:0;transform:scale(.6)}84%{opacity:1;transform:scale(1.06)}86%,97%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1)}}

/* ------------------------------------------------------------------ backup */
.b-led-ko,.b-errore,.b-crepa,.b-scintille,.b-conta-zero,.b-ritorno,.b-progresso,.b-copia,.b-flusso{opacity:0}
.b-crepa{stroke-dasharray:1;stroke-dashoffset:1}
.b-disco{animation:b-disco var(--d) infinite}
.b-crepa{animation:b-crepa var(--d) infinite}
.b-scintille{animation:b-scintille var(--d) infinite steps(1)}
.b-led-ok{animation:b-led-ok var(--d) infinite}
.b-led-ko{animation:b-led-ko var(--d) infinite}
.b-errore{animation:b-errore var(--d) infinite}
.b-file{animation:b-file var(--d) infinite backwards}
.b-cartella{animation:b-cartella var(--d) infinite}
.b-conta-ok{animation:b-conta-ok var(--d) infinite}
.b-conta-zero{animation:b-conta-zero var(--d) infinite}
.b-flusso{animation:b-flusso var(--d) infinite,sc-tratteggio 1s linear infinite}
.b-ritorno{animation:b-ritorno var(--d) infinite,sc-tratteggio 1s linear infinite}
.b-copia{animation:b-copia var(--d) infinite}
.b-progresso{animation:b-progresso var(--d) infinite}
.b-barra{transform-origin:left!important;animation:b-barra var(--d) infinite}
.b-ok{animation:b-ok var(--d) infinite}
@keyframes sc-tratteggio{to{stroke-dashoffset:-26}}

@keyframes b-disco{0%,21%{transform:none}22%{transform:translate(-3px,1px)}23%{transform:translate(3px,-1px)}24%{transform:translate(-2px,2px)}25%{transform:translate(3px,0)}26%{transform:translate(-3px,-1px)}27%{transform:translate(2px,1px)}28%,100%{transform:none}}
@keyframes b-crepa{0%,23%{opacity:0;stroke-dashoffset:1}24%{opacity:1}30%,62%{opacity:1;stroke-dashoffset:0}64%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes b-scintille{0%,23%{opacity:0}24%{opacity:1}26%{opacity:0}28%{opacity:1}31%{opacity:0}34%{opacity:1}36%,100%{opacity:0}}
@keyframes b-led-ok{0%,21%{opacity:1}22%,63%{opacity:0}64%,100%{opacity:1}}
@keyframes b-led-ko{0%,21%{opacity:0}22%{opacity:1}30%{opacity:.3}34%{opacity:1}63%{opacity:1}64%,100%{opacity:0}}
@keyframes b-errore{0%,25%{opacity:0}27%,62%{opacity:1}64%,100%{opacity:0}}
@keyframes b-file{0%{opacity:0;transform:scale(.3)}5%,40%{opacity:1;transform:none}49%{opacity:0;transform:translate(0,170px) rotate(28deg)}60%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}62%{opacity:1;transform:translate(var(--dx),var(--dy)) scale(.4)}74%,100%{opacity:1;transform:none}}
@keyframes b-cartella{0%,44%{stroke:#262a2f}46%,62%{stroke:#e2001a}66%,100%{stroke:#262a2f}}
@keyframes b-conta-ok{0%,44%{opacity:1}45%,79%{opacity:0}80%,100%{opacity:1}}
@keyframes b-conta-zero{0%,44%{opacity:0}45%,79%{opacity:1}80%,100%{opacity:0}}
@keyframes b-flusso{0%,7%{opacity:0}9%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes b-copia{0%,11%{opacity:0}13%,20%{opacity:1}22%,100%{opacity:0}}
@keyframes b-ritorno{0%,60%{opacity:0}62%,77%{opacity:1}79%,100%{opacity:0}}
@keyframes b-progresso{0%,60%{opacity:0}62%,78%{opacity:1}80%,100%{opacity:0}}
@keyframes b-barra{0%,61%{transform:scaleX(0)}77%,100%{transform:scaleX(1)}}
@keyframes b-ok{0%,80%{opacity:0;transform:translateY(10px)}83%,97%{opacity:1;transform:none}100%{opacity:0}}

/* ------------------------------------------------------------------ rete */
.r-link{stroke:#3a3f46;stroke-width:2.5}
.r-link-ko{stroke:#e2001a;stroke-width:2.5;stroke-dasharray:6 7}
.r-pacchetto{fill:var(--rosso);offset-rotate:0deg}
.r-pacchetto--b{fill:#f2f3f5}
.r-ko,.r-linee-ko,.r-led-ko,.r-giro,.r-diagnosi,.r-lente,.r-velocita{opacity:0}
.r-pacchetto{animation:r-viaggio 1.3s linear infinite,r-vis var(--d) infinite}
.r-linee{animation:r-linee var(--d) infinite}
.r-linee-ko{animation:r-linee-ko var(--d) infinite}
.r-ok{animation:r-ok var(--d) infinite}
.r-ko{animation:r-ko var(--d) infinite}
.r-led{animation:r-led 1s steps(2,jump-none) infinite}
.r-led-ko{animation:r-led-ko var(--d) infinite}
.r-router{animation:r-router var(--d) infinite}
.r-giro{transform-origin:center!important;animation:r-giro var(--d) infinite,ruota 1.1s linear infinite}
.r-velocita{animation:r-velocita var(--d) infinite}
.r-diagnosi{animation:r-diagnosi var(--d) infinite}
.r-lente{animation:r-lente var(--d) infinite}
.r-piu{animation:r-piu var(--d) infinite}
@keyframes r-viaggio{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes r-vis{0%,21%{opacity:1}22%,77%{opacity:0}79%,100%{opacity:1}}
@keyframes r-linee{0%,21%{opacity:1}22%,73%{opacity:.25}76%,100%{opacity:1}}
@keyframes r-linee-ko{0%,21%{opacity:0}22%,72%{opacity:1}75%,100%{opacity:0}}
@keyframes r-ok{0%,22%{opacity:1}23%,76%{opacity:0}78%,100%{opacity:1}}
@keyframes r-ko{0%,22%{opacity:0;transform:scale(.4)}24%{opacity:1;transform:scale(1.2)}26%,76%{opacity:1;transform:none}78%,100%{opacity:0}}
@keyframes r-led{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
@keyframes r-led-ko{0%,21%{opacity:0}22%,72%{opacity:1}26%{opacity:.2}30%{opacity:1}75%,100%{opacity:0}}
@keyframes r-router{0%,21%{transform:none}22%{transform:translateX(-3px)}23%{transform:translateX(3px)}24%{transform:translateX(-2px)}25%,100%{transform:none}}
@keyframes r-giro{0%,60%{opacity:0}62%,77%{opacity:1}79%,100%{opacity:0}}
@keyframes r-velocita{0%,1%{opacity:0}3%,20%{opacity:1}22%,100%{opacity:0}}
@keyframes r-diagnosi{0%,49%{opacity:0;transform:translateY(6px)}52%,74%{opacity:1;transform:none}76%,100%{opacity:0}}
@keyframes r-lente{0%,40%{opacity:0;transform:translate(150px,90px)}42%{opacity:1;transform:translate(150px,90px)}48%{transform:translate(110px,200px)}54%,58%{opacity:1;transform:translate(330px,214px)}60%,100%{opacity:0;transform:translate(330px,214px)}}
@keyframes r-piu{0%,80%{opacity:0;transform:translateY(6px)}83%,98%{opacity:1;transform:none}100%{opacity:0}}

/* ------------------------------------------------------------------ server */
.s-led-ko,.s-stop,.s-p100,.s-p40,.s-disco-ko,.s-cpu-alto,.s-allarme,.s-lavoro,.s-p62{opacity:0}
.s-led{animation:r-led 1.1s steps(2,jump-none) infinite}
.s-led-ko{animation:s-ko var(--d) infinite}
.s-stop{animation:s-stop var(--d) infinite}
.s-disco{transform-origin:left!important;animation:s-disco var(--d) infinite}
.s-disco-ko{animation:s-disco var(--d) infinite,s-disco-ko var(--d) infinite}
.s-p62{animation:s-p62 var(--d) infinite}
.s-p100{animation:s-p100 var(--d) infinite}
.s-p40{animation:s-p40 var(--d) infinite}
.s-cpu{stroke-dasharray:1;animation:s-cpu var(--d) infinite}
.s-cpu-alto{stroke-dasharray:1;animation:s-cpu-alto var(--d) infinite}
.s-allarme{animation:s-allarme var(--d) infinite}
.s-lavoro{animation:s-lavoro var(--d) infinite}
.s-giro{transform-origin:center!important;animation:ruota 1s linear infinite}
.s-utenti{animation:s-utenti var(--d) infinite}
.s-ok{animation:s-ok var(--d) infinite}
@keyframes s-ko{0%,39%{opacity:0}40%,63%{opacity:1}64%,100%{opacity:0}}
@keyframes s-stop{0%,39%{opacity:0}40%{opacity:1}44%{opacity:.2}48%,63%{opacity:1}64%,100%{opacity:0}}
@keyframes s-disco{0%,20%{transform:scaleX(.62)}38%,62%{transform:scaleX(1)}74%,100%{transform:scaleX(.4)}}
@keyframes s-disco-ko{0%,26%{opacity:0}34%,62%{opacity:1}66%,100%{opacity:0}}
@keyframes s-p62{0%,23%{opacity:1}25%,100%{opacity:0}}
@keyframes s-p100{0%,35%{opacity:0}37%,64%{opacity:1}66%,100%{opacity:0}}
@keyframes s-p40{0%,72%{opacity:0}74%,100%{opacity:1}}
@keyframes s-cpu{0%{stroke-dashoffset:1}12%,20%{stroke-dashoffset:0;opacity:1}22%,78%{opacity:0}80%{opacity:1;stroke-dashoffset:1}92%,100%{opacity:1;stroke-dashoffset:0}}
@keyframes s-cpu-alto{0%,20%{opacity:0;stroke-dashoffset:1}22%{opacity:1}38%,64%{opacity:1;stroke-dashoffset:0}68%,100%{opacity:0;stroke-dashoffset:0}}
@keyframes s-allarme{0%,39%{opacity:0}41%{opacity:1}44%{opacity:.35}47%{opacity:1}50%{opacity:.35}53%,60%{opacity:1}62%,100%{opacity:0}}
@keyframes s-lavoro{0%,61%{opacity:0}63%,78%{opacity:1}80%,100%{opacity:0}}
@keyframes s-utenti{0%,38%{opacity:1}39%,79%{opacity:0}81%,100%{opacity:1}}
@keyframes s-ok{0%,80%{opacity:0;transform:translateY(8px)}83%,98%{opacity:1;transform:none}100%{opacity:0}}

/* ------------------------------------------------------------------ posta */
.p-bloccata,.p-pieno,.p-pieno-t,.p-busta{opacity:0}
.p-pieno{transform-origin:left!important;animation:p-pieno var(--d) infinite}
.p-pieno-t{animation:p-pieno-t var(--d) infinite}
.p-busta{animation:p-busta var(--d) infinite backwards}
.p-bloccata{animation:p-bloccata var(--d) infinite}
.p-vecchio{animation:p-vecchio var(--d) infinite}
.p-scudo{animation:p-scudo var(--d) infinite}
.p-dispositivi{animation:p-dispositivi var(--d) infinite}
.p-righe{stroke-dasharray:80;animation:p-righe var(--d) infinite}
.p-sync circle{animation:r-led 1s steps(2,jump-none) infinite}
.p-link{animation:p-link var(--d) infinite,sc-tratteggio 1s linear infinite}
@keyframes p-pieno{0%{transform:scaleX(.3)}18%,58%{transform:scaleX(1)}60%,100%{transform:scaleX(0)}}
@keyframes p-pieno-t{0%,14%{opacity:0}17%,58%{opacity:1}60%,100%{opacity:0}}
@keyframes p-vecchio{0%,58%{opacity:1}64%,100%{opacity:.25}}
@keyframes p-busta{0%,20%{opacity:0;transform:translate(0,0)}23%{opacity:1;transform:translate(20px,var(--dy))}30%{opacity:1;transform:translate(70px,var(--dy))}33%{opacity:0;transform:translate(70px,var(--dy)) rotate(30deg)}40%{opacity:0;transform:translate(0,0)}43%{opacity:1;transform:translate(10px,var(--dy))}57%{opacity:1;transform:translate(250px,calc(var(--dy) * .3 - 30px))}59%,100%{opacity:0;transform:translate(260px,-30px) scale(.4)}}
@keyframes p-bloccata{0%,22%{opacity:0}25%{opacity:1}28%{opacity:.4}31%,38%{opacity:1}40%,100%{opacity:0}}
@keyframes p-scudo{0%,60%{opacity:0;transform:scale(.7)}64%,100%{opacity:1;transform:none}}
@keyframes p-dispositivi{0%,78%{opacity:.25}82%,100%{opacity:1}}
@keyframes p-righe{0%,80%{stroke-dashoffset:80}90%,100%{stroke-dashoffset:0}}
@keyframes p-link{0%,79%{opacity:0}82%,100%{opacity:1}}

/* ------------------------------------------------------------------ gestionale */
.g-foglio{animation:g-foglio var(--d) infinite backwards}
.g-finestra{animation:g-finestra var(--d) infinite}
.g-kpi{animation:g-kpi var(--d) infinite}
.g-barra{transform-origin:bottom!important;animation:g-barra var(--d) infinite backwards}
.g-linea{stroke-dasharray:1;animation:g-linea var(--d) infinite}
.g-telefono{animation:g-telefono var(--d) infinite}
.g-riga{animation:g-riga var(--d) infinite backwards}
.g-sync{transform-origin:center!important;animation:ruota 1s linear infinite}
.g-premio{animation:g-premio var(--d) infinite}
@keyframes g-foglio{0%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.7)}3%,18%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}10%{transform:translate(calc(var(--x) + 6px),calc(var(--y) - 6px)) rotate(var(--r))}28%,100%{opacity:0;transform:translate(0,0) rotate(0) scale(.2)}}
@keyframes g-finestra{0%,21%{opacity:0;transform:scale(.88)}30%,100%{opacity:1;transform:none}}
@keyframes g-kpi{0%,38%{opacity:0;transform:translateY(8px)}43%,100%{opacity:1;transform:none}}
@keyframes g-barra{0%,40%{transform:scaleY(0)}52%,100%{transform:scaleY(1)}}
@keyframes g-linea{0%,80%{stroke-dashoffset:1}94%,100%{stroke-dashoffset:0}}
@keyframes g-telefono{0%,58%{opacity:0;transform:translateX(60px)}64%,100%{opacity:1;transform:none}}
@keyframes g-riga{0%,64%{opacity:0;transform:translateX(12px)}68%,100%{opacity:1;transform:none}}
@keyframes g-premio{0%,82%{opacity:0;transform:translateY(8px)}86%,98%{opacity:1;transform:none}100%{opacity:0}}

/* ------------------------------------------------------------------ grafici */
.grafico{
	background:linear-gradient(180deg,color-mix(in srgb,var(--superficie) 92%,#fff),var(--superficie));
	border:1px solid var(--linea);border-radius:calc(var(--raggio) + 6px);padding:22px 22px 18px;min-width:0;
	box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
}
.sez--superficie .grafico{background:linear-gradient(180deg,#121418,var(--nero))}
.grafico__testa{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.grafico__testa b{font-family:var(--display);font-size:15px}
.grafico__legenda{display:flex;gap:14px;font-size:12.5px;color:var(--testo-soft)}
.grafico__legenda span{display:inline-flex;align-items:center;gap:6px}
.grafico__legenda i{width:10px;height:10px;border-radius:3px;background:#4a5058}
.grafico__legenda span:last-child i{background:var(--rosso)}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.grafico svg text{font-family:var(--body);fill:var(--testo-soft);font-size:12px}
.grafico .gr-valore{fill:var(--testo);font-weight:700;font-family:var(--display);font-size:13px}
.grafico__nota{margin:10px 0 0;font-size:12px;color:#6b727a}

.gr-barra{transform-box:fill-box;transform-origin:bottom}
.gr-punto{transform-box:fill-box;transform-origin:center}
.js .grafico .gr-barra{transform:scaleY(0);transition:transform 1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 90ms + 200ms)}
.js .grafico .gr-valore{opacity:0;transition:opacity .4s ease;transition-delay:calc(var(--i) * 90ms + 900ms)}
.js .grafico .gr-linea{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1) .2s}
.js .grafico .gr-area{opacity:0;transition:opacity 1s ease 1.2s}
.js .grafico .gr-punto{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(var(--i) * 140ms + 400ms)}
.js .grafico .gr-fetta{stroke-dashoffset:var(--lun);transition:stroke-dashoffset 1.1s cubic-bezier(.22,1,.36,1);transition-delay:calc(var(--i) * 250ms + 200ms)}
.js .grafico .gr-centro{opacity:0;transition:opacity .5s ease 1s}
.js .grafico.viva .gr-barra,.js .grafico.viva .gr-punto{transform:none}
.js .grafico.viva .gr-valore,.js .grafico.viva .gr-area,.js .grafico.viva .gr-centro{opacity:1}
.js .grafico.viva .gr-linea{stroke-dashoffset:0}
.js .grafico.viva .gr-fetta{stroke-dashoffset:var(--fine)}

@media (max-width:900px){
	.duecol--scena{grid-template-columns:1fr}
	.scena__passi{gap:5px}
	.scena__passi li{font-size:10.5px}
	.scena__didascalie p{font-size:14px}
}

/* cms: sito aggiornato e personalizzato */
.c-rischio,.c-vuln,.c-vecchio,.c-riga-ko,.c-lavoro{opacity:0}
.c-rischio{animation:c-rischio var(--d) infinite}
.c-vuln{animation:c-vuln var(--d) infinite}
.c-online{animation:c-online var(--d) infinite}
.c-vecchio,.c-riga-ko{animation:c-vecchio var(--d) infinite}
.c-nuova{animation:c-nuova var(--d) infinite}
.c-lavoro{animation:c-lavoro var(--d) infinite}
.c-barra{transform-origin:left!important;animation:c-barra var(--d) infinite}
.c-misura{animation:c-misura var(--d) infinite}
.c-plug{animation:c-plug var(--d) infinite backwards}
.c-nuovo{animation:c-nuovo var(--d) infinite}
.c-ok{animation:c-ok var(--d) infinite}
@keyframes c-rischio{0%,21%{opacity:0}24%{opacity:.16}27%{opacity:.04}30%{opacity:.16}33%{opacity:.04}36%,40%{opacity:.12}44%,100%{opacity:0}}
@keyframes c-vuln{0%,20%{opacity:0}23%,52%{opacity:1}55%,100%{opacity:0}}
@keyframes c-online{0%,19%{opacity:1}21%,55%{opacity:0}58%,100%{opacity:1}}
@keyframes c-vecchio{0%,20%{opacity:0}23%,52%{opacity:1}54%,100%{opacity:0}}
@keyframes c-nuova{0%,20%{opacity:1}21%,53%{opacity:0}56%,100%{opacity:1}}
@keyframes c-lavoro{0%,40%{opacity:0}43%,58%{opacity:1}61%,100%{opacity:0}}
@keyframes c-barra{0%,44%{transform:scaleX(0)}56%,100%{transform:scaleX(1)}}
@keyframes c-misura{0%,60%{opacity:0}63%,100%{opacity:1}}
@keyframes c-plug{0%,61%{opacity:0;transform:translateX(30px)}65%,100%{opacity:1;transform:none}}
@keyframes c-nuovo{0%,68%{opacity:0;transform:translateY(10px)}72%,100%{opacity:1;transform:none}}
@keyframes c-ok{0%,79%{opacity:0;transform:translateY(12px)}83%,100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
	.scena *,.scena *::after{animation:none!important}
	.scena__passi li{color:#6b727a}
	.scena__passi li:last-child{color:var(--testo)}
	.scena__passi li:last-child i::after{transform:none}
	.js .grafico .gr-barra,.js .grafico .gr-punto{transform:none}
	.js .grafico .gr-valore,.js .grafico .gr-area,.js .grafico .gr-centro{opacity:1}
	.js .grafico .gr-linea{stroke-dashoffset:0}
	.js .grafico .gr-fetta{stroke-dashoffset:var(--fine)}
}

/* ------------------------------------------------------------------ formazione */
.f-dubbi,.f-idea,.f-s1,.f-s2,.f-s3,.f-s4{opacity:0}
.f-dubbi{animation:f-dubbi var(--d) infinite}
.f-dubbi text{animation:f-salta 1.4s ease-in-out infinite}
.f-dubbi text:nth-child(2){animation-delay:.3s}.f-dubbi text:nth-child(3){animation-delay:.6s}
.f-idea{animation:f-idea var(--d) infinite}
.f-badge{animation:f-badge var(--d) infinite}
.f-s1{animation:f-s1 var(--d) infinite}
.f-lento{transform-origin:left!important;animation:f-lento var(--d) infinite}
.f-lancetta{transform-origin:50% 100%!important;animation:ruota 1.2s linear infinite}
.f-s2{animation:f-s2 var(--d) infinite}
.f-live{animation:r-led 1s steps(2,jump-none) infinite}
.f-punto{animation:f-punto var(--d) infinite backwards}
.f-puntatore{transform-origin:100% 100%!important;animation:f-puntatore 1.6s ease-in-out infinite}
.f-s3{animation:f-s3 var(--d) infinite}
.f-es{animation:f-es var(--d) infinite backwards}
.f-s4{animation:f-s4 var(--d) infinite}
.f-mail{animation:f-mail var(--d) infinite}
.f-flag{animation:f-flag var(--d) infinite backwards}
.f-segnala{animation:f-segnala var(--d) infinite}
.f-s5{animation:f-s5 var(--d) infinite}
.f-dopo{transform-origin:left!important;animation:f-dopo var(--d) infinite}
.f-dopo-t{animation:f-dopo-t var(--d) infinite}
.f-riconosce{transform-origin:left!important;animation:f-riconosce var(--d) infinite}
@keyframes f-salta{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes f-dubbi{0%,1%{opacity:0}4%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes f-idea{0%,32%{opacity:0;transform:scale(.4)}35%{opacity:1;transform:scale(1.15)}37%,41%{opacity:1;transform:none}44%,100%{opacity:0}}
@keyframes f-badge{0%,81%{opacity:0;transform:scale(.4)}84%{opacity:1;transform:scale(1.2)}86%,98%{opacity:1;transform:none}100%{opacity:0}}
@keyframes f-s1{0%,19%{opacity:1}21%,100%{opacity:0}}
@keyframes f-lento{0%{transform:scaleX(0)}19%,100%{transform:scaleX(.3)}}
@keyframes f-s2{0%,19%{opacity:0}22%,39%{opacity:1}41%,100%{opacity:0}}
@keyframes f-punto{0%,23%{opacity:0;transform:translateX(-10px)}26%,100%{opacity:1;transform:none}}
@keyframes f-puntatore{0%,100%{transform:rotate(0)}50%{transform:rotate(8deg)}}
@keyframes f-s3{0%,39%{opacity:0}42%,59%{opacity:1}61%,100%{opacity:0}}
@keyframes f-es{0%,43%{opacity:0;transform:scale(.7)}46%,100%{opacity:1;transform:none}}
@keyframes f-s4{0%,59%{opacity:0}62%,79%{opacity:1}81%,100%{opacity:0}}
@keyframes f-mail{0%,73%{opacity:1;transform:none}77%,100%{opacity:0;transform:translate(-30px,10px) scale(.9)}}
@keyframes f-flag{0%,64%{opacity:0;transform:scale(.6)}66%{opacity:1;transform:scale(1.1)}68%,100%{opacity:1;transform:none}}
@keyframes f-segnala{0%,73%{opacity:0;transform:scale(.8)}76%,100%{opacity:1;transform:none}}
@keyframes f-s5{0%,79%{opacity:0}82%,98%{opacity:1}100%{opacity:0}}
@keyframes f-dopo{0%,83%{transform:scaleX(0)}90%,100%{transform:scaleX(1)}}
@keyframes f-dopo-t{0%,88%{opacity:0}91%,100%{opacity:1}}
@keyframes f-riconosce{0%,85%{transform:scaleX(0)}94%,100%{transform:scaleX(1)}}

/* ------------------------------------------------------------------ android */
.a-carta,.a-chat,.a-lista,.a-noseg,.a-offline,.a-sync,.a-flash{opacity:0}
.a-carta,.a-chat{animation:a-carta var(--d) infinite}
.a-foglio{animation:a-foglio var(--d) infinite backwards}
.a-bolla{animation:a-bolla var(--d) infinite backwards}
.a-telefono{animation:a-telefono var(--d) infinite}
.a-lista{animation:a-lista var(--d) infinite}
.a-riga{animation:a-riga var(--d) infinite backwards}
.a-modulo{animation:a-modulo var(--d) infinite}
.a-campo{transform-origin:left!important;animation:a-campo var(--d) infinite}
.a-campo2{animation-name:a-campo2}
.a-foto{animation:a-foto var(--d) infinite}
.a-flash{animation:a-flash var(--d) infinite}
.a-firma{stroke-dasharray:1;animation:a-firma var(--d) infinite}
.a-segnale{animation:a-segnale var(--d) infinite}
.a-noseg{animation:a-noseg var(--d) infinite}
.a-offline{animation:a-offline var(--d) infinite}
.a-inviato{animation:a-inviato var(--d) infinite}
.a-sync{animation:a-sync var(--d) infinite,sc-tratteggio 1s linear infinite}
.a-ufficio{animation:a-ufficio var(--d) infinite}
.a-arrivo{animation:a-arrivo var(--d) infinite}
.a-ok{animation:a-ok var(--d) infinite}
@keyframes a-carta{0%,19%{opacity:1}23%,100%{opacity:0}}
@keyframes a-foglio{0%{transform:rotate(var(--r)) translateY(-20px);opacity:0}4%,16%{transform:rotate(var(--r));opacity:1}10%{transform:rotate(calc(var(--r) * -1))}22%,100%{transform:rotate(calc(var(--r) * 3)) translateY(60px);opacity:0}}
@keyframes a-bolla{0%,2%{opacity:0;transform:scale(.6)}5%{opacity:1;transform:scale(1.06)}6%,100%{opacity:1;transform:none}}
@keyframes a-telefono{0%,20%{opacity:0;transform:translateY(40px)}25%,100%{opacity:1;transform:none}}
@keyframes a-lista{0%,22%{opacity:0}25%,39%{opacity:1}41%,100%{opacity:0}}
@keyframes a-riga{0%,25%{opacity:0;transform:translateX(14px)}29%,100%{opacity:1;transform:none}}
@keyframes a-modulo{0%,40%{opacity:0}43%,100%{opacity:1}}
@keyframes a-campo{0%,43%{transform:scaleX(0)}47%,100%{transform:scaleX(1)}}
@keyframes a-campo2{0%,47%{transform:scaleX(0)}51%,100%{transform:scaleX(1)}}
@keyframes a-foto{0%,51%{opacity:0}52%,100%{opacity:1}}
@keyframes a-flash{0%,50.5%{opacity:0}51%{opacity:.95}54%,100%{opacity:0}}
@keyframes a-firma{0%,54%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
@keyframes a-segnale{0%,61%{opacity:1}62%,71%{opacity:0}72%,100%{opacity:1}}
@keyframes a-noseg{0%,61%{opacity:0}62%,71%{opacity:1}72%,100%{opacity:0}}
@keyframes a-offline{0%,61%{opacity:0}63%,71%{opacity:1}73%,100%{opacity:0}}
@keyframes a-inviato{0%,73%{opacity:0}76%,100%{opacity:1}}
@keyframes a-sync{0%,71%{opacity:0}73%,84%{opacity:1}86%,100%{opacity:0}}
@keyframes a-ufficio{0%,60%{opacity:0;transform:translateX(30px)}65%,100%{opacity:1;transform:none}}
@keyframes a-arrivo{0%,77%{opacity:0;transform:translateY(-8px)}80%,100%{opacity:1;transform:none}}
@keyframes a-ok{0%,81%{opacity:0;transform:translateY(8px)}84%,98%{opacity:1;transform:none}100%{opacity:0}}