/* ==========================================================================
   Movimento (js/motion.js): evidenziatori che scorrono, menu e finestre più
   morbidi, tema in dissolvenza, piccole risposte al passaggio e al tocco.
   Solo transform e opacità, colori pieni, 150–350 ms. Con «riduci movimento»
   resta tutto fermo (in fondo al file).
   ========================================================================== */
:root { --spring: cubic-bezier(0.34, 1.32, 0.64, 1); }

/* --- evidenziatore che scorre tra le schede (.seg, schede, menu laterale) --- */
.mt-sliding { isolation: isolate; }
.mt-ghost {
  position: absolute; z-index: -1; display: block; pointer-events: none;
  transform-origin: 0 0; will-change: transform;
}
.mt-ghosted { background-color: transparent !important; box-shadow: none !important; border-bottom-color: transparent !important; }
/* la voce che si accende cambia colore insieme allo sfondo che arriva */
.seg button, .cl-tabs button, .lg-tabs a, .gym-tabs a, .fn-tabs a, .rg-tabs a { transition: color 0.2s, background-color 0.15s, transform 0.18s var(--ease); }

/* --- tema: dissolvenza (View Transitions) o colori che passano --- */
html.vt-theme::view-transition-old(root) { animation: none; }
html.vt-theme::view-transition-new(root) { animation: mtFadeIn 0.32s ease-out both; }
html.vt-theme::view-transition-group(topbar),
html.vt-theme::view-transition-old(topbar),
html.vt-theme::view-transition-new(topbar) { animation-duration: 0.32s; }
@keyframes mtFadeIn { from { opacity: 0; } to { opacity: 1; } }
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, fill 0.3s ease, stroke 0.3s ease !important;
}

/* --- menu a comparsa: nascono dal pulsante (origine messa da ui.js), escono in dissolvenza --- */
.ui-menu {
  transform: translateY(-4px) scale(0.95);
  transition: opacity 0.14s ease-out, transform 0.26s var(--spring);
}
/* aperto verso l'alto (sopra il pulsante): scende da lì */
.ui-menu.up { transform: translateY(4px) scale(0.95); }
.ui-menu.in { opacity: 1; transform: none; }
.ui-menu.out { opacity: 0; transform: scale(0.97); pointer-events: none; transition: opacity 0.12s ease-in, transform 0.12s ease-in; }
.ui-menu.in button { animation: mtMenuItem 0.24s var(--ease) both; }
.ui-menu.in button:nth-of-type(2) { animation-delay: 15ms; }
.ui-menu.in button:nth-of-type(3) { animation-delay: 30ms; }
.ui-menu.in button:nth-of-type(4) { animation-delay: 45ms; }
.ui-menu.in button:nth-of-type(5) { animation-delay: 60ms; }
.ui-menu.in button:nth-of-type(n+6) { animation-delay: 75ms; }
@keyframes mtMenuItem { from { opacity: 0; transform: translateY(-3px); } }

/* --- finestre: si gonfiano con un filo di elasticità, su telefono salgono dal basso --- */
.nb-modal { transform: translateY(14px) scale(0.96); transition: transform 0.34s var(--spring); }
.nb-modal-back.in .nb-modal { transform: none; }
.nb-modal-back.out { pointer-events: none; }
.nb-modal-back.out .nb-modal { transform: translateY(6px) scale(0.98); transition: transform 0.16s ease-in; }
@media (max-width: 560px) {
  .nb-modal { transform: translateY(40px); transition-timing-function: var(--ease); transition-duration: 0.36s; }
}

/* --- toast: sale con un piccolo rimbalzo --- */
.toast { transform: translate(-50%, 18px) scale(0.94); }

/* --- schede e righe: si alzano appena al passaggio, si abbassano al tocco --- */
.unit-index a, .fc-tile { transition: background 0.15s, border-color 0.15s, transform 0.22s var(--ease); }
.unit-index a:active, .fc-tile:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .unit-index a:hover, .fc-tile:hover { transform: translateY(-2px); }
  .unit-index a span { transition: transform 0.25s var(--ease); }
  .unit-index a:hover span { transform: translateX(2px); }
}
.tool-row .go { display: inline-block; transition: color 0.15s, transform 0.25s var(--ease); }
.tool-row:hover .go { transform: translateX(3px); }
.tool-row:active { opacity: 0.7; transition: opacity 0.08s; }

/* --- lezioni: barra di lettura e sezioni --- */
.read-meter i { transition: width 0.18s linear; }
.reveal { transition: opacity 0.45s ease-out, transform 0.55s var(--ease); }
/* contenuto di <details> (ripasso, soluzioni): compare mentre si apre */
details[open] > :not(summary) { animation: mtDetails 0.32s var(--ease) both; }
@keyframes mtDetails { from { opacity: 0; transform: translateY(-4px); } }
.recap summary .recap-toggle { transition: opacity 0.2s; }

/* --- stati vuoti: la figura (se c'è) si gonfia piano --- */
:is(.fn-empty, .rbx-empty, .cal-empty, .at-empty, .nb-empty, .adm-empty, .tm-empty, .rg-empty, .or-empty, .gym-empty, .empty-subject) svg {
  animation: mtEmptyIc 0.5s var(--spring) 0.08s both;
}
@keyframes mtEmptyIc { from { opacity: 0; transform: scale(0.8); } }

/* --- caricamento: un riquadro piatto che pulsa (nessuna striscia sfumata) --- */
.mt-skel { border-radius: var(--r); background: var(--fill-2); animation: mtPulse 1.1s ease-in-out infinite alternate; }
@keyframes mtPulse { to { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .mt-ghost { display: none; }
  .ui-menu, .ui-menu.in, .ui-menu.out, .nb-modal, .nb-modal-back.out .nb-modal, .toast { transform: none !important; }
  .ui-menu.in button, details[open] > :not(summary), :is(.fn-empty, .rbx-empty, .cal-empty, .at-empty, .nb-empty, .adm-empty, .tm-empty, .rg-empty, .or-empty, .gym-empty, .empty-subject) svg { animation: none; }
  .unit-index a:hover, .fc-tile:hover, .tool-row:hover .go, .unit-index a:hover span { transform: none; }
  .mt-skel { animation: none; }
  html.vt-theme::view-transition-new(root) { animation: none; }
}