/* Home motion piece: approval (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"]. */
.motion-fig { margin: 0; }
.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; }
.motion-fig .callouts { margin-top: var(--pace-space-12); }

.appr-stage { display: grid; align-items: center; min-height: 224px; padding: var(--pace-plate-pad); background: var(--pace-plate-ground); border: 1px solid var(--pace-plate-edge); border-radius: var(--pace-radius-container); }
.appr-card { position: relative; display: grid; gap: var(--pace-space-12); padding: var(--pace-space-20); background: var(--pace-plate-inset); border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-container); box-shadow: var(--pace-elev-1); color: var(--pace-ink); }
.appr-head { display: flex; align-items: flex-start; gap: var(--pace-space-12); flex-wrap: wrap; }
.appr-shield { flex: none; margin-top: 3px; color: var(--pace-ink-3); }
.appr-title { flex: 1 1 14rem; min-width: 0; }
.appr-title h4 { font-size: var(--pace-text-base); line-height: 1.35; font-weight: 500; font-stretch: 100%; letter-spacing: 0; }
.appr-sub { margin-top: 2px; font-size: var(--pace-text-xs); color: var(--pace-ink-3); }
.appr-tags { display: flex; align-items: center; gap: var(--pace-space-8); margin-left: auto; }
.appr-tier, .appr-risk { display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: var(--pace-radius-full); font-size: var(--pace-text-xs); line-height: 1.5; white-space: nowrap; }
.appr-tier { border: 1px solid var(--pace-hairline-strong); color: var(--pace-ink-2); }
.appr-risk { border: 1px solid color-mix(in oklab, var(--pace-error) 40%, var(--pace-raised)); background: color-mix(in oklab, var(--pace-error) 10%, var(--pace-raised)); color: var(--pace-error); font-weight: 500; }
.appr-meta { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--pace-space-4) var(--pace-space-16); font-size: var(--pace-text-xs); color: var(--pace-ink-3); }
.appr-by b { font-weight: 400; color: var(--pace-ink-2); }
.appr-time { font-size: var(--pace-text-xs); }

/* Footer slot: one fixed-height cell; the Review/Approve props and the pointer only exist while armed or playing. */
.appr-foot { position: relative; display: grid; align-items: center; justify-items: start; min-height: 36px; }
.appr-foot > * { grid-area: 1 / 1; }
.appr-btn, .appr-ripple, .appr-pointer { display: none; }
.appr-done { display: inline-flex; align-items: center; gap: var(--pace-space-8); font-size: var(--pace-text-md); }
.appr-check { flex: none; color: var(--pace-ink); }
.appr-word { font-weight: 500; }
.appr-sent { padding: 1px 8px; border: 1px solid var(--pace-hairline-strong); border-radius: var(--pace-radius-full); font-size: var(--pace-text-xs); color: var(--pace-ink-2); }

[data-motion-state="armed"] .appr-btn, [data-motion-state="play"] .appr-btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 var(--pace-space-16); border: 1px solid var(--pace-control-border); border-radius: var(--pace-radius-control); background: var(--pace-plate-inset); font-size: var(--pace-text-base); font-weight: 500; color: var(--pace-ink); }
[data-motion-state="armed"] .appr-approve, [data-motion-state="play"] .appr-approve { background: var(--pace-signal); border-color: var(--pace-signal); color: var(--pace-on-signal); }
[data-motion-state="armed"] .appr-ripple, [data-motion-state="play"] .appr-ripple { display: block; position: absolute; left: -4px; top: 50%; margin-top: -32px; width: 64px; height: 64px; border: 2px solid var(--pace-signal); border-radius: var(--pace-radius-full); }
[data-motion-state="armed"] .appr-pointer, [data-motion-state="play"] .appr-pointer { display: block; margin: 10px 0 0 38px; color: var(--pace-ink); z-index: 2; }

/* Start pose */
[data-motion-state="armed"] .appr-card { opacity: 0; transform: translateY(28px); }
[data-motion-state="armed"] .appr-sub, [data-motion-state="armed"] .appr-meta, [data-motion-state="armed"] .appr-tier, [data-motion-state="armed"] .appr-risk { opacity: 0; }
[data-motion-state="armed"] .appr-approve, [data-motion-state="armed"] .appr-ripple, [data-motion-state="armed"] .appr-done, [data-motion-state="armed"] .appr-pointer { opacity: 0; }
[data-motion-state="armed"] .appr-pointer { transform: translate(120px, 26px); }
[data-motion-state="armed"] .appr-ripple { transform: scale(0.5); }

/* Storyboard: card ARRIVES, meta TICKS in, risk STAMPS, pointer TAPS Review then Approve (the signal moment), SENT receipt settles. */
[data-motion-state="play"] .appr-card { animation: appr-arrive var(--pace-dur-slow) var(--pace-ease) both; }
[data-motion-state="play"] .appr-sub { animation: appr-tick var(--pace-dur-instant) var(--pace-ease-tick) 0.5s both; }
[data-motion-state="play"] .appr-meta { animation: appr-tick var(--pace-dur-instant) var(--pace-ease-tick) 0.8s both; }
[data-motion-state="play"] .appr-tier { animation: appr-tick var(--pace-dur-instant) var(--pace-ease-tick) 1.1s both; }
[data-motion-state="play"] .appr-risk { animation: appr-stamp var(--pace-dur-base) var(--pace-ease) 1.6s both; }
[data-motion-state="play"] .appr-pointer { animation: appr-point 0.7s var(--pace-ease) 2.3s both, appr-point-out var(--pace-dur-quick) var(--pace-ease-exit) 4.3s forwards; }
[data-motion-state="play"] .appr-review { animation: appr-press var(--pace-dur-quick) var(--pace-ease) 3.05s both, appr-out var(--pace-dur-instant) var(--pace-ease-exit) 3.3s forwards; }
[data-motion-state="play"] .appr-approve { animation: appr-in var(--pace-dur-instant) var(--pace-ease) 3.3s both, appr-press var(--pace-dur-quick) var(--pace-ease) 4s forwards, appr-out var(--pace-dur-instant) var(--pace-ease-exit) 4.25s forwards; }
[data-motion-state="play"] .appr-ripple { animation: appr-ring var(--pace-dur-slow) var(--pace-ease) 4s both; }
[data-motion-state="play"] .appr-done { animation: appr-in var(--pace-dur-base) var(--pace-ease) 4.25s both; }
[data-motion-state="play"] .appr-check { animation: appr-pop var(--pace-dur-base) var(--pace-ease) 4.3s both; }
[data-motion-state="play"] .appr-pointer { transform-origin: 3px 2px; }

@keyframes appr-arrive { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes appr-tick { from { opacity: 0; } to { opacity: 1; } }
@keyframes appr-stamp { 0% { opacity: 0; transform: scale(1.6); } 55% { opacity: 1; transform: scale(0.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes appr-point { from { opacity: 0; transform: translate(120px, 26px); } to { opacity: 1; transform: none; } }
@keyframes appr-point-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes appr-press { 0% { transform: scale(1); } 50% { transform: scale(0.94); } 100% { transform: scale(1); } }
@keyframes appr-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes appr-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes appr-ring { 0% { opacity: 0; transform: scale(0.5); } 1% { opacity: 0.6; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes appr-pop { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

@media (max-width: 480px) {
  .appr-stage { min-height: 0; padding: var(--pace-plate-pad-mobile) var(--pace-space-12); }
  .appr-card { padding: var(--pace-space-16); }
  .appr-tags { margin-left: calc(16px + var(--pace-space-12)); }
}