/* ============================================================
   Kesva — il movimento, in un posto solo
   v5.160.0

   Prima di questo file il plugin aveva 100 keyframes, una quarantina di
   durate diverse e quindici curve: ogni sezione si muoveva a modo suo perche'
   chi scriveva un'animazione non aveva un posto da cui pescare. Questo file e'
   quel posto.

   Quattro tempi e tre curve, niente di piu'. Chi aggiunge un'animazione usa
   queste variabili: due cose fatte in due momenti diversi si muovono allo
   stesso modo, ed e' questo che fa sembrare un'interfaccia finita.

   Si carica per ultimo, dopo i fogli delle sezioni, perche' in due punti deve
   avere l'ultima parola: sui blocchi del movimento ridotto, che oggi spengono
   tutto con !important, e sull'indicatore delle pillole.
   ============================================================ */

.dm-er,
.kmv-bar,
.kmv-altro,
.asi {
  --k-fast:  140ms;   /* risposta al tocco                            */
  --k-sel:   220ms;   /* cambio di selezione                          */
  --k-panel: 280ms;   /* apertura e chiusura di un pannello           */
  --k-dato:  860ms;   /* un numero che sale, una linea che si disegna */

  --k-esce:  cubic-bezier(.4, 0, 1, 1);
  --k-entra: cubic-bezier(.16, 1, .3, 1);
  --k-molla: cubic-bezier(.34, 1.28, .5, 1);
}

/* ============================================================
   1. La risposta al tocco
   ------------------------------------------------------------
   E' la mancanza piu' grossa della vista telefono: nei fogli delle sezioni
   cliente ci sono 82 regole :hover per la scrivania e 14 fra :active e :focus
   per il telefono. Tocchi una carta e non succede niente, mentre in un angolo
   qualcosa si muove da solo. La pagina sembra ferma proprio perche' cio' che
   si muove non e' quello che stai toccando.

   Si stringe l'oggetto toccato, mai la sola etichetta: schiacciare il testo lo
   rende illeggibile nell'istante in cui lo stai scegliendo.
   ============================================================ */

.dm-er .kmv-idx-r,
.dm-er .kmv-mat-r,
.dm-er .kmv-cls-r,
.dm-er .kmv-cz,
.dm-er .dmv-card,
.dm-er .dmv-kpi,
.dm-er .aqv-card,
.dm-er .riv-row,
.dm-er .dmr-card,
.dm-er .dmr-kpi,
.kmv-altro .kmv-altro-v {
  transition: transform var(--k-fast) var(--k-entra),
              box-shadow var(--k-sel) var(--k-entra),
              border-color var(--k-sel) linear;
}

.dm-er .kmv-idx-r:active,
.dm-er .kmv-mat-r:active,
.dm-er .kmv-cls-r:active,
.dm-er .kmv-cz:active,
.dm-er .dmv-card:active,
.dm-er .dmv-kpi:active,
.dm-er .aqv-card:active,
.dm-er .riv-row:active,
.dm-er .dmr-card:active,
.dm-er .dmr-kpi:active,
.kmv-altro .kmv-altro-v:active {
  transform: scale(.985);
}

/* I comandi veri e propri si stringono di piu': sono piccoli, e su un
   bersaglio piccolo lo stesso .985 non si vede. */
.dm-er .dmv-goto:active,
.dm-er .dmv-tog:active,
.dm-er .dmv-tog-d:active,
.dm-er .aqv-tog:active,
.dm-er .dmv-help-b:active,
.dm-er [data-dmr-sort]:active,
.dm-er [data-dmr-tab]:active,
.dm-er [data-dmr-tog]:active {
  transform: scale(.955);
}
.dm-er .dmv-goto,
.dm-er .dmv-tog,
.dm-er .dmv-tog-d,
.dm-er .aqv-tog,
.dm-er .dmv-help-b,
.dm-er [data-dmr-sort],
.dm-er [data-dmr-tab],
.dm-er [data-dmr-tog] {
  transition: transform var(--k-fast) var(--k-entra),
              background var(--k-fast) linear,
              color var(--k-fast) linear;
}

/* ============================================================
   2. L'onda che parte dal punto toccato
   ------------------------------------------------------------
   E' il dettaglio che fa sentire che l'interfaccia ha sentito *quel* tocco e
   non un tocco qualsiasi. Il cerchio e' un elemento vero aggiunto dal JS, non
   uno pseudo-elemento: le carte delle sezioni usano gia' ::before e ::after
   per il disegno, e prendergliene uno avrebbe rotto la grafica.

   Il ritaglio sta sulla classe che mette il JS, non sulle classi delle
   sezioni: cosi' nessun elemento si ritrova tagliato per sbaglio.
   ============================================================ */

.k-onda-host { position: relative; overflow: hidden; }

.k-onda {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .16;
  transform: scale(0);
  animation: k-onda 550ms var(--k-esce, cubic-bezier(.4,0,1,1)) forwards;
}
@keyframes k-onda { to { transform: scale(2.6); opacity: 0; } }

/* ============================================================
   3. L'indicatore delle pillole scorre davvero
   ------------------------------------------------------------
   Il CSS delle sezioni dichiara gia' `transition: left .3s` sull'indicatore
   del periodo, con tanto di commento che dice "scorre invece di saltare".
   Non scorreva mai: il cambio di periodo sostituisce l'intero blocco, quindi
   l'indicatore che arriva e' un elemento nuovo, e sugli elementi appena creati
   le transizioni non partono.

   Ora il JS misura dove stava prima dello scambio, rimette il nuovo li' con
   una trasformazione e lo lascia tornare. Si anima transform, non left: left
   costa un ricalcolo d'impaginazione a ogni fotogramma.
   ============================================================ */

.dm-er .dmv-winpill > i,
.dm-er .dmv-unitpill > i {
  transition: transform var(--k-sel) var(--k-molla),
              left var(--k-sel) var(--k-entra);
  will-change: transform;
}
.dm-er .dmv-winpill > i[data-k-muto],
.dm-er .dmv-unitpill > i[data-k-muto] { transition: none; }

/* ============================================================
   4. Il passaggio da un filtro all'altro
   ------------------------------------------------------------
   La transizione di vista del browser incrocia il fotogramma vecchio con
   quello nuovo. Senza, il cambio di periodo era uno sfarfallio; con, e' un
   passaggio. Dove non c'e' non succede niente di male: si cambia e basta.
   ============================================================ */

::view-transition-old(root),
::view-transition-new(root) { animation-duration: 280ms; }

/* ============================================================
   5. Il rilievo al passaggio — solo dove c'e' un puntatore vero
   ------------------------------------------------------------
   Su un telefono `:hover` resta appiccicato dopo il tocco e l'elemento rimane
   sollevato: per questo sta dentro (hover: hover) and (pointer: fine).
   ============================================================ */

@media (hover: hover) and (pointer: fine) {
  .dm-er .kmv-idx-r:hover,
  .dm-er .kmv-cls-r:hover,
  .dm-er .riv-row:hover {
    transform: translateY(-1px);
  }
}

/* La lucidatura che attraversa la carta. Anche questa e' un elemento vero
   aggiunto dal JS e rimosso quando ha finito. */
.k-lucida {
  position: absolute; top: 0; bottom: 0; left: -60%; width: 55%;
  z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: k-lucida 620ms var(--k-esce, cubic-bezier(.4,0,1,1)) forwards;
}
@keyframes k-lucida { to { left: 110%; } }

/* ============================================================
   6. L'attesa, detta nello stesso modo dappertutto
   ------------------------------------------------------------
   Vale per il cambio di filtro, per l'export e per l'invio dei moduli.
   La pagina non sparisce e non si svuota: si attenua e prende un filo che
   scorre in cima. Chi stava leggendo continua a vedere cosa stava leggendo, e
   intanto sa che qualcosa sta succedendo.

   Prima `is-loading` abbassava e basta l'opacita' a .55: nessun segno che ci
   fosse un'attesa in corso, e su una connessione lenta sembrava che il tocco
   non fosse arrivato.

   Niente barra di avanzamento: non c'e' un avanzamento da misurare, e
   disegnarne uno significherebbe inventare una percentuale.
   ============================================================ */

.dm-er .dmr.is-loading,
.dm-er .is-loading {
  position: relative;
  opacity: .5;
  transition: opacity var(--k-sel) linear;
}

.dm-er .is-loading::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent, #2f6db8, transparent);
  background-size: 38% 100%; background-repeat: no-repeat;
  animation: k-filo 1s infinite linear;
}
@keyframes k-filo {
  from { background-position: -38% 0; }
  to   { background-position: 138% 0; }
}

/* ============================================================
   7. Movimento ridotto: sostituire, non spegnere
   ------------------------------------------------------------
   La guida MDN dice che `reduce` significa ridurre o sostituire i movimenti
   che danno fastidio — spostamenti ampi, ingrandimenti, senso di moto nello
   spazio. Non "niente animazioni".

   I fogli delle sezioni spengono tutto con
   `* { animation: none !important; transition: none !important }`. Cosi'
   sparivano anche le dissolvenze e i cambi di colore, che non sono moto: la
   selezione saltava da una voce all'altra senza che l'occhio la seguisse. Un
   peggioramento travestito da accessibilita'.

   Questo blocco arriva per ultimo e rimette solo quelle. Il moto resta spento.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

  /* niente si stringe, niente si solleva, niente scivola */
  .dm-er [class]:active,
  .kmv-altro [class]:active { transform: none !important; }
  .k-onda, .k-lucida { display: none !important; }
  .dm-er .dmv-winpill > i,
  .dm-er .dmv-unitpill > i { transition: opacity var(--k-fast) linear !important; }

  /* ma i cambi di colore e le dissolvenze tornano: leggere un colore che cambia
     non e' moto, e senza di quello la selezione salta */
  .dm-er a,
  .dm-er button,
  .dm-er .dmv-winpill a,
  .dm-er .dmv-unitpill a,
  .dm-er [data-dmr-sort],
  .dm-er [data-dmr-tab],
  .kmv-bar .kmv-bar-v,
  .kmv-altro .kmv-altro-v {
    transition: color var(--k-sel) linear,
                background-color var(--k-sel) linear,
                border-color var(--k-sel) linear,
                opacity var(--k-sel) linear !important;
  }

  /* il tracciato si vede disegnato, non in corso di disegno */
  .dm-er [data-dmr-anim="dash"],
  .dm-er [data-dmp-anim="dash"] { stroke-dashoffset: 0 !important; }

  /* l'attesa resta riconoscibile senza il filo che corre: il contenuto si
     attenua di piu', cosi' si capisce lo stesso che e' in corso qualcosa */
  .dm-er .is-loading::after { animation: none !important; opacity: .55; }
  .dm-er .is-loading { opacity: .42; }

  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}