/* ==========================================================================
   Gesthes — movimento. Poco e solo dove serve: la pagina entra in un unico gesto
   breve, i numeri della dashboard contano fino al valore, i grafici crescono.
   Pulsanti e menu rispondono al clic. Tutto si spegne con «riduci movimento».
   ========================================================================== */

@keyframes viewIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes barGrow {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes donutIn {
  from {
    opacity: 0;
    transform: rotate(-20deg) scale(.9);
  }
  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;
  }
}

/* la pagina entra tutta insieme */
#view.view-anim {
  animation: viewIn var(--t-view) var(--ease-out) both;
}
.rise-in {
  animation: riseIn var(--t-rise) var(--ease-out) both;
}

/* scheletro di caricamento */
.skeleton-view {
  animation: fadeIn .2s ease .12s 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: 32px;
  width: 260px;
  margin-bottom: 24px;
}
.sk-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.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;
}

/* livelli che compaiono su richiesta */
.notif-panel {
  animation: popIn .2s var(--ease-out) both;
}

/* risposta al clic */
.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: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);
}

@media (prefers-reduced-motion: reduce) {
  #view.view-anim,
  .rise-in,
  .skeleton-view,
  .sk,
  .notif-panel,
  .modal,
  .modal-backdrop,
  .toast {
    animation: none !important;
  }
  .btn:active,
  .tbtn:active,
  .iconbtn:active,
  .nav-item:active,
  a.kpi:hover .kpi-go {
    transform: none !important;
  }
  .sidebar,
  .side-toggle svg {
    transition: none;
  }
}