/* motion-kit.css — the m2 motion language as tokens, keyframes and utilities. Every number is lifted from
   m2.css (m2row, m2toast, m2sheet, the spring, the row flash + glow fade, the mcap tint), skeleton.css
   (skSheen), onboarding.css (ob-*), audit.css (au-*), board.js (280 ms FLIP) and trending.js (380/560 ms).
   Only adds --mk-* tokens, @keyframes mk-* and .mk-* classes — overrides nothing. Load after m2.css.
   Rules and per-surface checklists: MOTION-SPEC.md. Reduced motion: geometry goes, meaning stays. */

/* -- 1. tokens -- */
:root,html[data-design=m2]{
  /* easing — four curves do all the work */
  --mk-ease-spring:cubic-bezier(.2,.8,.2,1);   /* the house spring: entrances, presses, sheets, short travel */
  --mk-ease-glide:cubic-bezier(.2,.7,.2,1);    /* softer, for long travel: list reorders, growing bars */
  --mk-ease-settle:cubic-bezier(.16,1,.3,1);   /* fast out, long tail: colour settling back to rest */
  --mk-ease-shake:cubic-bezier(.36,.07,.19,.97);
  --mk-ease-plain:ease;                        /* colour and opacity only — never geometry */
  /* timing scale */
  --mk-t-tap:.12s;      /* a segmented control taking a press */
  --mk-t-fast:.14s;     /* transform on a button or pill */
  --mk-t-quick:.16s;    /* colour: background, border, text */
  --mk-t-base:.22s;  --mk-t-sheet:.3s;  --mk-t-toast:.34s;
  --mk-t-slow:.36s;     /* a staggered row */
  --mk-t-enter:.42s;    /* a row arriving in a live list */
  --mk-t-stage:.5s;     /* a staged block in a flow */
  --mk-t-glide:.56s;    /* a row travelling to a new rank */
  --mk-t-bar:.7s;       /* a bar growing to its value */
  --mk-t-settle:1.1s;   /* a tint fading back to rest */
  --mk-t-hold:1.4s;     /* a row's side colour fading out */
  --mk-t-shimmer:1.9s;  /* one skeleton sheen pass */
  /* stagger */
  --mk-stagger:45ms;        /* rows in a card */
  --mk-stagger-dense:22ms;  /* a grid of many small cells */
  --mk-stagger-wide:70ms;   /* a few large value points */
  /* travel — always under one row height */
  --mk-d-row:10px;      /* a row dropping in from above */
  --mk-d-near:8px;      /* a block rising into place */
  --mk-d-toast:14px;  --mk-d-sheet:16px;
  --mk-d-lateral:26px;  /* a step swapping sideways in a flow */
  --mk-scale-in:.985;   /* the entrance scale — barely there on purpose */
  --mk-scale-press:.96;  --mk-lift:-1px;
  /* glow + rings */
  --mk-glow:var(--glow,rgba(198,241,53,.3));
  --mk-glow-lift:0 12px 26px -12px var(--mk-glow);   /* a pill under the cursor */
  --mk-glow-rest:0 10px 30px -10px var(--mk-glow);   /* a primary button at rest */
  --mk-glow-tile:0 6px 20px -6px var(--mk-glow);     /* a small accent tile */
  --mk-ring:0 0 0 3px var(--accent-bg,rgba(198,241,53,.14));
  --mk-ring-lg:0 0 0 4px var(--accent-bg,rgba(198,241,53,.14));
  /* live-data colour */
  --mk-flash-new:var(--accent-bg,rgba(198,241,53,.14));
  --mk-flash-up:rgba(52,209,123,.22);  --mk-flash-dn:rgba(255,92,92,.22);
  --mk-tint-up:var(--green-2,#6ee7a8); --mk-tint-dn:var(--red-2,#ff8080);
  --mk-sheen:rgba(255,255,255,.07);    --mk-sk:rgba(255,255,255,.055);
}

/* -- 2. keyframes -- */
@keyframes mk-in{from{opacity:0;transform:translateY(calc(var(--mk-d-row)*-1)) scale(var(--mk-scale-in))}to{opacity:1;transform:none}}
@keyframes mk-in-up{from{opacity:0;transform:translateY(var(--mk-d-near))}to{opacity:1;transform:none}}
@keyframes mk-rise{from{opacity:0;transform:translateY(var(--mk-d-sheet)) scale(var(--mk-scale-in))}to{opacity:1;transform:none}}
@keyframes mk-toast{from{opacity:0;transform:translateY(calc(var(--mk-d-toast)*-1)) scale(.98)}to{opacity:1;transform:none}}
@keyframes mk-sheet{from{opacity:0;transform:translateY(var(--mk-d-sheet)) scale(var(--mk-scale-in))}to{opacity:1;transform:none}}
@keyframes mk-sheet-out{to{opacity:0;transform:translateY(10px) scale(var(--mk-scale-in))}}
@keyframes mk-fade{from{opacity:0}to{opacity:1}}
@keyframes mk-fade-out{to{opacity:0}}
@keyframes mk-stage{from{opacity:0;transform:translateY(var(--mk-d-row))}to{opacity:1;transform:none}}
@keyframes mk-lateral{from{opacity:0;transform:translateX(var(--mk-d-lateral))}to{opacity:1;transform:none}}
@keyframes mk-lateral-out{from{opacity:1;transform:none}to{opacity:0;transform:translateX(calc(var(--mk-d-lateral)*-1))}}
@keyframes mk-lateral-back{from{opacity:0;transform:translateX(calc(var(--mk-d-lateral)*-1))}to{opacity:1;transform:none}}
@keyframes mk-slide-in{from{opacity:.2;transform:translateY(calc(var(--mk-d-row)*-1))}to{opacity:1;transform:none}}
@keyframes mk-pop{0%{transform:scale(.8)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes mk-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
@keyframes mk-draw{to{stroke-dashoffset:0}}
@keyframes mk-pulse{0%,100%{box-shadow:0 0 0 0 var(--accent-bg,rgba(198,241,53,.14))}50%{box-shadow:0 0 0 5px rgba(198,241,53,0)}}
@keyframes mk-pulse-live{0%{box-shadow:0 0 0 0 rgba(52,209,123,.55)}70%{box-shadow:0 0 0 6px rgba(52,209,123,0)}100%{box-shadow:0 0 0 0 rgba(52,209,123,0)}}
@keyframes mk-spin{to{transform:rotate(360deg)}}
@keyframes mk-breathe{50%{opacity:.6}}
@keyframes mk-shimmer{to{transform:translateX(100%)}}
@keyframes mk-sheen{to{transform:translateX(120%)}}
@keyframes mk-flash-new{from{background-color:var(--mk-flash-new)}to{background-color:transparent}}
@keyframes mk-flash-up{from{background-color:var(--mk-flash-up)}to{background-color:transparent}}
@keyframes mk-flash-dn{from{background-color:var(--mk-flash-dn)}to{background-color:transparent}}
@keyframes mk-tick-up{0%{color:var(--mk-tint-up)}100%{}}
@keyframes mk-tick-dn{0%{color:var(--mk-tint-dn)}100%{}}
@keyframes mk-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes mk-grow-w{from{width:0}}
@keyframes mk-fill{from{background-color:color-mix(in srgb,var(--text,#f4f4f2) 3%,transparent);transform:scale(.9);opacity:.3}}
@keyframes mk-drain{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* -- 3. entrances -- */
.mk-in{animation:mk-in var(--mk-t-enter) var(--mk-ease-spring) both}
.mk-in-up{animation:mk-in-up var(--mk-t-stage) var(--mk-ease-spring) both}
.mk-rise{animation:mk-rise var(--mk-t-enter) var(--mk-ease-spring) both}
.mk-toast{animation:mk-toast var(--mk-t-toast) var(--mk-ease-spring) both}
.mk-sheet{animation:mk-sheet var(--mk-t-sheet) var(--mk-ease-spring) both}
.mk-sheet.mk-out{animation:mk-sheet-out .17s var(--mk-ease-plain) forwards}
.mk-fade{animation:mk-fade var(--mk-t-base) var(--mk-ease-plain) both}
.mk-fade.mk-out{animation:mk-fade-out .17s var(--mk-ease-plain) forwards}
.mk-slide-in{animation:mk-slide-in .9s var(--mk-ease-spring) both}
.mk-lateral{animation:mk-lateral .4s var(--mk-ease-spring) both}
.mk-lateral.mk-out{animation:mk-lateral-out .26s var(--mk-ease-plain) forwards}
.mk-lateral.mk-back{animation:mk-lateral-back .4s var(--mk-ease-spring) both}
/* stagger: the parent marks the run, --i is the child's place (capped, so a long list never ends on a long
   wait). MK.stagger() sets --i; .mk-auto covers the first 16 with no JS at all. */
.mk-stagger>*{animation:mk-stage var(--mk-t-stage) var(--mk-ease-spring) both;animation-delay:calc(var(--i,0) * var(--mk-stagger) + var(--mk-delay,0ms))}
.mk-stagger.mk-dense>*{--mk-stagger:var(--mk-stagger-dense)}
.mk-stagger.mk-wide>*{--mk-stagger:var(--mk-stagger-wide)}
.mk-stagger.mk-near>*{animation-name:mk-in-up}
.mk-auto>*:nth-child(1){--i:0}.mk-auto>*:nth-child(2){--i:1}.mk-auto>*:nth-child(3){--i:2}.mk-auto>*:nth-child(4){--i:3}
.mk-auto>*:nth-child(5){--i:4}.mk-auto>*:nth-child(6){--i:5}.mk-auto>*:nth-child(7){--i:6}.mk-auto>*:nth-child(8){--i:7}
.mk-auto>*:nth-child(9){--i:8}.mk-auto>*:nth-child(10){--i:9}.mk-auto>*:nth-child(11){--i:10}.mk-auto>*:nth-child(12){--i:11}
.mk-auto>*:nth-child(n+13){--i:12}
.mk-still>*{animation:none!important}   /* a re-render that must not replay the run */

/* -- 4. feedback -- */
.mk-pop{animation:mk-pop var(--mk-t-toast) var(--mk-ease-spring)}
.mk-shake{animation:mk-shake .32s var(--mk-ease-shake)}
.mk-spin{animation:mk-spin .7s linear infinite}
.mk-pulse{animation:mk-pulse 2s ease-in-out infinite}
.mk-live{animation:mk-pulse-live 2.4s ease-out infinite}
.mk-breathe{animation:mk-breathe 1.8s ease-in-out infinite}
.mk-draw{stroke-dasharray:20;stroke-dashoffset:20;animation:mk-draw .4s var(--mk-ease-spring) forwards}

/* -- 5. micro-interactions -- */
.mk-press{transition:background-color var(--mk-t-quick) var(--mk-ease-plain),border-color var(--mk-t-quick) var(--mk-ease-plain),color var(--mk-t-quick) var(--mk-ease-plain),transform var(--mk-t-fast) var(--mk-ease-spring),box-shadow var(--mk-t-base) var(--mk-ease-plain),opacity var(--mk-t-quick) var(--mk-ease-plain)}
.mk-press:active{transform:scale(var(--mk-scale-press))}
.mk-press.mk-soft:active{transform:scale(.985)}   /* a wide button: the same press, less of it */
.mk-lift{transition:transform var(--mk-t-fast) var(--mk-ease-spring),box-shadow var(--mk-t-base) var(--mk-ease-plain),background-color var(--mk-t-quick) var(--mk-ease-plain)}
.mk-lift:hover{transform:translateY(var(--mk-lift));box-shadow:var(--mk-glow-lift)}
.mk-zoom{transition:transform var(--mk-t-base) var(--mk-ease-spring)}
.mk-zoom:hover,*:hover>.mk-zoom{transform:scale(1.04)}
.mk-ring{transition:border-color .18s var(--mk-ease-plain),box-shadow var(--mk-t-base) var(--mk-ease-spring),background-color .18s var(--mk-ease-plain)}
.mk-ring:focus,.mk-ring:focus-visible,.mk-ring:focus-within{border-color:var(--accent-line,rgba(198,241,53,.45));box-shadow:var(--mk-ring);outline:0}
.mk-ring.mk-lg:focus,.mk-ring.mk-lg:focus-within{box-shadow:var(--mk-ring-lg)}
.mk-glow{box-shadow:var(--mk-glow-rest)}
.mk-glow-tile{box-shadow:var(--mk-glow-tile)}
.mk-row{transition:background-color .18s var(--mk-ease-plain),transform .18s var(--mk-ease-spring)}
.mk-knob{transition:transform .18s var(--mk-ease-spring)}        /* a toggle */
.mk-meter{transition:width .28s var(--mk-ease-spring),background-color .28s var(--mk-ease-plain)}
.mk-track{transition:transform .45s var(--mk-ease-spring)}

/* -- 6. loading -- */
.mk-shimmer{position:relative;overflow:hidden;background:var(--mk-sk);border-radius:6px;color:transparent!important;pointer-events:none;user-select:none}
.mk-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,var(--mk-sheen) 50%,transparent 75%);transform:translateX(-100%);animation:mk-shimmer var(--mk-t-shimmer) ease-in-out infinite}
html[data-design=m2] .mk-shimmer{background:#141418;--mk-sheen:#1f1f25}
.mk-sheen{position:relative;overflow:hidden}      /* one pass over something that just filled in */
.mk-sheen::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,var(--mk-sheen) 48%,transparent 66%);transform:translateX(-120%);animation:mk-sheen 1.1s var(--mk-ease-spring) .15s both;pointer-events:none}
.mk-ready{animation:mk-fade .24s var(--mk-ease-plain) both}   /* skeleton → content, as one motion */
.mk-sk-rows>*:nth-child(n+2){opacity:.92}.mk-sk-rows>*:nth-child(n+4){opacity:.8}.mk-sk-rows>*:nth-child(n+6){opacity:.66}
.mk-sk-rows>*:nth-child(n+8){opacity:.5}.mk-sk-rows>*:nth-child(n+10){opacity:.36}.mk-sk-rows>*:nth-child(n+12){opacity:.24}

/* -- 7. live data -- */
.mk-flash-up{animation:mk-flash-up var(--mk-t-hold) ease-out both}
.mk-flash-down{animation:mk-flash-dn var(--mk-t-hold) ease-out both}
.mk-flash-new{animation:mk-flash-new var(--mk-t-settle) var(--mk-ease-settle) both}
.mk-arrive{animation:mk-slide-in .9s var(--mk-ease-spring) both,mk-flash-new var(--mk-t-hold) ease-out both}
.mk-arrive.mk-up{animation:mk-slide-in .9s var(--mk-ease-spring) both,mk-flash-up var(--mk-t-hold) ease-out both}
.mk-arrive.mk-down{animation:mk-slide-in .9s var(--mk-ease-spring) both,mk-flash-dn var(--mk-t-hold) ease-out both}
/* a moved number takes its direction's colour and settles back — no glow, no scale: a jumping number is unreadable */
.mk-tick.mk-up{animation:mk-tick-up var(--mk-t-settle) var(--mk-ease-settle)}
.mk-tick.mk-down{animation:mk-tick-dn var(--mk-t-settle) var(--mk-ease-settle)}
.mk-num{font-variant-numeric:tabular-nums}   /* a ticking number must not change width */
.mk-grow{transform-origin:left;animation:mk-grow .9s var(--mk-ease-spring) both;animation-delay:calc(var(--i,0) * var(--mk-stagger))}
.mk-grow-w{animation:mk-grow-w var(--mk-t-bar) var(--mk-ease-glide) both;animation-delay:calc(var(--i,0) * var(--mk-stagger) + 80ms)}
.mk-fill{animation:mk-fill var(--mk-t-stage) var(--mk-ease-spring) both;animation-delay:calc(var(--k,0) * var(--mk-stagger-dense))}
.mk-drain{transform-origin:left;animation:mk-drain var(--mk-drain-ms,8s) linear forwards}
.mk-glide{transition:transform var(--mk-t-glide) var(--mk-ease-glide)}   /* fallback for MK.flip() */

/* -- 8. the stage bar and the animated mark live with the brand assets, because they are components rather
   than primitives: /brand/motion-stage-bar.css (MK.stageBar() drives it) and /brand/motion-mark.css. -- */

/* -- 10. reduced motion — geometry goes, meaning stays. No slide, no reorder, no sheen; a buy still flashes
   green, a sell red, a moved price still takes its colour. m2.css's tape rule, made general. -- */
@media (prefers-reduced-motion:reduce){
  .mk-in,.mk-in-up,.mk-rise,.mk-toast,.mk-sheet,.mk-slide-in,.mk-lateral,.mk-stagger>*,.mk-pop,.mk-shake,
  .mk-draw,.mk-grow,.mk-grow-w,.mk-fill,.mk-ready,.mk-breathe,.mk-pulse,.mk-live,
  .mk-bar .mk-st.on .mk-no{animation:none!important;opacity:1!important;transform:none!important}
  .mk-draw{stroke-dashoffset:0!important}
  .mk-shimmer::after,.mk-sheen::after{animation:none!important;display:none}
  .mk-mark .mk-sheenbar,.mk-mark .mk-pulsering{animation:none!important;opacity:0}
  .mk-press,.mk-lift,.mk-zoom,.mk-ring,.mk-row,.mk-knob,.mk-meter,.mk-track,.mk-glide{transition:none!important}
  .mk-press:active,.mk-lift:hover,.mk-zoom:hover{transform:none!important;box-shadow:none}
  .mk-spin{animation-duration:1.4s}          /* a spinner still has to say "working" */
  .mk-bar .mk-seg::after{transition:none!important}
  .mk-arrive{animation:mk-flash-new var(--mk-t-hold) ease-out both!important}
  .mk-arrive.mk-up{animation:mk-flash-up var(--mk-t-hold) ease-out both!important}
  .mk-arrive.mk-down{animation:mk-flash-dn var(--mk-t-hold) ease-out both!important}
}