/* Home motion piece: proof (DESIGN 6.11.3). Tokens only; transform and opacity only.
   The plain rules are the designed end state; the start pose lives under [data-motion-state="armed"]
   and the keyframes under [data-motion-state="play"]. */

/* ============ A. One invoice: five bills deal in, fly across, fold flat into the Pace invoice ============
   Verbs: row DEALS in (x 12px, 240ms, 150ms apart) / total line DEALS / five slips CARRY across the fold /
   slips FOLD flat (scaleY) into the invoice / total TICKS in / saving line TICKS in / signal rule WIPES.
   Plain CSS = end state: Pace invoice hero, five-tool ledger fully readable, slips hidden. */
.receipt-one { position: relative; }
.receipt-one .saving { position: relative; padding-bottom: var(--pace-space-12); }
.receipt-one .saving::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 2px;
  background: var(--pace-signal); transform-origin: left center;
}
.slips { display: none; position: absolute; left: var(--pace-space-32); right: var(--pace-space-32); top: 38%; height: 0; pointer-events: none; z-index: 2; }
.slip {
  position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; gap: var(--pace-space-16);
  padding: var(--pace-space-8) var(--pace-space-12); font-size: var(--pace-text-sm); line-height: 1.3; color: var(--pace-ink);
  background: var(--pace-raised); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container);
  box-shadow: var(--pace-callout-shadow); --pile: calc(var(--i) * 7px); --fx: -140%; --fy: 0px;
}
.slip > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 760px) {
  .slips { left: var(--pace-space-20); right: var(--pace-space-20); }
  .slip { --fx: 0%; --fy: -340px; }
}

/* start poses */
#compare[data-motion-state="armed"] .slips,
#compare[data-motion-state="play"] .slips { display: block; }
#compare[data-motion-state="armed"] .slip { opacity: 0; transform: translate(var(--fx), var(--fy)); }
#compare[data-motion-state="armed"] .ledger tbody tr,
#compare[data-motion-state="armed"] .ledger tfoot tr { opacity: 0; transform: translateX(-12px); }
#compare[data-motion-state="armed"] .receipt-one .total,
#compare[data-motion-state="armed"] .receipt-one .saving { opacity: 0; transform: translateY(6px); }
#compare[data-motion-state="armed"] .receipt-one .saving::after { transform: scaleX(0); }

/* play */
#compare[data-motion-state="play"] .ledger tbody tr { animation: pr-deal var(--pace-dur-base) var(--pace-ease) calc(var(--r, 0) * 150ms) both; }
#compare[data-motion-state="play"] .ledger tbody tr:nth-child(2) { --r: 1; }
#compare[data-motion-state="play"] .ledger tbody tr:nth-child(3) { --r: 2; }
#compare[data-motion-state="play"] .ledger tbody tr:nth-child(4) { --r: 3; }
#compare[data-motion-state="play"] .ledger tbody tr:nth-child(5) { --r: 4; }
#compare[data-motion-state="play"] .ledger tfoot tr { animation: pr-deal var(--pace-dur-base) var(--pace-ease) 1000ms both; }
#compare[data-motion-state="play"] .slip {
  animation:
    pr-carry var(--pace-dur-slow) var(--pace-ease) calc(1700ms + var(--i) * 90ms) backwards,
    pr-fold var(--pace-dur-slow) var(--pace-ease) calc(2800ms + var(--i) * 60ms) forwards;
}
#compare[data-motion-state="play"] .receipt-one .total { animation: pr-tick var(--pace-dur-base) var(--pace-ease) 3000ms both; }
#compare[data-motion-state="play"] .receipt-one .saving { animation: pr-tick var(--pace-dur-base) var(--pace-ease) 3350ms both; }
#compare[data-motion-state="play"] .receipt-one .saving::after { animation: pr-wipe var(--pace-dur-slow) var(--pace-ease) 3700ms both; }

@keyframes pr-deal { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes pr-carry {
  from { opacity: 0; transform: translate(var(--fx), var(--fy)); }
  40% { opacity: 1; }
  to { opacity: 1; transform: translate(0, var(--pile)); }
}
@keyframes pr-fold {
  from { opacity: 1; transform: translate(0, var(--pile)); }
  70% { opacity: 1; }
  to { opacity: 0; transform: translate(0, 0) scale(0.96, 0.06); }
}
@keyframes pr-tick { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pr-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ============ B. Fig 1: agent runs log in like a ledger ============
   Verbs: row LOGS in (y 8px, 240ms, 320ms apart) / tier marker STAMPS / duration marker STAMPS.
   Plain CSS = the complete table with both markers. One signal: the Tier marker. */
.motion-fig { margin: var(--pace-space-56) 0 0; }
.mf-plate { border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container); background: var(--pace-raised); overflow: hidden; }
.mf-table { width: 100%; border-collapse: collapse; font-size: var(--pace-text-base); font-variant-numeric: tabular-nums; }
.mf-table thead th {
  vertical-align: middle; line-height: 18px;
  padding: var(--pace-space-12) var(--pace-space-16); text-align: left; font-weight: 500; font-size: var(--pace-text-sm);
  color: var(--pace-ink-2); background: var(--pace-surface); border-bottom: 1px solid var(--pace-hairline-strong); white-space: nowrap;
}
.mf-table tbody th, .mf-table tbody td { padding: var(--pace-space-16); text-align: left; font-weight: 400; vertical-align: middle; border-bottom: 1px solid var(--pace-hairline); white-space: nowrap; }
.mf-table tbody tr:last-child > * { border-bottom: 0; }
.mf-table .mf-num { text-align: right; }
.mf-table tbody .mf-agent, .mf-table .mf-task, .mf-table .mf-tier, .mf-table .mf-num { font-family: var(--pace-font-mono); font-size: var(--pace-text-sm); }
.mf-table .mf-agent { color: var(--pace-ink); }
.mf-table .mf-task { color: var(--pace-ink-3); }
.mf-tier { color: var(--pace-ink); }
.mf-ring { display: inline-block; width: 8px; height: 8px; margin-right: var(--pace-space-8); border: 1.5px solid var(--pace-ink-3); border-radius: var(--pace-radius-full); vertical-align: baseline; }
.mf-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; font-size: var(--pace-text-sm);
  border: 1px solid currentColor; border-radius: var(--pace-radius-full); color: var(--pace-ink);
}
.mf-chip svg { width: 14px; height: 14px; flex: none; }
.mf-chip.is-success svg { color: var(--pace-ok); }
.mf-chip.is-escalated svg { color: var(--pace-warn); }
.mf-chip.is-success { border-color: var(--pace-ok); }
.mf-chip.is-escalated { border-color: var(--pace-warn); }
.mf-dot {
  display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: var(--pace-space-8); vertical-align: middle; position: relative; top: -1px;
  font: 600 10px/1 var(--pace-font-mono); font-style: normal; color: var(--pace-ink); background: var(--pace-callout-bg);
  border: 1px solid var(--pace-ink); border-radius: var(--pace-radius-full);
}
.mf-dot.is-marker { background: var(--pace-callout-marker); border-color: var(--pace-callout-marker); color: var(--pace-on-signal); }
.mf-notes { list-style: none; margin: var(--pace-space-12) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--pace-space-8); }
.mf-notes li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--pace-space-8); padding: var(--pace-space-8) var(--pace-space-12);
  background: var(--pace-callout-bg); color: var(--pace-callout-ink); border: 1px solid var(--pace-callout-border);
  border-radius: var(--pace-callout-radius); font-size: var(--pace-text-sm); line-height: 1.3;
}
.mf-notes b { font-weight: 600; }
.mf-notes li > span:last-child { grid-column: 2; color: var(--pace-callout-meta); }
.mf-n { grid-row: 1; font-size: var(--pace-text-xs); color: var(--pace-callout-meta); padding-top: 2px; }
.motion-fig figcaption { margin-top: var(--pace-space-12); font-size: var(--pace-mk-caption); line-height: var(--pace-mk-caption-lh); color: var(--pace-ink-2); max-width: 60ch; }
@media (max-width: 860px) { .mf-table :is(th, td):nth-child(7) { display: none; } }
@media (max-width: 639px) {
  .mf-table :is(th, td):is(:nth-child(2), :nth-child(3), :nth-child(5), :nth-child(7)) { display: none; }
  .mf-table thead th, .mf-table tbody th, .mf-table tbody td { padding: var(--pace-space-12); }
  .mf-dot.is-marker { display: none; }
}

.motion-fig[data-motion-state="armed"] .mf-table tbody tr { opacity: 0; transform: translateY(8px); }
.motion-fig[data-motion-state="armed"] .mf-dot { opacity: 0; transform: scale(1.5); }
.motion-fig[data-motion-state="play"] .mf-table tbody tr { animation: mf-log var(--pace-dur-base) var(--pace-ease) calc(200ms + var(--i) * 320ms) both; }
.motion-fig[data-motion-state="play"] .mf-dot.is-marker { animation: mf-stamp var(--pace-dur-base) var(--pace-ease) 2400ms both; }
.motion-fig[data-motion-state="play"] .mf-dot:not(.is-marker) { animation: mf-stamp var(--pace-dur-base) var(--pace-ease) 2800ms both; }
@keyframes mf-log { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes mf-stamp { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: none; } }