/* Home motion piece: steps (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"]. */

/* ---- Shared plate, notes and caption (the three pieces are one family: neutral plate, 80ms stagger, 240ms deals) ---- */
.motion-fig { margin: 0; min-width: 0; --st: 80ms; --deal: var(--pace-dur-base); }
.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; }
.mf-plate { container-type: inline-size; background: var(--pace-raised); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container); padding: var(--pace-space-16); color: var(--pace-ink); font-size: var(--pace-text-base); line-height: var(--pace-text-base-lh); }
.mf-plate p, .mf-plate ul, .mf-plate table { margin: 0; padding: 0; }
.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-notes .co-n { grid-row: 1; font-size: var(--pace-text-xs); color: var(--pace-callout-meta); padding-top: 2px; }
/* Armed-only layers are absent from the plain end state. */
.mf-row td, .mf-tile, .mf-card { position: relative; }
.mf-row td::after, .mf-tile::after, .mf-card::after { content: ""; display: none; position: absolute; inset: 0; background: var(--pace-surface); border-radius: inherit; transform-origin: 50% 100%; pointer-events: none; }
.mf-row td::after { transform-origin: 100% 50%; }
.mf-typed, .mf-cover, .mf-caret, .mf-flash, .mf-ring, .mf-cursor, .mf-reel, .mf-unit { display: none; }

/* ---- Step 1: invite, then the team lands ---- */
.mf-invite { display: flex; gap: var(--pace-space-8); margin-bottom: var(--pace-space-12); }
.mf-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; height: 40px; padding: 0 var(--pace-space-12); background: var(--pace-surface); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-control); }
.mf-ph { color: var(--pace-ink-3); }
.mf-typed { position: absolute; inset: 0; padding: 0 var(--pace-space-12); align-items: center; gap: var(--pace-space-8); white-space: nowrap; }
.mf-typed-text { position: relative; display: inline-block; }
.mf-cover { position: absolute; inset: -4px -3px; background: var(--pace-surface); transform-origin: 100% 50%; }
.mf-caret { position: absolute; inset: -2px 0; }
.mf-caret::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--pace-ink); }
.mf-btn { position: relative; display: inline-flex; align-items: center; padding: 0 var(--pace-space-16); height: 40px; font-weight: 600; background: var(--pace-surface); border: 1px solid var(--pace-ink); border-radius: var(--pace-radius-control); }
.mf-flash { position: absolute; inset: -3px; border: 2px solid var(--pace-signal); border-radius: var(--pace-radius-control); }
.mf-toolbar { display: flex; gap: var(--pace-space-8); margin-bottom: var(--pace-space-12); }
.mf-search, .mf-filter { display: flex; align-items: center; height: 32px; padding: 0 var(--pace-space-12); background: var(--pace-surface); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-control); color: var(--pace-ink-3); font-size: var(--pace-text-sm); }
.mf-search { flex: 1; max-width: 18rem; }
.mf-filter { color: var(--pace-ink); }
.mf-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pace-hairline); border-radius: var(--pace-radius-container); overflow: hidden; background: var(--pace-surface); }
.mf-table th { text-align: left; font-weight: 500; font-size: var(--pace-text-sm); color: var(--pace-ink-3); background: var(--pace-sunken); padding: 6px var(--pace-space-12); }
.mf-table td { padding: 8px var(--pace-space-12); border-top: 1px solid var(--pace-hairline); overflow-wrap: anywhere; }
.mf-table td:last-child, .mf-table th:last-child { width: 1%; white-space: nowrap; }
.mf-role { display: inline-flex; align-items: center; gap: 6px; padding: 1px 10px 1px 8px; border-radius: var(--pace-radius-full); background: var(--pace-sunken); border: 1px solid var(--pace-hairline); color: var(--pace-ink-2); font-size: var(--pace-text-sm); font-weight: 500; line-height: 1.25rem; }
.mf-role::before { content: ""; width: 9px; height: 9px; border: 1.5px solid var(--pace-ink-3); border-radius: var(--pace-radius-full); }
.mf-role[data-role="owner"]::before { background: var(--pace-ink-3); }
@container (max-width: 480px) {
  .mf-invite { flex-direction: column; }
  .mf-btn { justify-content: center; height: 36px; }
  .mf-field { font-size: var(--pace-text-sm); }
  .mf-table td { padding: 7px 10px; font-size: var(--pace-text-sm); }
  .mf-role::before { display: none; }
  .mf-role { padding: 1px 9px; }
}

/* ---- Step 2: the launcher ---- */
.mf-title { font-size: var(--pace-text-md); color: var(--pace-ink-2); margin-bottom: var(--pace-space-12) !important; }
.mf-grid { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pace-space-12); }
.mf-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--pace-space-16); min-height: 92px; padding: var(--pace-space-16); background: var(--pace-surface); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container); }
.mf-tile b { font-weight: 500; font-size: var(--pace-text-md); }
.mf-glyph { display: block; color: var(--pace-ink); transform-origin: 50% 50%; }
.mf-ring { position: absolute; inset: -3px; border: 2px solid var(--pace-signal); border-radius: var(--pace-radius-container); pointer-events: none; }
.mf-cursor { position: absolute; right: 14px; bottom: 10px; fill: var(--pace-ink); stroke: var(--pace-raised); stroke-width: 1.2; }
@container (max-width: 480px) { .mf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Step 4: four numbers ---- */
.mf-cards { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pace-space-12); }
@container (min-width: 520px) { .mf-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mf-card { display: flex; flex-direction: column; gap: 2px; padding: var(--pace-space-12) var(--pace-space-12) var(--pace-space-16); background: var(--pace-surface); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container); }
.mf-lab { color: var(--pace-ink-3); font-size: var(--pace-text-sm); line-height: 1.25; min-height: 2.5em; }
.mf-val { display: flex; font-family: var(--pace-font-mono); font-size: var(--pace-text-metric); line-height: 1.2; font-weight: 500; margin: 4px 0 !important; }
.mf-sub { color: var(--pace-ink-2); font-size: var(--pace-text-sm); line-height: 1.35; }
.mf-reel { position: relative; width: 1ch; height: 1.2em; overflow: hidden; }
.mf-strip { display: flex; flex-direction: column; }
.mf-strip i { font-style: normal; height: 1.2em; }
.mf-rail { display: flex; justify-content: space-between; align-items: flex-end; height: 18px; margin: 4px 0 6px; }
.mf-tick { position: relative; width: 2px; height: 16px; background: var(--pace-ink-4); }
.mf-tick::before, .mf-tick::after { content: ""; position: absolute; inset: 0; background: var(--pace-ink); }
.mf-tick::after { background: var(--pace-signal); opacity: 0; }
.mf-tick:nth-child(n+19)::before { display: none; }
.mf-tick:nth-child(18)::after { opacity: 1; }
.mf-tick:nth-child(18) { height: 18px; }

/* ---- Armed: start poses ---- */
.motion-fig[data-motion-state="armed"] .mf-ph,
.motion-fig[data-motion-state="play"] .mf-ph { opacity: 0; }
.motion-fig[data-motion-state="armed"] .mf-typed,
.motion-fig[data-motion-state="play"] .mf-typed,
.motion-fig[data-motion-state="armed"] :is(.mf-cover, .mf-caret, .mf-flash, .mf-ring, .mf-reel),
.motion-fig[data-motion-state="play"] :is(.mf-cover, .mf-caret, .mf-flash, .mf-ring, .mf-reel) { display: block; }
.motion-fig[data-motion-state="armed"] .mf-typed,
.motion-fig[data-motion-state="play"] .mf-typed { display: flex; }
.motion-fig[data-motion-state="armed"] .mf-cursor,
.motion-fig[data-motion-state="play"] .mf-cursor { display: block; }
.motion-fig[data-motion-state="armed"] .mf-unit,
.motion-fig[data-motion-state="play"] .mf-unit { display: inline; }
.motion-fig[data-motion-state="armed"] .mf-real,
.motion-fig[data-motion-state="play"] .mf-real { position: absolute; opacity: 0; pointer-events: none; }
.motion-fig[data-motion-state="armed"] .mf-val,
.motion-fig[data-motion-state="play"] .mf-val { position: relative; }

.motion-fig[data-motion-state="armed"] :is(.mf-ring, .mf-flash, .mf-cursor, .mf-typed-role) { opacity: 0; }
.motion-fig[data-motion-state="armed"] .mf-tick::before,
.motion-fig[data-motion-state="armed"] .mf-tick::after { opacity: 0; }
.motion-fig[data-motion-state="armed"] .mf-row:not(:first-child) { transform: translateY(-10px); }
.motion-fig[data-motion-state="armed"] .mf-row:not(:first-child) td::after, .motion-fig[data-motion-state="play"] .mf-row:not(:first-child) td::after, .motion-fig[data-motion-state="armed"] :is(.mf-tile, .mf-card)::after, .motion-fig[data-motion-state="play"] :is(.mf-tile, .mf-card)::after { display: block; }
.motion-fig[data-motion-state="armed"] .mf-tile { transform: translateY(14px) scale(0.96); }
.motion-fig[data-motion-state="armed"] .mf-card { transform: translateY(10px); }
.motion-fig[data-motion-state="armed"] .mf-strip { transform: translateY(0); }
.motion-fig[data-motion-state="armed"] .mf-cursor { transform: translate(46px, 34px); }

/* ---- Play: stop-to-go keyframes, run once, fill both ---- */
.motion-fig[data-motion-state="play"] *, .motion-fig[data-motion-state="play"] *::before, .motion-fig[data-motion-state="play"] *::after { animation-fill-mode: both !important; }
@keyframes mf-type { to { transform: scaleX(0); } }
@keyframes mf-caret { to { transform: translateX(100%); } }
@keyframes mf-fade-out { to { opacity: 0; } }
@keyframes mf-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-stamp { from { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes mf-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-wipe { to { transform: scaleX(0); } }
@keyframes mf-wipe-y { to { transform: scaleY(0); } }
@keyframes mf-pulse { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mf-deal-row { from { transform: translateY(-10px); } to { transform: none; } }
@keyframes mf-click-in { 0% { transform: translateY(14px) scale(0.96); } 70% { transform: translateY(0) scale(1.02); } 100% { transform: none; } }
@keyframes mf-card-in { from { transform: translateY(10px); } to { transform: none; } }
@keyframes mf-reel { to { transform: translateY(calc(var(--d) * -10%)); } }
@keyframes mf-tick-on { from { opacity: 0; } to { opacity: 1; } }
@keyframes mf-head { 0% { opacity: 0; } 1%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes mf-cursor-in { 0% { opacity: 0; transform: translate(46px, 34px); } 100% { opacity: 1; transform: translate(0, 0); } }
@keyframes mf-press { 0%, 100% { transform: scale(1); } 40% { transform: scale(0.82); } }
@keyframes mf-ring { 0% { opacity: 0; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }

/* Step 1 timeline (about 3.6 s): type 0.3-1.6, role stamps 1.7, Invite presses 2.0, rows deal 2.1-3.0, chips stamp. */
.motion-fig[data-motion-state="play"] .mf-cover { animation: mf-type 1300ms steps(37, end) 300ms; }
.motion-fig[data-motion-state="play"] .mf-caret { animation: mf-caret 1300ms steps(37, end) 300ms, mf-fade-out 90ms linear 2000ms; }
.motion-fig[data-motion-state="play"] .mf-typed-role { animation: mf-stamp var(--pace-dur-quick) var(--pace-ease) 1700ms, mf-show 90ms steps(1, start) 1700ms; }
.motion-fig[data-motion-state="play"] .mf-flash { animation: mf-pulse 360ms linear 2000ms; }
.motion-fig[data-motion-state="play"] .mf-typed { animation: mf-fade-out 90ms steps(1, end) 2250ms; }
.motion-fig[data-motion-state="play"] .mf-ph { animation: mf-fade-in 90ms steps(1, start) 2340ms; }
.motion-fig[data-motion-state="play"] .mf-row:not(:first-child) { --t: calc(2100ms + (var(--i) - 1) * 100ms); animation: mf-deal-row var(--deal) var(--pace-ease) var(--t); }
.motion-fig[data-motion-state="play"] .mf-row:not(:first-child) td::after { animation: mf-wipe var(--deal) var(--pace-ease) var(--t); }
.motion-fig[data-motion-state="play"] .mf-row:not(:first-child) .mf-role { animation: mf-stamp var(--pace-dur-quick) var(--pace-ease) calc(var(--t) + 160ms); }

/* Step 2 timeline (about 3.6 s): tiles click in one by one 0.2-1.2, pointer arrives 1.5, clicks Vault 2.0, ring holds then clears. */
.motion-fig[data-motion-state="play"] .mf-tile { animation: mf-click-in var(--pace-dur-base) var(--pace-ease) calc(200ms + var(--i) * 110ms); }
.motion-fig[data-motion-state="play"] .mf-tile::after { animation: mf-wipe-y var(--pace-dur-base) var(--pace-ease) calc(200ms + var(--i) * 110ms); }
.motion-fig[data-motion-state="play"] .mf-cursor { animation: mf-cursor-in var(--pace-dur-slow) var(--pace-ease) 1500ms, mf-fade-out var(--pace-dur-quick) linear 3100ms; }
.motion-fig[data-motion-state="play"] .mf-tile:first-child .mf-glyph { animation: mf-press 200ms var(--pace-ease) 2000ms; }
.motion-fig[data-motion-state="play"] .mf-ring { animation: mf-ring var(--pace-dur-quick) var(--pace-ease) 2000ms, mf-fade-out var(--pace-dur-base) linear 3100ms; }

/* Step 4 timeline (about 3 s): cards deal 0.2 apart, digits tick down their reels, the rail lights one tick at a time. */
.motion-fig[data-motion-state="play"] .mf-card { animation: mf-card-in var(--pace-dur-base) var(--pace-ease) calc(200ms + var(--c) * 120ms); }
.motion-fig[data-motion-state="play"] .mf-card::after { animation: mf-wipe-y var(--pace-dur-base) var(--pace-ease) calc(200ms + var(--c) * 120ms); }
.motion-fig[data-motion-state="play"] .mf-strip { animation: mf-reel calc(var(--d) * 90ms + 180ms) steps(var(--d), end) calc(560ms + var(--c, 0) * 0ms); }
.motion-fig[data-motion-state="play"] .mf-card:nth-child(1) .mf-strip { animation-delay: 360ms; }
.motion-fig[data-motion-state="play"] .mf-card:nth-child(2) .mf-strip { animation-delay: 480ms; }
.motion-fig[data-motion-state="play"] .mf-card:nth-child(3) .mf-strip { animation-delay: 600ms; }
.motion-fig[data-motion-state="play"] .mf-card:nth-child(4) .mf-strip { animation-delay: 720ms; }
.motion-fig[data-motion-state="play"] .mf-tick:nth-child(-n+18)::before { animation: mf-tick-on 90ms steps(1, start) calc(720ms + var(--i) * 90ms); }
.motion-fig[data-motion-state="play"] .mf-tick:nth-child(-n+17)::after { animation: mf-head 90ms steps(1, end) calc(720ms + var(--i) * 90ms); }
.motion-fig[data-motion-state="play"] .mf-tick:nth-child(18)::after { animation: mf-tick-on 90ms steps(1, start) calc(720ms + var(--i) * 90ms); }