/* creature.css — the robot's colours (pearl everywhere since 2026-09-23, the sign-in robot's and the
   wordmark's: Albert saw the chats' cream robots as "more yellow than the one on the login screen") and every move it makes (creature.js). A mood is data-mood on
   the <svg>. Parts that turn are wrapped so their pivot is the local origin (class .pv): shoulders,
   neck, hips, eyes. Delays read --mc-d, so a row of robots never moves in step. */

.mc{display:block;width:100%;height:100%;overflow:visible}
.mc .pv{transform-box:view-box;transform-origin:0 0}
.mc-f{fill:var(--mc-fill,#eef1f5)}
.mc-shade{fill:var(--mc-shade,#ccd4dc)}
.mc-ol{fill:none;stroke:var(--mc-line,#5b656f);stroke-width:.7;stroke-linejoin:round;stroke-linecap:round}
.mc-shadow{fill:#000;opacity:.28}
.mc-tie{fill:#34405a;stroke:#1f2533;stroke-width:.5;stroke-linejoin:round}
.mc-eye{fill:#0b0908}
.mc-bar{fill:none;stroke:#0b0908;stroke-width:1.3;stroke-linecap:round}
.mc-shut{fill:none;stroke:#0b0908;stroke-width:1.3;stroke-linecap:round;opacity:0}
.mc-zzz,.mc-bubble{opacity:0;transition:opacity .4s ease}
.mc-z path{fill:none;stroke:#f2f2f2;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mc-bubble circle,.mc-bubble ellipse{fill:#f1f3f6;stroke:#5b656f;stroke-width:.7}
.mc-bubble .mc-dots circle{fill:#4a535c;stroke:none}
/* ask: a speech bubble with a question mark */
.mc-ask{opacity:0;transition:opacity .3s ease}
.mc-ask>path:first-child{fill:#f1f3f6;stroke:#5b656f;stroke-width:.7;stroke-linejoin:round}
.mc-q{fill:none;stroke:#4a535c;stroke-width:1.4;stroke-linecap:round}
.mc-qdot{fill:#4a535c}
/* the side view's arms and legs: a pearl line with a grey edge, the far ones in shade */
.mc-limb,.mc-limb-ol{fill:none;stroke-linecap:round;stroke-linejoin:round}
.mc-limb{stroke:var(--mc-fill,#eef1f5)}
.mc-limb.far{stroke:var(--mc-shade,#ccd4dc)}
.mc-limb-ol{stroke:var(--mc-line,#5b656f)}

/* the desk: light oak on slim legs, a monitor turned towards the robot, a low keyboard, a mug; a
   grey office chair. Everything here also has to read on the chats look's near-black (#050505/#101010):
   the chair and the desk legs are mid-grey with a lit edge, the screen glows */
.mc-desk-top{fill:#dcbd92}
.mc-desk-edge{fill:#b89366}
.mc-desk-leg{fill:#6f747c}
.mc-desk-leg2{fill:#5d6168}
.mc-mon-foot{fill:#8d929a}
.mc-mon-neck{fill:#7b8088}
.mc-mon-side{fill:#6a6f77}
.mc-bezel{fill:#23262b;stroke:#8d929a;stroke-width:.45;stroke-linejoin:round}
.mc-screen{fill:#10233b}
.mc-l0{fill:#6fb2ff}
.mc-l1{fill:#8fdcb0}
.mc-l2{fill:#c9d1dc;opacity:.75}
.mc-cursor{fill:#e8f1ff}
.mc-keys{fill:#e4e6ea;stroke:#80858d;stroke-width:.35;stroke-linejoin:round}
.mc-mug{fill:#f3f3f1;stroke:#9a9690;stroke-width:.3}
.mc-mug-h{stroke:#9a9690;stroke-width:.6}
.mc-chair-back{fill:#5c626b;stroke:#2e3238;stroke-width:.6}
.mc-chair-seat{fill:#686e78;stroke:#2e3238;stroke-width:.6}
.mc-chair-dark{fill:#474c54}
.mc-chair-base{stroke:#555a62;stroke-width:2.6;stroke-linecap:round;fill:none}
.mc-chair-lit{stroke:#9aa1ab;stroke-width:.7;stroke-linecap:round;fill:none;opacity:.8}

/* ---- the two poses; entering work it drops into the chair, leaving it pops back up */
.mc-stand,.mc-sit{transition:opacity .28s ease}
.mc-sit{opacity:0}
.mc[data-mood="work"] .mc-stand{opacity:0}
.mc[data-mood="work"] .mc-sit{opacity:1}
.mc[data-mood="work"] .mc-seat{animation:mc-sitin .75s cubic-bezier(.3,1.5,.55,1) both}
.mc[data-mood="work"] .mc-chair{animation:mc-roll .75s cubic-bezier(.2,1.2,.4,1) both}
.mc:not([data-mood="work"]) .mc-stand{animation:mc-popup .55s cubic-bezier(.3,1.5,.55,1) both}
@keyframes mc-sitin{0%{transform:translate(0,-9px)}55%{transform:translate(0,1.2px)}100%{transform:none}}
@keyframes mc-roll{from{transform:translateX(5px)}to{transform:none}}
@keyframes mc-popup{0%{opacity:.2;transform:translateY(3px) scale(.97,.94)}60%{transform:translateY(-1px) scale(1,1.02)}100%{opacity:1;transform:none}}
.mc .mc-stand{transform-box:view-box;transform-origin:50px 91px}

/* ---- everyone blinks, now and then twice */
.mc-blink{animation:mc-blink 5.2s var(--mc-d,0s) infinite}
@keyframes mc-blink{0%,46%,50%,93%,100%{transform:none}48%{transform:scaleY(.1)}95%{transform:scaleY(.1)}97%{transform:none}98.5%{transform:scaleY(.1)}}

/* all turning parts ease between moods */
.mc-armL,.mc-armR,.mc-head,.mc-face{transition:transform .5s cubic-bezier(.3,1.3,.5,1)}

/* ---- chill: breathing, a slow shift of weight, arms following, head lagging, a look about */
.mc[data-mood="chill"] .mc-sway{animation:mc-sway 6.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="chill"] .mc-breathe,.mc[data-mood="think"] .mc-breathe,.mc[data-mood="ask"] .mc-breathe{animation:mc-breathe 3.2s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="chill"] .mc-armL{animation:mc-swingL 6.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="chill"] .mc-armR{animation:mc-swingR 6.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="chill"] .mc-head{animation:mc-bob 6.4s calc(var(--mc-d,0s) - .35s) ease-in-out infinite}
.mc[data-mood="chill"] .mc-face{animation:mc-look 11s var(--mc-d,0s) ease-in-out infinite}
@keyframes mc-sway{0%,100%{transform:none}25%{transform:rotate(-2.2deg)}75%{transform:rotate(2.2deg)}}
@keyframes mc-breathe{0%,100%{transform:none}50%{transform:scale(1.012,1.028)}}
@keyframes mc-swingL{0%,100%{transform:rotate(0)}25%{transform:rotate(4deg)}75%{transform:rotate(-3deg)}}
@keyframes mc-swingR{0%,100%{transform:rotate(0)}25%{transform:rotate(3deg)}75%{transform:rotate(-4deg)}}
@keyframes mc-bob{0%,100%{transform:none}25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}
@keyframes mc-look{0%,26%,54%,58%,100%{transform:none}32%,48%{transform:translate(-2.4px,.2px)}64%,80%{transform:translate(2px,-.4px)}86%,94%{transform:translate(0,-1px)}}

/* ---- sleep: standing, head dropping and catching itself, slow deep breaths, z's rising */
.mc[data-mood="sleep"] .mc-head{animation:mc-nod 5.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="sleep"] .mc-breathe{animation:mc-deep 5.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="sleep"] .mc-blink,.mc[data-mood="sleep"] .mc-bar{opacity:0}
.mc[data-mood="sleep"] .mc-shut{opacity:1}
.mc[data-mood="sleep"] .mc-face{transform:translateY(1px)}
.mc[data-mood="sleep"] .mc-armL{transform:rotate(-3deg)}
.mc[data-mood="sleep"] .mc-armR{transform:rotate(3deg)}
.mc[data-mood="sleep"] .mc-zzz{opacity:1}
.mc[data-mood="sleep"] .mc-z{opacity:0;animation:mc-z 4.2s linear infinite}
.mc[data-mood="sleep"] .mc-z1{animation-delay:calc(var(--mc-d,0s) - 0s)}
.mc[data-mood="sleep"] .mc-z2{animation-delay:calc(var(--mc-d,0s) - 1.4s)}
.mc[data-mood="sleep"] .mc-z3{animation-delay:calc(var(--mc-d,0s) - 2.8s)}
@keyframes mc-nod{0%{transform:rotate(7deg)}55%{transform:rotate(13deg) translateY(1.2px)}64%{transform:rotate(3deg)}72%{transform:rotate(8deg)}100%{transform:rotate(7deg)}}
@keyframes mc-deep{0%,100%{transform:none}45%{transform:scale(1.02,1.045)}}
@keyframes mc-z{0%{opacity:0;transform:translate(0,2px) scale(.4)}15%{opacity:1}50%{transform:translate(6px,-5px) scale(.85)}85%{opacity:.85}100%{opacity:0;transform:translate(11px,-12px) scale(1.2)}}

/* ---- think: no arm up (Albert, 2026-09-22) — eyes up, a slow tilt, the bubble's dots in turn */
.mc[data-mood="think"] .mc-head{transform:rotate(-6deg)}
.mc[data-mood="think"] .mc-face{transform:translate(-1.6px,-2.2px)}
.mc[data-mood="think"] .mc-sway{animation:mc-ponder 5s var(--mc-d,0s) ease-in-out infinite alternate}
.mc[data-mood="think"] .mc-bubble{opacity:1;transition-delay:.25s}
.mc[data-mood="think"] .mc-dots circle{animation:mc-dot 1.4s ease-in-out infinite}
.mc[data-mood="think"] .mc-dots circle:nth-child(2){animation-delay:.22s}
.mc[data-mood="think"] .mc-dots circle:nth-child(3){animation-delay:.44s}
@keyframes mc-scratch{from{transform:rotate(-146deg)}to{transform:rotate(-154deg)}}
@keyframes mc-ponder{from{transform:rotate(-1.2deg)}to{transform:rotate(1.4deg)}}
@keyframes mc-dot{0%,70%,100%{opacity:.25;transform:none}35%{opacity:1;transform:translateY(-.8px)}}

/* ---- observe: the chief of staff while its employees work — it stands and keeps an eye on them,
   looking slowly from one side to the other (Albert, 2026-09-22: "it observes, like in Grok Bot") */
.mc[data-mood="observe"] .mc-breathe{animation:mc-breathe 3.6s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="observe"] .mc-head{animation:mc-observe 8s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="observe"] .mc-face{animation:mc-scan 8s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="observe"] .mc-armL{transform:rotate(2deg)}
.mc[data-mood="observe"] .mc-armR{transform:rotate(-2deg)}
@keyframes mc-observe{0%,100%{transform:rotate(-4deg)}20%,30%{transform:rotate(-4deg)}50%,62%{transform:rotate(4deg)}82%{transform:rotate(-1deg)}}
@keyframes mc-scan{0%,100%{transform:translate(-2.6px,.3px)}20%,30%{transform:translate(-2.8px,.6px)}50%,62%{transform:translate(2.4px,-.2px)}82%{transform:translate(0,-.8px)}}

/* ---- ask: it needs you — it stands still, head a little on one side, and a question mark
   comes up now and then (it used to wave; Albert did not want that) */
.mc[data-mood="ask"] .mc-head{transform:rotate(-5deg)}
.mc[data-mood="ask"] .mc-ask{opacity:1;animation:mc-askpop 3.6s var(--mc-d,0s) ease-in-out infinite}
@keyframes mc-askpop{0%,100%{transform:none}8%{transform:translateY(-1px)}16%{transform:none}}

/* ---- work: typing hands, a nodding head reading along, legs swinging under the chair */
.mc[data-mood="work"] .mc-tapA{animation:mc-tap .26s ease-in-out infinite alternate}
.mc[data-mood="work"] .mc-tapB{animation:mc-tap .26s ease-in-out -.13s infinite alternate}
.mc[data-mood="work"] .mc-type-head{animation:mc-typebob .52s ease-in-out infinite alternate}
.mc[data-mood="work"] .mc-read{animation:mc-read 3.4s var(--mc-d,0s) ease-in-out infinite}
.mc[data-mood="work"] .mc-dangle{animation:mc-dangle 1.9s var(--mc-d,0s) ease-in-out infinite alternate}
.mc[data-mood="work"] .mc-code{animation:mc-scroll 4s linear infinite}
.mc[data-mood="work"] .mc-cursor{animation:mc-cursor 1s steps(1) infinite}
@keyframes mc-tap{from{transform:rotate(-4deg)}to{transform:rotate(2.5deg)}}
@keyframes mc-typebob{from{transform:none}to{transform:translateY(.6px) rotate(-1deg)}}
@keyframes mc-read{0%,100%{transform:none}30%{transform:translate(.8px,.4px)}60%{transform:translate(.3px,.9px)}}
@keyframes mc-dangle{from{transform:rotate(-3deg)}to{transform:rotate(4deg)}}
@keyframes mc-scroll{from{transform:none}to{transform:translateY(-20.7px)}}
@keyframes mc-cursor{0%{opacity:1}50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .mc *,.mc{animation:none!important;transition:none!important}
  .mc[data-mood="sleep"] .mc-z2{opacity:1;transform:translate(6px,-5px)}
  .mc[data-mood="think"] .mc-dots circle{opacity:1}
}