/* Transizioni UI (150–180ms). Nessuna su resize griglia (passo C).
 * prefers-reduced-motion → zero motion.
 */

/* Tema: superfici che cambiano colore */
html {
  transition: var(--motion-surface);
}

body,
#topbar,
.grid-cell,
.panel,
.chart-toolbar,
.of-host {
  transition: var(--motion-surface);
}

/* Hover/focus controlli — solo proprietà di colore, non layout */
button,
.topbar-btn,
.chart-draw-btn,
.wl-add,
.wl-rm,
select,
input,
textarea,
.chart-engine-select,
.topbar-label select {
  transition: var(--motion-control);
}

/* Entrata pannello (opacity breve; niente width/height) */
.grid-cell {
  animation: nacs-panel-enter var(--motion-base) var(--motion-ease);
}

@keyframes nacs-panel-enter {
  from { opacity: 0.65; }
  to { opacity: 1; }
}

/* Resize: MAI transizione su tracce o maniglie che rincorrono il puntatore */
#grid {
  transition: none;
}

.grid-cell {
  /* opacity sì; dimensioni no */
  transition:
    background-color var(--motion-base) var(--motion-ease),
    color var(--motion-base) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-base) var(--motion-ease),
    opacity var(--motion-base) var(--motion-ease);
}

.grid-handle {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  html,
  body,
  #topbar,
  #grid,
  .grid-cell,
  .panel,
  .chart-toolbar,
  .of-host,
  button,
  .topbar-btn,
  .chart-draw-btn,
  .wl-add,
  .wl-rm,
  select,
  input,
  textarea,
  .chart-engine-select,
  .topbar-label select,
  .grid-handle {
    transition: none !important;
    animation: none !important;
  }
}