/* OWNER: Charlie, desk lane (inventory, waitlist, messages, marketing, settings, install). Tokens only:
   transform, opacity, background-color. Never width, height, top, left, right, bottom, margin or padding.
   Rows rise in a calm stagger the moment a screen mounts (data-mo-enter clears itself after 700ms, so a save
   never replays this). The waitlist highlight wash is added and removed by js/motion-desk.js, since only script
   can tell a row that just turned "offered" apart from one that already was, given every render is a fresh DOM
   node. Settings and install are single panels, not lists, so they get one reveal instead of a stagger. */

[data-mo-enter="inventory"] .inv-row,
[data-mo-enter="waitlist"] .wl-row,
[data-mo-enter="messages"] .msg-row,
[data-mo-enter="marketing"] .mk-card {
  animation-name: mo-desk-rise;
  animation-duration: var(--mo-base);
  animation-timing-function: var(--mo-ease-out);
  animation-fill-mode: both;
}

[data-mo-enter="settings"] .set-scroll,
[data-mo-enter="install"] .install {
  animation: mo-desk-rise var(--mo-slow) var(--mo-ease-out) both;
}

[data-mo-enter="messages"] .msg-row:nth-of-type(odd) { animation-name: mo-desk-settle; }
[data-mo-enter="messages"] .msg-row:nth-of-type(even) { animation-name: mo-desk-settle-alt; }

[data-mo-enter="inventory"] .inv-row:nth-child(1), [data-mo-enter="waitlist"] .wl-row:nth-child(1), [data-mo-enter="messages"] .msg-row:nth-of-type(1), [data-mo-enter="marketing"] .mk-card:nth-child(1) { animation-delay: calc(var(--mo-stagger) * 0); }
[data-mo-enter="inventory"] .inv-row:nth-child(2), [data-mo-enter="waitlist"] .wl-row:nth-child(2), [data-mo-enter="messages"] .msg-row:nth-of-type(2), [data-mo-enter="marketing"] .mk-card:nth-child(2) { animation-delay: calc(var(--mo-stagger) * 1); }
[data-mo-enter="inventory"] .inv-row:nth-child(3), [data-mo-enter="waitlist"] .wl-row:nth-child(3), [data-mo-enter="messages"] .msg-row:nth-of-type(3), [data-mo-enter="marketing"] .mk-card:nth-child(3) { animation-delay: calc(var(--mo-stagger) * 2); }
[data-mo-enter="inventory"] .inv-row:nth-child(4), [data-mo-enter="waitlist"] .wl-row:nth-child(4), [data-mo-enter="messages"] .msg-row:nth-of-type(4), [data-mo-enter="marketing"] .mk-card:nth-child(4) { animation-delay: calc(var(--mo-stagger) * 3); }
[data-mo-enter="inventory"] .inv-row:nth-child(5), [data-mo-enter="waitlist"] .wl-row:nth-child(5), [data-mo-enter="messages"] .msg-row:nth-of-type(5), [data-mo-enter="marketing"] .mk-card:nth-child(5) { animation-delay: calc(var(--mo-stagger) * 4); }
[data-mo-enter="inventory"] .inv-row:nth-child(6), [data-mo-enter="waitlist"] .wl-row:nth-child(6), [data-mo-enter="messages"] .msg-row:nth-of-type(6), [data-mo-enter="marketing"] .mk-card:nth-child(6) { animation-delay: calc(var(--mo-stagger) * 5); }
[data-mo-enter="inventory"] .inv-row:nth-child(7), [data-mo-enter="waitlist"] .wl-row:nth-child(7), [data-mo-enter="messages"] .msg-row:nth-of-type(7), [data-mo-enter="marketing"] .mk-card:nth-child(7) { animation-delay: calc(var(--mo-stagger) * 6); }
[data-mo-enter="inventory"] .inv-row:nth-child(n+8), [data-mo-enter="waitlist"] .wl-row:nth-child(n+8), [data-mo-enter="messages"] .msg-row:nth-of-type(n+8), [data-mo-enter="marketing"] .mk-card:nth-child(n+8) { animation-delay: calc(var(--mo-stagger) * 7); }

.wl-row.mo-desk-flash {
  animation: mo-desk-wash var(--mo-slow) var(--mo-ease) 1 both;
}

/* A low stock number gets one small nudge of its own, timed just after the row settles, so it earns a second
   look without shouting. Scoped under data-mo-enter like everything else here, so it plays once per visit and
   never replays when a DB write re-renders the row mid session. */
[data-mo-enter="inventory"] .inv-row:has(.chip-warn) .inv-num {
  animation: mo-desk-nudge var(--mo-base) var(--mo-spring) calc(var(--mo-base) + var(--mo-stagger) * 3) both;
}

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

@keyframes mo-desk-settle {
  from { opacity: 0; transform: translateY(var(--mo-rise)) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes mo-desk-settle-alt {
  from { opacity: 0; transform: translateY(var(--mo-rise)) rotate(1deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes mo-desk-wash {
  from { background-color: color-mix(in srgb, var(--accent) 16%, transparent); }
  to { background-color: transparent; }
}

@keyframes mo-desk-nudge {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}