/* OWNER: Charlie (people lane: clients, staff screens only). Loads after css/motion.css.
   Uses only --mo-* tokens (css/motion-tokens.css) and only the cl- / st- prefixes that belong
   to these two screens, or [data-mo-enter]. Transform and opacity only. The global reduced
   motion kill switch in motion-tokens.css already covers every rule below; no local copy needed.

   Moment 1: directory rows rise in a calm stagger, first 8 only, scoped to [data-mo-enter] so it
   plays once on route entry and never replays when the screen redraws itself after a save.
   Moment 2: the chosen person's detail panel settles in. clients.js and staff.js rebuild their
   whole screen (root.innerHTML) on every state change, not only on selection, so a plain CSS
   entrance on .cl-profile/.st-panel would replay on every keystroke and every save. Instead this
   only animates when js/motion-people.js has marked the panel [data-mo-fresh], which it does only
   when the selected row's id actually changed. See js/motion-people.js for that logic.
   Moment 3 (row press) needs no rule here: .cl-person and .st-person already carry .btn, and
   css/motion.css already gives every .btn a 60ms :active scale. A second one would only fight it. */

[data-mo-enter="clients"] .cl-list > li,
[data-mo-enter="staff"] .st-list > li {
  animation: mo-people-rise var(--mo-base) var(--mo-ease-out) backwards;
}
[data-mo-enter="clients"] .cl-list > li:nth-child(1), [data-mo-enter="staff"] .st-list > li:nth-child(1) { animation-delay: 0ms; }
[data-mo-enter="clients"] .cl-list > li:nth-child(2), [data-mo-enter="staff"] .st-list > li:nth-child(2) { animation-delay: calc(var(--mo-stagger) * 1); }
[data-mo-enter="clients"] .cl-list > li:nth-child(3), [data-mo-enter="staff"] .st-list > li:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="clients"] .cl-list > li:nth-child(4), [data-mo-enter="staff"] .st-list > li:nth-child(4) { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="clients"] .cl-list > li:nth-child(5), [data-mo-enter="staff"] .st-list > li:nth-child(5) { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="clients"] .cl-list > li:nth-child(6), [data-mo-enter="staff"] .st-list > li:nth-child(6) { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="clients"] .cl-list > li:nth-child(7), [data-mo-enter="staff"] .st-list > li:nth-child(7) { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="clients"] .cl-list > li:nth-child(8), [data-mo-enter="staff"] .st-list > li:nth-child(8) { animation-delay: calc(var(--mo-stagger) * 7); }
[data-mo-enter="clients"] .cl-list > li:nth-child(n+9),
[data-mo-enter="staff"] .st-list > li:nth-child(n+9) {
  animation: none;
}

@keyframes mo-people-rise {
  from { opacity: 0; transform: translateY(var(--mo-rise)); }
  to { opacity: 1; transform: translateY(0); }
}

.cl-profile[data-mo-fresh], .st-panel[data-mo-fresh] {
  animation: mo-people-settle var(--mo-base) var(--mo-ease-out);
}

@keyframes mo-people-settle {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}