/* Tethro motion engine v2, CSS half (LYRA, 10/5/2026).
   Movement lives in motion.js as springs. CSS keeps only what does not travel: color and
   opacity on hover/focus, the loops (spinner, thinking), and the classes the engine writes. */
:root{
  --slow:1;
  --t-instant:calc(90ms * var(--slow));
  --t-quick:calc(160ms * var(--slow));
  --e-out:cubic-bezier(.2,.8,.2,1);
}

/* text morph */
.mo-text{display:inline-flex;vertical-align:bottom}
.mo-text-box{position:relative;display:inline-flex;white-space:pre;overflow:visible}
.mo-ch{display:inline-block;white-space:pre;will-change:transform,opacity}

/* digits */
.mo-digits{display:inline-flex;font-variant-numeric:tabular-nums}
.mo-dc{position:relative;display:inline-block;height:1.2em;line-height:1.2em;overflow:hidden;vertical-align:bottom}
.mo-dc.lit{overflow:visible}
.mo-dcol{display:flex;flex-direction:column;will-change:transform}
.mo-dcol>span{display:block;height:1.2em;line-height:1.2em;text-align:center}
.mo-dlit{display:block;height:1.2em;line-height:1.2em}

/* morph shell faces */
.mo-shell .mo-face{display:flex!important;align-items:center;justify-content:center}

/* loops */
@keyframes mo-spin{to{transform:rotate(360deg)}}
@keyframes mo-breathe{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1);opacity:1}}
@keyframes mo-sheen{from{background-position:100% 0}to{background-position:0 0}}
@keyframes mo-draw{from{stroke-dashoffset:var(--len,24)}to{stroke-dashoffset:0}}
.mo-skel{background:linear-gradient(90deg,#f0f0f0 0%,#e3e3e3 50%,#f0f0f0 100%) 0 0/300% 100%;animation:mo-sheen calc(1300ms * var(--slow)) ease-in-out infinite;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  .mo-loop,.mo-skel{animation:none!important}
}

/* send capsule (motion.js sendCapsule): label, then the work's tether running mark to mark, then who it is for */
.mo-cap{display:flex;align-items:center;gap:14px;padding:0 18px 0 20px;color:#fff;font-size:13px;white-space:nowrap;box-sizing:border-box}
.mo-cap-l{flex:none;font-weight:500;min-width:0}
.mo-cap-run{position:relative;flex:1;min-width:110px;height:100%;display:flex;align-items:center;justify-content:space-between}
.mo-cap-s{position:absolute;left:16px;right:16px;top:0;bottom:0;z-index:0}
.mo-cap-a,.mo-cap-b{position:relative;z-index:1;display:grid}
.mo-cap-n{flex:none;font-size:12.5px;color:#bdbdbd}
.mo-node{width:32px;height:32px;border-radius:16px;background:#f6f6f6;color:#111;display:grid;place-items:center;box-shadow:0 0 0 3px #101010,0 0 0 4px rgba(255,255,255,.22);transition:background-color calc(160ms * var(--slow)) linear,color calc(160ms * var(--slow)) linear}
.mo-node b{font-size:10.5px;font-weight:600}
.mo-node.ok{background:#68c480;color:#0b0b0b;box-shadow:0 0 0 3px #101010,0 0 0 4px rgba(104,196,128,.55)}
.mo-node.bad{background:#ec786e;color:#0b0b0b;box-shadow:0 0 0 3px #101010,0 0 0 4px rgba(236,120,110,.55)}