/* ui/motion.css — the three motions (docs/DESIGN.md "Motion"). Nothing else animates
   anywhere: no transitions, no hover lifts, no loaders beyond the Courier "working…".
   All motion is CSS; JS only toggles classes (.is-active on the how-it-works rules).

   1. Stamp        scale(1.15) -> scale(1) with rotate(-8deg), 160ms, ease-out. Plays when
                   a .motion-stamp appears (page load or insertion): a flag applied, a hold shown.
   2. Ledger fill  rows of a .motion-ledger document draw in top to bottom, 40ms stagger,
                   opacity 0 -> 1, no translate. Once, when the document is first shown.
   3. Rule extend  a 1.5px rule grows from 0 to 100% width, 260ms, when its how-it-works
                   column becomes active (.is-active).
   prefers-reduced-motion: stamps and rules appear instantly, rows appear at once. */

@keyframes stamp-land {
  from { opacity: 0; transform: rotate(-8deg) scale(1.15); }
  to   { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes ledger-fill {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rule-extend {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 1. Stamp: lands after the rows of the document it sits on have filled. */
.motion-stamp { animation: stamp-land var(--motion-stamp) var(--ease-out) both; animation-delay: 420ms; }
.stamp--inline.motion-stamp { animation-delay: 0ms; }

/* 2. Ledger fill: one rule per row position, 40ms apart, up to twenty rows. */
.motion-ledger .doc__row, .motion-ledger .integration { animation: ledger-fill 120ms linear both; }
.motion-ledger .doc__row:nth-child(1),  .motion-ledger .integration:nth-child(1)  { animation-delay: calc(0 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(2),  .motion-ledger .integration:nth-child(2)  { animation-delay: calc(1 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(3),  .motion-ledger .integration:nth-child(3)  { animation-delay: calc(2 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(4),  .motion-ledger .integration:nth-child(4)  { animation-delay: calc(3 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(5),  .motion-ledger .integration:nth-child(5)  { animation-delay: calc(4 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(6),  .motion-ledger .integration:nth-child(6)  { animation-delay: calc(5 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(7),  .motion-ledger .integration:nth-child(7)  { animation-delay: calc(6 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(8),  .motion-ledger .integration:nth-child(8)  { animation-delay: calc(7 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(9),  .motion-ledger .integration:nth-child(9)  { animation-delay: calc(8 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(10), .motion-ledger .integration:nth-child(10) { animation-delay: calc(9 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(11), .motion-ledger .integration:nth-child(11) { animation-delay: calc(10 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(12), .motion-ledger .integration:nth-child(12) { animation-delay: calc(11 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(13), .motion-ledger .integration:nth-child(13) { animation-delay: calc(12 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(14), .motion-ledger .integration:nth-child(14) { animation-delay: calc(13 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(15), .motion-ledger .integration:nth-child(15) { animation-delay: calc(14 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(16), .motion-ledger .integration:nth-child(16) { animation-delay: calc(15 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(17), .motion-ledger .integration:nth-child(17) { animation-delay: calc(16 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(18), .motion-ledger .integration:nth-child(18) { animation-delay: calc(17 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(19), .motion-ledger .integration:nth-child(19) { animation-delay: calc(18 * var(--motion-ledger-stagger)); }
.motion-ledger .doc__row:nth-child(20), .motion-ledger .integration:nth-child(20) { animation-delay: calc(19 * var(--motion-ledger-stagger)); }

/* 3. Rule extend: the rule above the active how-it-works column. */
.motion-rule { transform: scaleX(0); transform-origin: left center; }
.motion-rule.is-active { animation: rule-extend var(--motion-rule) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .motion-stamp, .stamp--inline.motion-stamp { animation: none; opacity: 1; transform: rotate(-8deg); }
  .motion-ledger .doc__row, .motion-ledger .integration { animation: none; opacity: 1; }
  .motion-rule, .motion-rule.is-active { animation: none; transform: none; }
}