/* MOVIMENTO — il livello delle animazioni, uguale per tutte le app (30/09/2026).
 *
 * COSA E'. Un file solo, senza librerie e senza JavaScript, che si aggiunge a
 * una pagina SENZA cambiarne l'aspetto: finche' non si mette una classe `mov-`
 * su un elemento, non succede niente. Non contiene colori ne' caratteri: quelli
 * restano del foglio della pagina (stile.css «Console» per lo staff, i colori
 * del marchio per gli ospiti).
 *
 * LE REGOLE (KIT-GRAFICO.md le spiega per esteso):
 *   1. Il movimento dice una cosa: «ho sentito il tocco», «e' arrivato»,
 *      «e' fatto», «qualcosa non va». Se non dice niente, non si mette.
 *   2. Tempi e curve si prendono SOLO dai gettoni qui sotto, mai numeri a mano.
 *   3. Si muovono solo `transform` e `opacity` (non fanno scattare la pagina).
 *   4. Pagine degli ospiti: entrate, conferme, passaggi fra schermate.
 *      Strumenti dello staff: solo risposta al tocco, caricamento, conferma.
 *   5. Chi ha chiesto al telefono «riduci movimento» non vede animazioni
 *      (ultima sezione): mai un'informazione data SOLO col movimento.
 *
 * DOVE STA L'ORIGINALE: cartella condivisa `KIT-GRAFICO/movimento.css`. Nelle
 * repo se ne tiene una COPIA IDENTICA fra i file statici (servita da noi, mai
 * da siti esterni). Si modifica l'originale, poi si ricopia.
 */

:root {
  /* Tempi */
  --mov-tocco: 90ms;     /* risposta al dito: deve sembrare immediata */
  --mov-svelto: 160ms;   /* cose piccole: pastiglie, spunte, avvisi */
  --mov-normale: 260ms;  /* schede che entrano, tendine che si aprono */
  --mov-ampio: 420ms;    /* conferme e passaggi fra schermate */
  --mov-scalino: 55ms;   /* ritardo fra un elemento e il successivo in una fila */

  /* Curve */
  --mov-arriva: cubic-bezier(.2, 0, 0, 1);       /* parte deciso e si posa: per cio' che entra */
  --mov-parte: cubic-bezier(.4, 0, 1, 1);        /* accelera e sparisce: per cio' che esce */
  --mov-molla: cubic-bezier(.34, 1.56, .64, 1);  /* un piccolo rimbalzo: SOLO per le conferme */

  /* Distanze */
  --mov-salita: 14px;    /* quanto sale una scheda entrando */
}

/* ── 1. RISPOSTA AL TOCCO ─────────────────────────────────────────────────
   Su tasti e righe toccabili: il tasto «cede» appena lo si preme. */
.mov-tocco {
  transition: transform var(--mov-tocco) var(--mov-arriva),
              box-shadow var(--mov-svelto) var(--mov-arriva),
              background-color var(--mov-svelto) linear;
  -webkit-tap-highlight-color: transparent;
}
.mov-tocco:active { transform: scale(.97); }

/* ── 2. ENTRATA ───────────────────────────────────────────────────────────
   `.mov-entra` su un elemento: compare salendo di poco.
   `.mov-fila` sul contenitore: i figli entrano uno dopo l'altro (fino a 10,
   poi tutti insieme: una fila lunga non deve far aspettare). */
@keyframes mov-sali {
  from { opacity: 0; transform: translateY(var(--mov-salita)); }
  to   { opacity: 1; transform: none; }
}
@keyframes mov-compari {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mov-entra,
.mov-fila > * {
  animation: mov-sali var(--mov-normale) var(--mov-arriva) both;
}
.mov-compare { animation: mov-compari var(--mov-normale) linear both; }
.mov-fila > :nth-child(2)  { animation-delay: calc(var(--mov-scalino) * 1); }
.mov-fila > :nth-child(3)  { animation-delay: calc(var(--mov-scalino) * 2); }
.mov-fila > :nth-child(4)  { animation-delay: calc(var(--mov-scalino) * 3); }
.mov-fila > :nth-child(5)  { animation-delay: calc(var(--mov-scalino) * 4); }
.mov-fila > :nth-child(6)  { animation-delay: calc(var(--mov-scalino) * 5); }
.mov-fila > :nth-child(7)  { animation-delay: calc(var(--mov-scalino) * 6); }
.mov-fila > :nth-child(8)  { animation-delay: calc(var(--mov-scalino) * 7); }
.mov-fila > :nth-child(9)  { animation-delay: calc(var(--mov-scalino) * 8); }
.mov-fila > :nth-child(n+10) { animation-delay: calc(var(--mov-scalino) * 9); }

/* ── 3. CARICAMENTO ───────────────────────────────────────────────────────
   `.mov-scheletro` su un blocco vuoto della forma di cio' che sta arrivando
   (una riga, una scheda): una luce che scorre al posto della rotellina. */
@keyframes mov-luce {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.mov-scheletro {
  color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(100deg,
              color-mix(in srgb, var(--ink) 6%, transparent) 30%, color-mix(in srgb, var(--ink) 13%, transparent) 50%,
              color-mix(in srgb, var(--ink) 6%, transparent) 70%);
  background-size: 200% 100%;
  animation: mov-luce 1.4s linear infinite;
}

/* ── 4. CONFERMA ──────────────────────────────────────────────────────────
   `.mov-fatto` su un cartello o una pastiglia che dice «fatto»: un piccolo
   rimbalzo, una volta sola.
   `.mov-spunta` su un <svg> con un <path pathLength="1">: la spunta si
   disegna. */
@keyframes mov-posa {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes mov-disegna {
  to { stroke-dashoffset: 0; }
}
.mov-fatto { animation: mov-posa var(--mov-ampio) var(--mov-molla) both; }
.mov-spunta path,
.mov-spunta circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mov-disegna var(--mov-ampio) var(--mov-arriva) var(--mov-svelto) forwards;
}

/* ── 5. ERRORE ────────────────────────────────────────────────────────────
   `.mov-no` su un campo o un avviso rifiutato: due scossette, una volta.
   L'errore deve comunque essere SCRITTO: il movimento lo accompagna soltanto. */
@keyframes mov-scuoti {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.mov-no { animation: mov-scuoti var(--mov-ampio) linear 1; }

/* ── 6. TENDINE ───────────────────────────────────────────────────────────
   `<details class="mov-tendina">`: si apre e si chiude scorrendo. Dove il
   browser non lo sa fare si apre di colpo, come oggi. */
@supports (interpolate-size: allow-keywords) {
  .mov-tendina { interpolate-size: allow-keywords; }
  .mov-tendina::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size var(--mov-normale) var(--mov-arriva),
                opacity var(--mov-normale) linear,
                content-visibility var(--mov-normale) allow-discrete;
  }
  .mov-tendina[open]::details-content { block-size: auto; opacity: 1; }
}

/* ── 7. BARRE CHE AVANZANO ────────────────────────────────────────────────
   `.mov-avanza` su una barra di avanzamento: la larghezza (o la scala)
   cambia scorrendo invece di saltare. */
.mov-avanza {
  transition: transform var(--mov-ampio) var(--mov-arriva),
              background-color var(--mov-normale) linear;
  transform-origin: left center;
}

/* ── 8. COMPARSA SCORRENDO LA PAGINA (solo pagine ospiti e siti) ──────────
   `.mov-vista`: l'elemento compare quando entra nello schermo. Dove il
   browser non lo sa fare l'elemento e' semplicemente visibile. */
@supports (animation-timeline: view()) {
  .mov-vista {
    animation: mov-sali linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 60%;
  }
}

/* ── 9. FINESTRE, FOGLI E VELO ────────────────────────────────────────────
   Per cio' che si apre SOPRA la pagina. Si mette la classe quando si apre;
   per chiudere si aggiunge `.mov-esce`, si aspetta la fine dell'animazione
   (`animationend`) e solo allora si toglie l'elemento.
     `.mov-velo`      il fondo che si scurisce dietro
     `.mov-finestra`  il popup al centro (computer): cresce di poco e compare
     `.mov-foglio`    il foglio che sale dal basso (telefono, modo popup)
     `.mov-lato`      la schermata intera che entra da destra (telefono) */
@keyframes mov-apri    { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes mov-chiudi  { to   { opacity: 0; transform: scale(.97) translateY(6px); } }
@keyframes mov-sale    { from { transform: translateY(100%); } }
@keyframes mov-scende  { to   { transform: translateY(100%); } }
@keyframes mov-da-lato { from { transform: translateX(100%); } }
@keyframes mov-a-lato  { to   { transform: translateX(100%); } }
@keyframes mov-svanisci { to  { opacity: 0; } }
.mov-velo     { animation: mov-compari var(--mov-normale) linear both; }
.mov-finestra { animation: mov-apri var(--mov-normale) var(--mov-arriva) both; }
.mov-foglio   { animation: mov-sale var(--mov-ampio) var(--mov-arriva) both; }
.mov-lato     { animation: mov-da-lato var(--mov-normale) var(--mov-arriva) both; }
.mov-velo.mov-esce     { animation: mov-svanisci var(--mov-svelto) linear both; }
.mov-finestra.mov-esce { animation: mov-chiudi var(--mov-svelto) var(--mov-parte) both; }
.mov-foglio.mov-esce   { animation: mov-scende var(--mov-normale) var(--mov-parte) both; }
.mov-lato.mov-esce     { animation: mov-a-lato var(--mov-svelto) var(--mov-parte) both; }

/* ── 10. RIDUCI MOVIMENTO ─────────────────────────────────────────────────
   Chi l'ha chiesto nelle impostazioni del telefono o del computer vede
   tutto subito, fermo. Vale anche con `.mov-spento` sul <html> (serve ai
   mockup per confrontare «com'e' oggi» e «come sarebbe»). */
@media (prefers-reduced-motion: reduce) {
  .mov-tocco, .mov-entra, .mov-fila > *, .mov-compare, .mov-fatto, .mov-no,
  .mov-avanza, .mov-vista, .mov-spunta path, .mov-spunta circle,
  .mov-velo, .mov-finestra, .mov-foglio, .mov-lato {
    animation: none !important;
    transition: none !important;
  }
  .mov-spunta path, .mov-spunta circle { stroke-dashoffset: 0; }
  .mov-scheletro { animation: none; }
  .mov-tendina::details-content { transition: none; }
}
.mov-spento .mov-tocco, .mov-spento .mov-entra, .mov-spento .mov-fila > *,
.mov-spento .mov-compare, .mov-spento .mov-fatto, .mov-spento .mov-no,
.mov-spento .mov-avanza, .mov-spento .mov-vista,
.mov-spento .mov-velo, .mov-spento .mov-finestra, .mov-spento .mov-foglio, .mov-spento .mov-lato,
.mov-spento .mov-spunta path, .mov-spento .mov-spunta circle {
  animation: none !important;
  transition: none !important;
}
.mov-spento .mov-spunta path, .mov-spento .mov-spunta circle { stroke-dashoffset: 0; }
.mov-spento .mov-scheletro { animation: none; }
.mov-spento .mov-tendina::details-content { transition: none; }