/* FMA Atelier — mouvement de la console (lot 26, CONSOLE §21).
   Principes : le mouvement guide l'œil vers ce qui arrive ou change, ne retarde jamais une lecture,
   n'anime que transform et opacity (composées par le GPU), et s'éteint entièrement si le système
   demande moins de mouvement. Les états finaux restent ceux des frames (échelle 1:1). */

:root {
  --dur-instant: 80ms;
  --dur-enter: 260ms;
  --dur-exit: 160ms;
  --dur-count: 700ms;
  --stagger: 35ms;
  --dist-sm: 4px;
  --dist-md: 10px;
  --ease-enter: cubic-bezier(.16, 1, .3, 1);
  --ease-exit: cubic-bezier(.4, 0, 1, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@keyframes at-rise { from { opacity: 0; transform: translateY(var(--dist-md)); } to { opacity: 1; transform: none; } }
@keyframes at-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes at-pop { from { opacity: 0; transform: translateY(var(--dist-sm)) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes at-pop-out { to { opacity: 0; transform: translateY(var(--dist-sm)) scale(.98); } }
@keyframes at-slide-in { from { opacity: 0; transform: translateX(var(--dist-md)); } to { opacity: 1; transform: none; } }
@keyframes at-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* 1. Page : l'en-tête puis les blocs de premier niveau montent l'un après l'autre (12 au plus). */
.at-page > div > section[data-page-id] > *,
.at-page > div > div:first-child { animation: at-rise var(--dur-enter) var(--ease-enter) both; }
.at-page > div > section[data-page-id] > :nth-child(1) { animation-delay: calc(var(--stagger) * 1); }
.at-page > div > section[data-page-id] > :nth-child(2) { animation-delay: calc(var(--stagger) * 2); }
.at-page > div > section[data-page-id] > :nth-child(3) { animation-delay: calc(var(--stagger) * 3); }
.at-page > div > section[data-page-id] > :nth-child(4) { animation-delay: calc(var(--stagger) * 4); }
.at-page > div > section[data-page-id] > :nth-child(5) { animation-delay: calc(var(--stagger) * 5); }
.at-page > div > section[data-page-id] > :nth-child(n+6) { animation-delay: calc(var(--stagger) * 6); }

/* 2. Tuiles, cartes et emplacements : apparition échelonnée dans leur rangée. */
.fma-stat, .fma-unit, .at-res, .fma-slot { animation: at-pop var(--dur-enter) var(--ease-enter) both; }
:is(.fma-stat, .fma-unit, .at-res, .fma-slot):nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
:is(.fma-stat, .fma-unit, .at-res, .fma-slot):nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
:is(.fma-stat, .fma-unit, .at-res, .fma-slot):nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
:is(.fma-stat, .fma-unit, .at-res, .fma-slot):nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
:is(.fma-stat, .fma-unit, .at-res, .fma-slot):nth-child(n+6) { animation-delay: calc(var(--stagger) * 5); }

/* 3. Lignes de tableau : fondu court à l'arrivée, survol et sélection en douceur. */
.at-table tbody tr { animation: at-fade var(--dur-enter) var(--ease-enter) both; }
.at-table td { transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }

/* 4. Contrôles : retour immédiat au survol et à l'appui. */
.fma-btn { transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
  color var(--dur-fast), transform var(--dur-instant) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.fma-btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.fma-side a { transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); }
.fma-side a[aria-current=page]::before { animation: at-grow-y var(--dur-enter) var(--ease-enter) both; transform-origin: 50% 50%; }
@keyframes at-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.fma-panel, .fma-unit, .at-res { transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
  transform var(--dur-base) var(--ease-out); }
a.fma-unit:hover, button.fma-unit:hover, .fma-unit[data-href]:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* 5. Onglets : le trait de l'onglet actif se déploie. */
.fma-tabs button { transition: color var(--dur-fast) var(--ease-out); }
.fma-tabs button[aria-selected=true]::after { animation: at-grow-x var(--dur-enter) var(--ease-enter) both; transform-origin: 50% 50%; }

/* 6. Jauges et barres : elles se remplissent depuis la gauche. */
.at-progress span, .at-gm-fill, .at-tr-meter span { transform-origin: 0 50%; animation: at-grow-x var(--dur-slow) var(--ease-enter) both; animation-delay: 120ms; }

/* 7. Fenêtres : ouverture et fermeture (ui.modal attend la fin de at-pop-out). */
dialog.at-modal[open] { animation: at-pop var(--dur-enter) var(--ease-enter) both; }
dialog.at-modal[open]::backdrop { animation: at-fade var(--dur-enter) var(--ease-out) both; }
dialog.at-modal[data-closing] { animation: at-pop-out var(--dur-exit) var(--ease-exit) both; }

/* 8. Cartes d'intention et de résultat : elles glissent depuis la droite ; un résultat appliqué rebondit légèrement. */
.at-confirm, .state-card { animation: at-slide-in var(--dur-enter) var(--ease-enter) both; }
.state-card[data-write-state=applied] { animation: at-pop var(--dur-enter) var(--ease-spring) both; }

/* 9. Compteurs : la valeur s'anime (ui.statTile) ; le chiffre garde sa largeur pour ne pas sautiller. */
.fma-stat-val { font-variant-numeric: tabular-nums; }

/* 10. Cercle d'alchimie de la barre latérale : rotation lente, presque imperceptible. */
.fma-side .fma-circle .fma-circle-rot { transform-box: view-box; transform-origin: 50% 50%; animation: fma-spin 120s linear infinite; }

/* Accessibilité : plus aucun mouvement si le système le demande. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}