/* Movimento — il sistema di animazioni del mockup Claude Design
   ("GESTECH Gestionale.html"). Le @keyframes sono quelle del mockup, con gli
   stessi nomi, perché il mockup resta la sorgente di verità anche per il
   movimento (come tokens.css lo è per i colori).

   Chi le accende:
   - `#view.view-anim`  → router.js, a ogni cambio pagina (viewIn);
   - `.rise-in`         → enterView() in ui.js, che scagliona i ritardi in JS
                          perché ogni vista ha una struttura diversa;
   - `.skeleton-view`   → router.js mentre l'API risponde;
   - grafici            → charts.js (barGrow/donutIn) sui singoli elementi SVG.

   Tutto si spegne in fondo al file con prefers-reduced-motion. */

/* ---- Keyframes (identiche al mockup) ---- */
@keyframes viewIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastIn  { from { opacity: 0; transform: translateX(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes barGrow  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes donutIn  { from { opacity: 0; transform: rotate(-28deg) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes growWidth { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shimmer  { from { background-position: -420px 0; } to { background-position: 420px 0; } }

/* ---- Entrata della vista ----
   La classe viene tolta e rimessa a ogni navigazione (router.js), altrimenti
   il browser non fa ripartire un'animazione già conclusa. */
#view.view-anim { animation: viewIn var(--t-view) var(--ease-out) both; }

/* Blocchi (card, KPI, intestazione) che salgono uno dopo l'altro dentro la
   vista appena entrata: il ritardo lo assegna enterView() inline. */
.rise-in { animation: riseIn var(--t-rise) var(--ease-out) both; }

/* Righe di tabella in dissolvenza: vale anche ai cambi pagina del dataTable,
   che ridisegna il solo <tbody>. */
.view-anim table.data tbody tr,
.view-anim table.matrix tbody tr { animation: fadeIn 280ms ease both; }
.view-anim table.data tbody tr:nth-child(1),
.view-anim table.matrix tbody tr:nth-child(1) { animation-delay: 0ms; }
.view-anim table.data tbody tr:nth-child(2),
.view-anim table.matrix tbody tr:nth-child(2) { animation-delay: 20ms; }
.view-anim table.data tbody tr:nth-child(3),
.view-anim table.matrix tbody tr:nth-child(3) { animation-delay: 40ms; }
.view-anim table.data tbody tr:nth-child(4),
.view-anim table.matrix tbody tr:nth-child(4) { animation-delay: 60ms; }
.view-anim table.data tbody tr:nth-child(5),
.view-anim table.matrix tbody tr:nth-child(5) { animation-delay: 80ms; }
.view-anim table.data tbody tr:nth-child(6),
.view-anim table.matrix tbody tr:nth-child(6) { animation-delay: 100ms; }
.view-anim table.data tbody tr:nth-child(7),
.view-anim table.matrix tbody tr:nth-child(7) { animation-delay: 120ms; }
.view-anim table.data tbody tr:nth-child(n+8),
.view-anim table.matrix tbody tr:nth-child(n+8) { animation-delay: 140ms; }

/* ---- Scheletro di caricamento ----
   Il ritardo di 130ms sulla dissolvenza è deliberato: una risposta rapida
   (liste già in cache, filtri locali) non fa lampeggiare lo scheletro, perché
   `both` tiene l'opacità a 0 per tutta la durata dell'attesa. */
.skeleton-view { animation: fadeIn 250ms ease 130ms both; }

.sk {
  border-radius: var(--radius);
  background-color: var(--surface2);
  background-image: linear-gradient(90deg, transparent, var(--surface), transparent);
  background-repeat: no-repeat;
  background-size: 420px 100%;
  animation: shimmer 1.15s linear infinite;
}
.sk-card {
  background-color: var(--surface);
  background-image: linear-gradient(90deg, transparent, var(--surface2), transparent);
  border: 1px solid var(--border);
}
.sk-title { height: 30px; width: 220px; margin-bottom: 22px; }
.sk-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.sk-kpi { height: 112px; }
.sk-kpi:nth-child(2) { animation-delay: .1s; }
.sk-kpi:nth-child(3) { animation-delay: .2s; }
.sk-kpi:nth-child(4) { animation-delay: .3s; }
.sk-block { height: 320px; animation-delay: .15s; }

/* ---- Pannelli che compaiono ---- */
.notif-panel { animation: popIn 220ms var(--ease-out) both; }

/* ---- Sollevamento al passaggio del mouse ----
   Il mockup alza di 2-3px le tessere cliccabili; le card lunghe (tabelle,
   schede) restano ferme e cambiano solo il bordo, altrimenti il movimento
   diventa rumore. */
.kpi, .kanban-card {
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.kpi:hover, .kanban-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }

.card { transition: border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease); }

.btn, .tbtn, .iconbtn {
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease);
}
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -14px var(--accent); }
.btn:not(:disabled):active, .tbtn:active, .iconbtn:active { transform: translateY(1px) scale(.985); }

.nav-item { transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
                        transform var(--t-fast) var(--ease-out); }
.nav-item:active { transform: scale(.985); }

/* Le competenze/tag della scheda dipendente: micro-reazione del mockup */
.tag { transition: transform 180ms var(--ease-out); }
.tag:hover { transform: translateY(-1px); }

/* ---- Chi ha chiesto meno animazioni al sistema operativo ----
   Restano lo spinner e lo shimmer (comunicano «sto lavorando»), spariscono
   gli spostamenti. */
@media (prefers-reduced-motion: reduce) {
  #view.view-anim,
  .rise-in,
  .skeleton-view,
  .notif-panel,
  .modal, .modal-backdrop, .toast,
  .view-anim table.data tbody tr,
  .view-anim table.matrix tbody tr { animation: none !important; }

  .kpi:hover, .kanban-card:hover, .btn.primary:hover,
  .btn:active, .tbtn:active, .iconbtn:active, .nav-item:active, .tag:hover { transform: none !important; }
}