/* MT, the orange wheel (mt.js). Moves are in the artwork's own pixels:
   the picture is 1300 units across, so at the 52px size 25 units is about 1px. */

.mtc{display:block;position:relative;line-height:0}
.mtc-svg{display:block;width:100%;height:100%;overflow:visible}
.mtc-all,.mtc-shake,.mtc-face,.mtc-size,.mtc-eye,.mtc-gear,.mtc-teeth,.mtc-spark path,.mtc-env-in,.mtc-flag-in,.mtc-pulse circle,.mtc-ask-ring,.mtc-ask-lid{transform-box:fill-box;transform-origin:center}
.mtc-ask-lid{transform-origin:50% 0;transform:scaleY(0)}
.mtc-warn .mtc-flag-in{transform-origin:50% 100%}
.mtc-all{transform-origin:50% 100%}

/* parts that only show in some faces */
.mtc-eyeR,.mtc-happy,.mtc-brows,.mtc-env,.mtc-spark,.mtc-flag,.mtc-speed,.mtc-pulse{opacity:0;transition:opacity .18s ease}
.mtc-wink,.mtc-eyeL,.mtc-tread{transition:opacity .12s ease}
.mtc-size{transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.mtc-eye{transition:transform 70ms ease-in-out}
.mtc-face{transition:transform .3s ease}
/* the gear teeth sit tucked behind the tire at rest; they come out when MT works */
.mtc-gear{opacity:0;transform:scale(.7);transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .2s ease}

/* blinking (the open eye; the wink stays a wink) */
.mtc.mtc-blink .mtc-eye{transform:scaleY(.08)}
/* now and then, resting, the wink opens for a moment */
.mtc.mtc-wink-open .mtc-wink{opacity:0}
.mtc.mtc-wink-open .mtc-eyeR{opacity:1}

/* IDLE — smiling, resting and ready */
.mtc[data-face=idle] .mtc-all{animation:mtc-breathe 4s ease-in-out infinite}

/* AWAKE — heard you: one hop, the wink opens, eyes wide */
.mtc[data-face=awake] .mtc-all{animation:mtc-wake .55s cubic-bezier(.3,1.4,.5,1) 1}
.mtc[data-face=awake] .mtc-wink{opacity:0}
.mtc[data-face=awake] .mtc-eyeR{opacity:1}
.mtc[data-face=awake] .mtc-size{transform:scale(1.14)}
.mtc[data-face=awake] .mtc-svg{filter:drop-shadow(0 0 5px rgba(232,115,42,.75))}
.mtc-svg{transition:filter .25s ease}

/* WORKING — the tire turns into a gear and spins; an orange pulse goes out around the wheel and
   speed marks flick past. The face stays the same (smile and wink). The gear only shows here. */
.mtc[data-face=working] .mtc-all{animation:mtc-throb 1.6s ease-in-out infinite}
.mtc[data-face=working] .mtc-tread{opacity:0}
.mtc[data-face=working] .mtc-gear{opacity:1;transform:scale(1)}
.mtc[data-face=working] .mtc-teeth{animation:mtc-spin 2.4s linear infinite}
.mtc[data-face=working] .mtc-pulse{opacity:1;transition:none}
.mtc[data-face=working] .mtc-pulse circle{animation:mtc-glow 1.6s ease-out infinite both}
.mtc[data-face=working] .mtc-svg{filter:drop-shadow(0 0 6px rgba(232,115,42,.55))}
.mtc[data-face=working] .mtc-speed{opacity:1;transition:none}
.mtc[data-face=working] .mtc-speed>g{animation:mtc-whoosh 1.2s ease-out infinite both}
.mtc[data-face=working] .mtc-speed2{animation-delay:.4s!important}
.mtc[data-face=working] .mtc-speed3{animation-delay:.8s!important}

/* DONE — happy eyes, two small hops, a little sparkle */
.mtc[data-face=done] .mtc-all{animation:mtc-hop2 1.1s ease-out 1}
.mtc[data-face=done] .mtc-eyeL,.mtc[data-face=done] .mtc-eyeR,.mtc[data-face=done] .mtc-wink{opacity:0}
.mtc[data-face=done] .mtc-happy{opacity:1}
.mtc[data-face=done] .mtc-spark{opacity:1}
.mtc[data-face=done] .mtc-spark path{animation:mtc-sparkle 1.1s ease-out 1 both}
.mtc[data-face=done] .mtc-spark path:nth-child(2){animation-delay:.15s}
.mtc[data-face=done] .mtc-spark path:nth-child(3){animation-delay:.3s}

/* MAIL — rings like a phone, envelope, orange pulse; then rests with a badge */
.mtc[data-face=mail] .mtc-all{animation:mtc-ring 1.8s ease-in-out 1}
.mtc[data-face=mail] .mtc-wink{opacity:0}
.mtc[data-face=mail] .mtc-eyeR{opacity:1}
.mtc[data-face=mail] .mtc-size{transform:scale(1.16)}
.mtc[data-face=mail] .mtc-env{opacity:1;transition:none}
.mtc[data-face=mail] .mtc-env-in{animation:mtc-env 1.8s ease-out 1 both}
.mtc[data-face=mail] .mtc-pulse{opacity:1;transition:none}
.mtc[data-face=mail] .mtc-pulse circle{animation:mtc-ping .9s ease-out 2 both}

/* WAITING — needs your eyes (a yes): attentive eyes; an eye badge blinks, its blue ring turns */
.mtc[data-face=waiting] .mtc-all{animation:mtc-breathe 4s ease-in-out infinite}
.mtc[data-face=waiting] .mtc-wink{opacity:0}
.mtc[data-face=waiting] .mtc-eyeR{opacity:1}
.mtc[data-face=waiting] .mtc-size{transform:scale(1.06)}
.mtc[data-face=waiting] .mtc-face{transform:translateY(-14px)}
.mtc[data-face=waiting] .mtc-ask{opacity:1}
.mtc[data-face=waiting] .mtc-ask .mtc-flag-in{animation:mtc-pop .45s cubic-bezier(.3,1.4,.5,1) 1 both}
.mtc[data-face=waiting] .mtc-ask-ring{animation:mtc-spin 2.4s linear infinite}
.mtc[data-face=waiting] .mtc-ask-lid{animation:mtc-lid 3.2s ease-in-out .6s infinite}

/* ERROR — needs attention: concerned brows; the red-bordered "!" twists and shakes, the wheel only dips */
.mtc[data-face=error] .mtc-all{animation:mtc-dip .6s ease-out 1}
.mtc[data-face=error] .mtc-wink{opacity:0}
.mtc[data-face=error] .mtc-eyeR{opacity:1}
.mtc[data-face=error] .mtc-size{transform:scale(.9)}
.mtc[data-face=error] .mtc-brows{opacity:1}
.mtc[data-face=error] .mtc-warn{opacity:1}
.mtc[data-face=error] .mtc-warn .mtc-flag-in{animation:mtc-pop .45s cubic-bezier(.3,1.4,.5,1) 1 both,mtc-twist 1.1s ease-in-out .5s infinite}

@keyframes mtc-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-30px)}}
@keyframes mtc-wake{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-95px) scale(1.03)}72%{transform:translateY(11px) scale(.995)}100%{transform:translateY(0) scale(1)}}
@keyframes mtc-throb{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes mtc-glow{0%{opacity:.85;transform:scale(.82)}100%{opacity:0;transform:scale(1.18)}}
@keyframes mtc-whoosh{0%{opacity:0}25%{opacity:1}70%{opacity:.7}100%{opacity:0}}
@keyframes mtc-hop2{0%{transform:translateY(0)}20%{transform:translateY(-108px)}40%{transform:translateY(0)}60%{transform:translateY(-60px)}80%,100%{transform:translateY(0)}}
@keyframes mtc-sparkle{0%{opacity:0;transform:scale(.3) rotate(0)}30%{opacity:1;transform:scale(1.15) rotate(20deg)}70%{opacity:1;transform:scale(1) rotate(30deg)}100%{opacity:0;transform:scale(.8) rotate(40deg)}}
@keyframes mtc-ring{0%{transform:translateY(0) rotate(0)}9%{transform:translateY(-68px) rotate(0)}17%{transform:translateY(0) rotate(0)}27%{transform:rotate(3deg)}37%{transform:rotate(-3deg)}47%{transform:rotate(3deg)}57%{transform:rotate(-3deg)}68%{transform:rotate(2deg)}79%{transform:rotate(-2deg)}90%,100%{transform:rotate(0)}}
@keyframes mtc-env{0%{opacity:0;transform:translateY(60px) scale(.2)}22%{opacity:1;transform:translateY(0) scale(1.12)}32%{transform:scale(1)}85%{opacity:1}100%{opacity:0}}
@keyframes mtc-ping{0%{opacity:.75;transform:scale(.85)}100%{opacity:0;transform:scale(1.15)}}
@keyframes mtc-pop{0%{opacity:0;transform:scale(.3)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes mtc-spin{to{transform:rotate(360deg)}}
@keyframes mtc-lid{0%,86%,100%{transform:scaleY(0)}90%,93%{transform:scaleY(1)}}
@keyframes mtc-twist{0%,55%,100%{transform:rotate(0)}8%{transform:rotate(-9deg) translateX(-6px)}16%{transform:rotate(8deg) translateX(6px)}24%{transform:rotate(-7deg) translateX(-5px)}32%{transform:rotate(6deg) translateX(4px)}40%{transform:rotate(-3deg)}48%{transform:rotate(2deg)}}
@keyframes mtc-dip{0%{transform:translateY(0)}30%{transform:translateY(30px)}100%{transform:translateY(0)}}

/* reduced motion: nothing moves; each face still reads at a glance (gear, envelope, eye, !) */
@media (prefers-reduced-motion: reduce){
  .mtc,.mtc *{animation:none!important;transition:none!important}
}
/* page out of sight: stop every animation (battery) */
.mtc-paused .mtc,.mtc-paused .mtc *{animation-play-state:paused!important}

/* ---------- MT at the top of MT's panel ---------- */
.mt-head[data-mt-head]{cursor:pointer}
.mtc-wrap{position:relative;flex:0 0 auto;width:52px;height:52px;margin:-4px 0}
.mtc-wrap .mtc{width:100%;height:100%}
.mtc-badge{position:absolute;top:-2px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#C4553D;color:#fff;font:700 11px/20px Inter,system-ui,sans-serif;text-align:center;border:2px solid var(--navy,#0B1B33);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mt-text{flex:1;min-width:0;display:flex;flex-direction:column}
.mtc-status{font-size:12.5px;color:var(--gold-soft,#E3C766);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtc-status:empty{display:none}
.mt-head[data-mt-face=error] .mtc-status{color:#F2B233}
@media (max-width:899px){
  .mtc-wrap{width:42px;height:42px;margin:-7px 0} /* MT stays big; the bar stays as slim as before */
  .mt-text{flex:0 1 auto}
  .mt-head:not([data-mt-face=idle]) .mt-peek{display:none!important}
  .mt-head[data-mt-face=idle] .mt-text{display:none}
  .mt-head:not([data-mt-face=idle]) .mt-text{flex:1}
}

/* MT pictures that stand still (top bar, Start, the chat, the driver page, the lock screen) */
.mt-pic{display:block;object-fit:contain}
.msg .av.av-mt{background:none!important;border:0!important;border-radius:0!important}
.msg .av.av-mt img{width:100%;height:100%;object-fit:contain;display:block}
.crest.mt-crest{width:150px;height:150px;border:0;border-radius:0;background:none;box-shadow:none;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5))}
.crest.mt-crest .mtc{width:100%;height:100%}