/* ══════════════════════════════════════════════════════════════════════
   chart-motion.css — solo per i chart panels
   Reveal del contenuto del grafico (SVG) quando entra in view o quando
   il chart viene re-renderizzato a seguito di un'interazione utente.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-fast: 200ms;
  --motion-med:  340ms;
  --motion-slow: 800ms;
}

/* ──────────────────────────────────────────────────────────────────
   Micro-interactions (project-wide)
   Soft, "unhurried" hover/focus/press states using the motion-stack
   ease + short durations. Applied to common DSI/Italia patterns
   that appear across every page (header nav, buttons, accordions,
   cards, links). Keeps animations consistent and subtle.
   ────────────────────────────────────────────────────────────────── */

/* --- Header nav links --- */
.it-header-nav .it-nav-link {
  transition:
    color var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease) !important;
}

/* --- Slim header brand link --- */
.slim-header a.slim-entity {
  transition: opacity var(--motion-fast) var(--motion-ease) !important;
}

/* --- Chart selector buttons (paesi / indicatore / anno) --- */
.chart-selector-btn {
  transition:
    background-color var(--motion-fast) var(--motion-ease),
    border-color    var(--motion-fast) var(--motion-ease),
    color           var(--motion-fast) var(--motion-ease),
    transform       var(--motion-fast) var(--motion-ease) !important;
}
.chart-selector-btn:active { transform: translateY(1px); }

/* --- Native <select> wrapper --- */
.it-select {
  transition:
    border-color var(--motion-fast) var(--motion-ease),
    color        var(--motion-fast) var(--motion-ease),
    box-shadow   var(--motion-fast) var(--motion-ease) !important;
}

/* --- KPI cards: lift on hover SOLO se cliccabili (a.kpi-card o .kpi-card.is-clickable) --- */
a.kpi-card,
.kpi-card.is-clickable {
  transition:
    transform   var(--motion-med) var(--motion-ease),
    box-shadow  var(--motion-med) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
  cursor: pointer;
}
a.kpi-card:hover,
.kpi-card.is-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
}

/* --- Glossary cells: gentle hover tint --- */
.glossary-cell {
  transition: background-color var(--motion-fast) var(--motion-ease);
}
.glossary-cell:hover {
  background-color: color-mix(in srgb, var(--it-color-teal-32) 4%, transparent);
}

/* --- Attachment / related cards --- */
.it-card-attachments-link,
.it-card-related-link {
  transition:
    transform    var(--motion-med) var(--motion-ease),
    background   var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    color        var(--motion-fast) var(--motion-ease) !important;
}
.it-card-attachments-link:hover {
  transform: translateY(-1px);
}
.it-card-related-link:hover { transform: translateX(2px); }

.it-card-attachments-arrow,
.it-card-related-arrow {
  transition: transform var(--motion-med) var(--motion-ease) !important;
}

/* --- Accordion: softer collapse + button hover --- */
.it-accordion-collapse {
  transition: grid-template-rows var(--motion-med) var(--motion-ease) !important;
}
.it-accordion-button {
  transition: color var(--motion-fast) var(--motion-ease) !important;
}
.it-accordion-button::after {
  transition: transform var(--motion-med) var(--motion-ease) !important;
}

/* --- Inline body links --- */
.it-accordion-body a,
.brand-footer .footer-source a {
  transition:
    color var(--motion-fast) var(--motion-ease),
    text-decoration-color var(--motion-fast) var(--motion-ease) !important;
}

/* --- Chart re-render: cross-fade the host on data change --- */
.chart-host { position: relative; }
.chart-host > svg.dsi-chart--fading-out {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: opacity 220ms var(--motion-ease);
}

/* Stato iniziale: il container del grafico (chart-host) parte invisibile.
   Quando .is-animating viene aggiunto, gli elementi rivelano dentro l'SVG.
   Il container in sé resta a opacity 1 — animiamo solo path/rect/circle. */
.chart-host .dsi-chart .line,
.chart-host .dsi-chart .bar,
.chart-host .dsi-chart .point,
.chart-host .dsi-chart text.bar-pct-label,
.chart-host .dsi-chart text.point-label,
.chart-host .dsi-chart .axis-tick-text,
.chart-host .dsi-chart .axis-tick-line,
.chart-host .dsi-chart .axis-zero-line {
  /* default: nessuna animazione. La applichiamo via JS quando serve. */
}

/* Le animazioni vengono gestite inline via JS in motion.js per
   adattarsi alla forma effettiva degli elementi (lunghezza path, etc.). */

@media (prefers-reduced-motion: reduce) {
  .chart-host * {
    transition: none !important;
    animation: none !important;
  }
}