/* Marcus, animated. Layered inline SVG; transform and opacity only. */
:root{
  --mx-ease-out:cubic-bezier(0.23,1,0.32,1);
  --mx-ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
.mx{display:inline-block;line-height:0}
.mx svg{width:100%;height:auto;overflow:visible;display:block}
.mx .fb{transform-box:fill-box}

/* Idle: slow, near-imperceptible breathing; sheep blink now and then. */
.mx .mx-body{transform-origin:50% 100%;animation:mx-breathe 4.8s ease-in-out infinite}
.mx .mx-head{transform-origin:50% 100%;animation:mx-bob 4.8s ease-in-out infinite}
.mx .mx-eye{transform-origin:50% 50%;animation:mx-blink 5.6s linear infinite}
.mx .mx-sheep-b .mx-eye{animation-delay:-2.3s}
.mx .mx-sheep-c .mx-eye{animation-delay:-4.1s}
.mx .mx-ear{transform-origin:100% 50%;animation:mx-twitch 7.2s ease-in-out infinite}
.mx .mx-sheep-b .mx-ear{animation-delay:-3.1s}
.mx .mx-sheep-c .mx-ear{animation-delay:-5.4s}

@keyframes mx-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.025)}}
@keyframes mx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes mx-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(0.1)}}
@keyframes mx-twitch{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-14deg)}94%{transform:rotate(4deg)}}

/* Thinking: hood tilts as if pondering; thought dots rise above him. */
.mx .mx-hw{transform-origin:50% 100%}
/* Thinking tilt (owner likes it): driven from marcus.js as an SVG transform attribute, not a CSS transform, so Chrome does not composite it as a layer (a covering shape appeared during the CSS tilt). */
.mx .mx-dots{opacity:0;transition:opacity 0.2s var(--mx-ease-out)}
.mx[data-state="thinking"] .mx-dots{opacity:1}
.mx[data-state="thinking"] .mx-dot{transform-origin:50% 50%;animation:mx-dot 1.2s ease-in-out infinite}
.mx[data-state="thinking"] .mx-dot:nth-child(2){animation-delay:0.15s}
.mx[data-state="thinking"] .mx-dot:nth-child(3){animation-delay:0.3s}
@keyframes mx-dot{0%,100%{transform:translateY(0);opacity:0.55}50%{transform:translateY(-3px);opacity:1}}

/* While the head tilts or nods, the idle bob and breathing pause: an animated layer inside a tilted one drew wrongly in Chrome (owner's screenshots, 2026-10-28). */
.mx[data-state="thinking"] .mx-head,.mx[data-state="thinking"] .mx-body,.mx.mx-nod .mx-head,.mx.mx-nod .mx-body{animation:none}

/* Reply: one small nod. */
.mx.mx-nod .mx-hw{animation:mx-nod 0.42s var(--mx-ease-in-out)}
@keyframes mx-nod{0%{transform:rotate(0)}45%{transform:rotate(6deg) translateY(2px)}100%{transform:rotate(0)}}

/* Celebrate (rare): staff lifts, sheep hop. */
.mx .mx-sw{transform-origin:50% 100%}
.mx.mx-cheer .mx-sw{animation:mx-raise 0.8s var(--mx-ease-out)}
.mx.mx-cheer .mx-sheep-a{animation:mx-hop 0.55s var(--mx-ease-out)}
.mx.mx-cheer .mx-sheep-c{animation:mx-hop 0.55s var(--mx-ease-out) 0.06s}
.mx.mx-cheer .mx-sheep-b{animation:mx-hop 0.55s var(--mx-ease-out) 0.12s}
@keyframes mx-raise{0%{transform:rotate(0) translateY(0)}35%{transform:rotate(-12deg) translateY(-6px)}100%{transform:rotate(0) translateY(0)}}
@keyframes mx-hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-9px)}}

/* Reduced motion: no movement; thinking still legible as a gentle fade. */
@media (prefers-reduced-motion: reduce){
  .mx .mx-body,.mx .mx-head,.mx .mx-eye,.mx .mx-ear,.mx .mx-sw,.mx .mx-sheep-a,.mx .mx-sheep-b{animation:none}
  .mx .mx-hw{transition:none}
  .mx[data-state="thinking"] .mx-hw,.mx.mx-nod .mx-hw{transform:none;animation:none}
  .mx[data-state="thinking"] .mx-dot{animation:mx-fade 1.6s ease-in-out infinite}
  @keyframes mx-fade{0%,100%{opacity:0.45}50%{opacity:1}}
}