/* Mate motion layer (spec: docs/specs/motion.md). After the splash, only transform and opacity animate. */
:root{--m-spring:cubic-bezier(.22,1.18,.36,1);--m-out:cubic-bezier(.2,.8,.2,1)}
@supports (transition-timing-function:linear(0,1)){
  :root{--m-spring:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.4%,1.067,1.099 24.3%,1.103 25.6%,1.094 28%,1.051 32.6%,1.006 38.2%,.988 43.3%,.996 55.2%,1.001 65%,1)}
}

/* ---------- splash ---------- */
.splash.msp{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#0E2A1F;
  --msp-ink:#F6F1E7;transition:opacity 400ms var(--m-out),visibility 0s linear 400ms;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
@media (prefers-color-scheme:light){.splash.msp{background:#F6F1E7;--msp-ink:#1B4430}}
.splash.msp.out{opacity:0;visibility:hidden;pointer-events:none}
.msp-in{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,20px);transform:translateY(-3vh);max-width:100vw}
.msp-iso{width:min(30vw,200px);height:min(30vw,200px);overflow:visible}
.msp-strokes{stroke:var(--msp-ink)}
.msp-strokes>*{stroke-dasharray:1;stroke-dashoffset:0}
.msp-dots circle{fill:var(--msp-ink);transform-box:fill-box;transform-origin:center}
.msp-word{display:block;width:min(64vw,420px);margin:0 auto;height:auto;overflow:visible}
.msp-pen>*{fill:none;stroke:var(--msp-ink);stroke-width:12.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
/* rotating loading lines */
.msp-msg{margin:clamp(10px,3vh,28px) 0 0;min-height:20px;max-width:80vw;text-align:center;font:500 15px/20px var(--font-ui);color:var(--msp-ink);opacity:.82}
.msp-msg.in{animation:msp-line 256ms var(--m-out) both}
.msp-msg.swap{opacity:0;transform:translateY(-4px);transition:opacity 160ms ease,transform 160ms ease}
@keyframes msp-line{from{opacity:0;transform:translateY(6px)}to{opacity:.82;transform:none}}
.msp-animate .msp-msg.first{animation-delay:960ms}
/* animate (4 s): stroke draws 0-1.32 s, dots pop + type 1.08-3.52 s, wordmark is hand-drawn stroke by stroke 1.1-3.16 s, hold, crossfade 3.68-4.0 s */
.msp-animate .msp-strokes>*{stroke-dashoffset:1;animation:msp-draw 1040ms cubic-bezier(.45,.05,.25,1) forwards}
.msp-animate .msp-strokes>:nth-child(2){animation-delay:120ms;animation-duration:1160ms}
.msp-animate .msp-strokes>:nth-child(3){animation-delay:720ms;animation-duration:440ms}
.msp-animate .msp-strokes>:nth-child(4){animation-delay:960ms;animation-duration:360ms}
.msp-animate .msp-dots circle{opacity:0;transform:scale(.2);animation:msp-pop 256ms var(--m-spring) forwards,msp-type 640ms ease-in-out 3}
.msp-animate .msp-dots circle:nth-child(1){animation-delay:1080ms,1360ms}
.msp-animate .msp-dots circle:nth-child(2){animation-delay:1160ms,1464ms}
.msp-animate .msp-dots circle:nth-child(3){animation-delay:1240ms,1568ms}
/* handwriting (concept A): the pen traces m (stem, arch, arch), a (bowl, stem), t (stem, then cross), e; 1.1-3.16 s */
.msp-animate .msp-pen>*{opacity:0;stroke-dashoffset:1;animation:msp-pen calc(var(--d)*.6) cubic-bezier(.55,.08,.3,1) calc(var(--t)*.45) forwards}   /* compressed so the whole word is drawn (centered) before the demo dismisses the splash (#298) */
.msp-animate .msp-pen>[data-k=m1]{--t:1100ms;--d:130ms}
.msp-animate .msp-pen>[data-k=m2]{--t:1240ms;--d:200ms}
.msp-animate .msp-pen>[data-k=m3]{--t:1450ms;--d:200ms}
.msp-animate .msp-pen>[data-k=a1]{--t:1710ms;--d:340ms}
.msp-animate .msp-pen>[data-k=a2]{--t:2060ms;--d:150ms}
.msp-animate .msp-pen>[data-k=t1]{--t:2270ms;--d:260ms}
.msp-animate .msp-pen>[data-k=t2]{--t:2570ms;--d:150ms}
.msp-animate .msp-pen>[data-k=e1]{--t:2780ms;--d:380ms}
@keyframes msp-pen{0%{opacity:0;stroke-dashoffset:1}2%{opacity:1;stroke-dashoffset:.99}100%{opacity:1;stroke-dashoffset:0}}
.msp-animate .msp-iso{animation:msp-settle 560ms var(--m-spring) both}
@keyframes msp-draw{to{stroke-dashoffset:0}}
@keyframes msp-pop{to{opacity:1;transform:scale(1)}}
@keyframes msp-type{0%,100%{translate:0 0}40%{translate:0 -14px}}
@keyframes msp-letter{to{opacity:1;transform:none}}
@keyframes msp-settle{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
/* native wrappers: the OS launch screen already shows the drawn isotype on green, so start from it */
.splash.msp.msp-native{background:#0E2A1F;--msp-ink:#F6F1E7}
.msp-native .msp-strokes>*{animation:none!important;stroke-dashoffset:0}
.msp-native .msp-iso{animation:none!important}
/* the app scales in under the fading splash */
html.msp-on:not(.msp-done) .app{transform:scale(.985);opacity:.001}
html.msp-done .app{transition:transform 336ms var(--m-out),opacity 280ms var(--m-out)}

/* ---------- screen / tab transitions & cards ---------- */
#stage.m-enter>*{animation:m-view 260ms var(--m-out) both}
@keyframes m-view{from{opacity:0;transform:translate3d(0,6px,0)}}
.card.flying{transition:transform 260ms var(--m-out),opacity 220ms ease}

/* ---------- sheets: spring slide-up ---------- */
.sheet.open{transition:transform 520ms var(--m-spring),opacity 180ms ease,visibility 0s}
.sheet:not(.open){transition:transform 260ms var(--m-out),opacity 200ms ease,visibility 0s linear 260ms}

/* ---------- press feedback ---------- */
.m-press{transform:scale(.96);transition:transform 90ms ease-out!important}
button,.tab,.qchip{transition:transform 180ms var(--m-spring)}
.card .m-press{transform:scale(.97)}

/* ---------- skeleton shimmer (replaces the opacity pulse) ---------- */
.skel i{position:relative;overflow:hidden;animation:none}
.skel i::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:m-shim 1.3s ease-in-out infinite}
@media (prefers-color-scheme:light){.skel i::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)}}
@keyframes m-shim{to{transform:translateX(100%)}}

/* ---------- pull to refresh ---------- */
.m-ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 8px);z-index:30;display:flex;gap:4px;padding:10px 12px;border-radius:999px;
  background:var(--surface-2,#2C2C2E);box-shadow:0 6px 20px rgba(0,0,0,.35);transform:translate3d(-50%,0,0) scale(.6);opacity:0;pointer-events:none;will-change:transform,opacity}
.m-ptr i{width:6px;height:6px;border-radius:50%;background:var(--text-2,#aaa)}
.m-ptr.arm i{background:var(--accent,#30D158)}
.m-ptr.busy{transform:translate3d(-50%,72px,0)!important;opacity:1!important;transition:transform 200ms var(--m-out)}
.m-ptr.busy i{animation:spDotM 900ms ease-in-out infinite}.m-ptr.busy i:nth-child(2){animation-delay:.15s}.m-ptr.busy i:nth-child(3){animation-delay:.3s}
.m-ptr.done{opacity:0!important;transform:translate3d(-50%,0,0) scale(.6)!important;transition:transform 240ms var(--m-out),opacity 200ms ease}
@keyframes spDotM{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ---------- success check ---------- */
.m-ok{position:fixed;left:50%;top:42%;z-index:60;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;
  background:var(--accent,#30D158);display:grid;place-items:center;pointer-events:none;animation:m-ok 1050ms var(--m-out) forwards}
.m-ok svg{width:52px;height:52px;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.m-ok circle{display:none}
.m-ok path{stroke-dasharray:40;stroke-dashoffset:40;animation:msp-draw 360ms var(--m-out) 140ms forwards}
@keyframes m-ok{0%{opacity:0;transform:scale(.5)}22%{opacity:1;transform:scale(1.06)}34%{transform:scale(1)}78%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}

/* ---------- visual QA fixes ---------- */
html{background:var(--bg,#0E2A1F)}                                     /* overscroll / rubber-band area matches the theme */
*{scrollbar-color:var(--surface-3,#3A3A3C) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:8px;height:8px;background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3,#3A3A3C);border-radius:4px}
::-webkit-scrollbar-corner{background:transparent}
dialog{background:var(--surface,#1C1C1E);color:var(--text,#fff);border:0}
dialog::backdrop{background:rgba(0,0,0,.6)}
input,textarea,select{color-scheme:inherit}
.sh-drag{background:transparent!important}                           /* the invisible drag hit area was painted as a grey bar */

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .msp-msg,.msp-pen>*,#stage>*,.msp-iso,.m-ok,.skel i::after{animation:none!important}
  .sheet.open,.sheet:not(.open){transition-duration:1ms!important}
  .m-press{transform:none}
  html.msp-on:not(.msp-done) .app{transform:none}
}

/* reconnect toast (docs/specs/reconnect.md): small, non-blocking, theme-aware */
.reconnect-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 88px);transform:translate(-50%,8px);z-index:9999;padding:8px 14px;border-radius:999px;font:500 13px/18px var(--font-ui);background:var(--card,#1F3A2E);color:var(--text,#F3EAD3);box-shadow:0 4px 16px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity 200ms ease,transform 200ms ease}
.reconnect-toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.reconnect-toast{transition:none}}