/*
  MASAR 360 — Design System v2 — Motion layer
  Transform + opacity only. Reduced-motion is handled by zeroing the
  duration tokens in tokens.css (prefers-reduced-motion: reduce), so
  every rule here automatically collapses to instant with no separate
  overrides needed.
*/
.ds-enter{
  opacity:0; transform:translateY(var(--motion-enter-y));
  animation:ds-enter-kf var(--duration-enter) var(--ease-emphasis) forwards;
}
@keyframes ds-enter-kf{ to{ opacity:1; transform:none; } }

/* Apply to a container; each direct child with [data-enter-index] gets a
   staggered delay = index * --stagger-step, set inline by JS (motion.js). */
.ds-enter-stagger > *{
  opacity:0; transform:translateY(var(--motion-enter-y));
  animation:ds-enter-kf var(--duration-enter) var(--ease-emphasis) forwards;
  animation-delay:calc(var(--enter-i, 0) * var(--stagger-step));
}

/* Chart reveal transitions — the mark is drawn to its final value via a
   CSS transition after JS sets the zero-state then the real state.
   §10 perf fix: bar/stacked-segment reveal is transform:scaleX only
   (compositor-only, no layout/paint per frame) — width itself is set
   once, immediately, to its real final value and never animated. */
.ds-chart-mark{ transition:stroke-dasharray var(--duration-emphasis) var(--ease-emphasis); }
.ds-bar-fill,.ds-stacked-segment{ transition:transform var(--duration-emphasis) var(--ease-emphasis); will-change:transform; }

.ds-kpi-value.is-counting{ font-variant-numeric:tabular-nums; }

/* Panel/section emphasis entrance (urgent alert panel, etc.) — one-shot, never repeats */
.ds-emphasis-in{ animation:ds-emphasis-kf var(--duration-emphasis) var(--ease-emphasis); }
@keyframes ds-emphasis-kf{ from{ opacity:0; transform:translateY(6px) scale(.99); } to{ opacity:1; transform:none; } }