/* Transizioni tra le sezioni: pillola del menu, dissolvenza sfocata, cascata dei blocchi, numeri a larghezza fissa */
.sb-nav .mv-pill{position:absolute;top:0;left:0;z-index:0;width:100%;height:0;border-radius:12px;background:var(--pill,#f1eee3);pointer-events:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),height .32s cubic-bezier(.2,.8,.2,1)}
.sb-nav .it{z-index:1}
.sb-nav .mv-pill~.it.on{background:transparent}
/* strato con la vecchia vista che sfuma */
.mv-old{position:fixed;z-index:30;overflow:hidden;pointer-events:none;animation:mv-out .15s ease-in forwards;transform-origin:50% 0}
.mv-old-in{padding:0}
.mv-old-blur{animation-name:mv-out-blur}
.mv-old-soft{animation:mv-out-soft .2s linear forwards}
.mv-old-rid,.mv-old-soft.mv-old-rid{animation:mv-out-rid .1s linear forwards}
@keyframes mv-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes mv-out-blur{to{opacity:0;transform:translateY(-6px);filter:blur(4px)}}
@keyframes mv-out-soft{to{opacity:0}}
@keyframes mv-out-rid{to{opacity:0}}
/* entrata della nuova vista */
#view.mv-in{animation:mv-in .3s cubic-bezier(.215,.61,.355,1) both}
#view.mv-in-nb{animation-name:mv-in-nb}
#view.mv-in-soft{animation:mv-in-soft .2s linear both}
#view.mv-in-rid{animation:mv-in-rid .1s linear both}
@keyframes mv-in{from{opacity:0;transform:translateY(8px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes mv-in-nb{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes mv-in-soft{from{opacity:.35}to{opacity:1}}
@keyframes mv-in-rid{from{opacity:0}to{opacity:1}}
/* Indietro: direzione invertita (la vecchia vista esce verso destra, la nuova entra da sinistra); "riduci movimento" resta come prima */
.mv-old-back{animation-name:mv-out-back}
.mv-old-back.mv-old-blur{animation-name:mv-out-back-blur}
.mv-old-back.mv-old-soft{animation:mv-out-soft-back .2s linear forwards}
@keyframes mv-out-back{to{opacity:0;transform:translateX(18px)}}
@keyframes mv-out-back-blur{to{opacity:0;transform:translateX(18px);filter:blur(4px)}}
@keyframes mv-out-soft-back{to{opacity:0;transform:translateX(10px)}}
#view.mv-in.mv-in-back{animation-name:mv-in-back}
#view.mv-in.mv-in-nb.mv-in-back{animation-name:mv-in-back-nb}
#view.mv-in-soft.mv-in-back{animation-name:mv-in-soft-back}
@keyframes mv-in-back{from{opacity:0;transform:translateX(-18px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes mv-in-back-nb{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes mv-in-soft-back{from{opacity:.35;transform:translateX(-10px)}to{opacity:1;transform:none}}
/* cascata dei blocchi: una volta per visita, 40 ms l'uno (massimo 8 scaglionati) */
.mv-it{animation:mv-it .26s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--mvi,0) * 40ms + 120ms)}
@keyframes mv-it{from{opacity:0;transform:translateY(10px)}}
.mv-num,.kpi .n,.kpis .n{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mv-it{animation:none}.sb-nav .mv-pill{transition:none}}
#pgt:focus,#pgt:focus-visible{outline:none}