/* Avatar micro-behaviours for both avatars (.m = U, .g = glyph).
   Avatar.micro(name, ms) puts x-<name> on the root <svg> next to its s-<state> class for a moment; the state
   keeps running underneath and any state change drops the overlay. Keyframes leave 0% and 100% out wherever
   they can, so a micro starts from, and settles back into, whatever the state shows.
   Whole-body moves (lean, tilt, hop, stretch, yawn) go on the root svg instead of .bob/.float: overriding the
   state animation there would restart it with a visible jump. On the root 1% = 2 viewBox units.
   The glyph is only moved and rotated, never scaled. Transforms and opacity only. */

.m[class*=" x-"]{transform-origin:50% 75%}
.g[class*=" x-"]{transform-origin:50% 80%}

/* ---- shared keyframes ---- */
@keyframes x-show{14%,80%{opacity:1}}
@keyframes x-hide{14%,80%{opacity:0}}
@keyframes x-hide-long{10%,86%{opacity:0}}
@keyframes x-pop{0%{opacity:0;transform:scale(.7)}16%{opacity:1;transform:scale(1.06)}28%,80%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.92)}}
@keyframes x-blink2{9%{transform:scaleY(.1)}20%{transform:scaleY(1)}33%{transform:scaleY(.1)}46%{transform:scaleY(1)}}
@keyframes x-blink1{38%{transform:scaleY(1)}42%{transform:scaleY(.1)}47%{transform:scaleY(1)}}
@keyframes x-lean-l{16%,76%{transform:rotate(-2deg)}}
@keyframes x-lean-r{16%,76%{transform:rotate(2deg)}}
@keyframes x-lean-lr{12%,32%{transform:rotate(-1.5deg)}48%,70%{transform:rotate(1.5deg)}86%{transform:rotate(0)}}
@keyframes x-look-u{16%,72%{transform:translate(1px,-4px)}}
@keyframes x-ponder{16%,78%{transform:rotate(-3deg)}}
@keyframes x-tilt{26%,68%{transform:rotate(6deg)}}
@keyframes x-bigeye{26%,68%{transform:scale(1.22)}}
@keyframes x-bounce{16%{transform:translateY(-1.5%)}34%{transform:translateY(0)}}
@keyframes x-yawn-o{0%{opacity:0;transform:scale(.3,.2)}12%{opacity:1;transform:scale(.4,.35)}46%,66%{opacity:1;transform:scale(.95,1.2)}86%{opacity:1;transform:scale(.4,.3)}100%{opacity:0;transform:scale(.3,.2)}}
@keyframes x-yawn-eyes{20%,70%{transform:scaleY(.35)}84%{transform:scaleY(.85)}}
@keyframes x-dotb{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-5px);opacity:1}}

/* ---- both avatars ---- */
/* double blink */
.m.x-blink2 .eyes,.g.x-blink2 .eyes{animation:x-blink2 .8s linear}

/* look up; while thinking (the gaze already points up) a smaller one plus a pondering lean */
.m.x-look-up .eye,.g.x-look-up .eye,.g.x-look-up .shades{animation:x-look-u 1.7s ease-in-out}
.m.s-thinking.x-look-up .eye{animation:xu-look-u2 2.2s ease-in-out}
.g.s-thinking.x-look-up .eye{animation:xg-look-u2 2.2s ease-in-out}
.m.s-thinking.x-look-up,.g.s-thinking.x-look-up{animation:x-ponder 2.2s ease-in-out}

/* look left / right / glance around: the body leans a little with the eyes, one blink on the way across */
.m.x-look-left,.g.x-look-left{animation:x-lean-l 1.7s ease-in-out}
.m.x-look-right,.g.x-look-right{animation:x-lean-r 1.7s ease-in-out}
.m.x-glance,.g.x-glance{animation:x-lean-lr 2.4s ease-in-out}
.m.x-glance .eyes,.g.x-glance .eyes{animation:x-blink1 2.4s linear}
.g.s-cool.x-glance .eyes{animation:none}

/* smile blip: happy eyes, big grin, a small bounce */
.m.x-smile,.g.x-smile{animation:x-bounce 1.5s ease-in-out}
.m.x-smile .m-d,.g.x-smile .m-smile,.m.x-smile .dot,.g.x-smile .dot{animation:x-hide 1.5s ease-in-out}
.m.x-smile .m-big,.g.x-smile .m-big{animation:x-pop 1.5s ease-out}
.m.x-smile .arc,.g.x-smile .arc{animation:x-show 1.5s ease-in-out}

/* curious tilt: head to the side, one eye bigger, small "o" mouth */
.m.x-tilt,.g.x-tilt{animation:x-tilt 2.2s ease-in-out}
.m.x-tilt .eye.l,.g.x-tilt .eye.l{animation:x-bigeye 2.2s ease-in-out}
.m.x-tilt .m-d,.g.x-tilt .m-smile,.g.x-tilt .m-big{animation:x-hide 2.2s ease-in-out}
.m.x-tilt .m-dot,.g.x-tilt .m-dot{animation:x-show 2.2s ease-in-out}

/* yawn: mouth opens slowly, eyes droop (with shades on, the shades lift a little instead) */
.m.x-yawn .m-d,.g.x-yawn .m-smile,.g.x-yawn .m-big{animation:x-hide-long 2.6s ease-in-out}
.m.x-yawn .eyes,.g.x-yawn .eyes{animation:x-yawn-eyes 2.6s ease-in-out}
.g.s-cool.x-yawn .eyes{animation:none}
.g.s-cool.x-yawn .shades{animation:xg-lift 2.6s ease-in-out}

/* typing variation while thinking: typing mouth, eyes drop a little, thought dots off */
.m.x-type .m-dot,.g.x-type .m-dot,.m.x-type .dots,.g.x-type .dots{opacity:0}
.m.x-type .m-typing,.g.x-type .m-typing{opacity:1}
.m.x-type .m-typing circle,.g.x-type .m-typing circle{transform-box:fill-box;transform-origin:center;animation:x-dotb 1.1s ease-in-out infinite}
.m.x-type .m-typing circle:nth-child(2),.g.x-type .m-typing circle:nth-child(2){animation-delay:.14s}
.m.x-type .m-typing circle:nth-child(3),.g.x-type .m-typing circle:nth-child(3){animation-delay:.28s}

/* ---- U only ---- */
@keyframes xu-look-l{14%,76%{transform:translate(-3px,.5px)}}
@keyframes xu-look-r{14%,76%{transform:translate(3px,.5px)}}
@keyframes xu-glance{12%,32%{transform:translate(-3px,.5px)}48%,70%{transform:translate(3px,.5px)}86%{transform:translate(0,0)}}
@keyframes xu-look-d{16%,82%{transform:translate(0,5px)}}
@keyframes xu-look-u2{16%,78%{transform:translate(1.5px,-3.5px)}}
.m.x-look-left .eye{animation:xu-look-l 1.7s ease-in-out}
.m.x-look-right .eye{animation:xu-look-r 1.7s ease-in-out}
.m.x-glance .eye{animation:xu-glance 2.4s ease-in-out}
.m.x-type .eye{animation:xu-look-d 2.6s ease-in-out}

/* hop: squash, jump, land */
@keyframes xu-hop{18%{transform:translateY(0) scale(1.07,.9)}42%{transform:translateY(-5%) scale(.95,1.07)}64%{transform:translateY(0) scale(1.06,.92)}82%{transform:translateY(0) scale(.98,1.02)}}
.m.x-hop{animation:xu-hop 1s ease-in-out}

/* stretch: squash, reach up with the eyes squeezed shut and a small "ah", settle */
@keyframes xu-stretch{22%{transform:scale(1.05,.93)}52%,68%{transform:scale(.95,1.09)}84%{transform:scale(1.02,.98)}}
@keyframes xu-ah{0%,100%{opacity:0;transform:scale(.4)}20%,78%{opacity:1;transform:scale(.6,.55)}}
.m.x-stretch{animation:xu-stretch 1.8s ease-in-out}
.m.x-stretch .dot,.m.x-stretch .m-d{animation:x-hide 1.3s ease-in-out .3s}
.m.x-stretch .arc{animation:x-show 1.3s ease-in-out .3s}
.m.x-stretch .m-o{animation:xu-ah 1.3s ease-in-out .3s}

/* yawn: a slow reach up and back, the mouth opens wide */
@keyframes xu-yawn{30%,64%{transform:scale(.98,1.04) rotate(-2deg)}}
.m.x-yawn{animation:xu-yawn 2.6s ease-in-out}
.m.x-yawn .m-o{animation:x-yawn-o 2.6s ease-in-out}

/* ---- glyph only ---- */
@keyframes xg-look-l{14%,76%{transform:translate(-4px,.5px)}}
@keyframes xg-look-r{14%,76%{transform:translate(4px,.5px)}}
@keyframes xg-glance{12%,32%{transform:translate(-4px,.5px)}48%,70%{transform:translate(4px,.5px)}86%{transform:translate(0,0)}}
@keyframes xg-look-d{16%,82%{transform:translate(0,2px)}}
@keyframes xg-look-u2{16%,78%{transform:translate(1px,-2.5px)}}
.g.x-look-left .eye,.g.x-look-left .shades{animation:xg-look-l 1.7s ease-in-out}
.g.x-look-right .eye,.g.x-look-right .shades{animation:xg-look-r 1.7s ease-in-out}
.g.x-glance .eye,.g.x-glance .shades{animation:xg-glance 2.4s ease-in-out}
.g.x-type .eye{animation:xg-look-d 2.6s ease-in-out}

/* hop, moved only */
@keyframes xg-hop{18%{transform:translateY(1%)}42%{transform:translateY(-5%)}64%{transform:translateY(.5%)}82%{transform:translateY(-.5%)}}
.g.x-hop{animation:xg-hop 1s ease-in-out}

/* yawn: body leans back, a smaller mouth than U's (the screen is shorter), shades lift clear of it */
@keyframes xg-yawn{30%,64%{transform:translateY(-1%) rotate(-2deg)}}
@keyframes xg-yawn-o{0%{opacity:0;transform:translateY(1px) scale(.3,.2)}12%{opacity:1;transform:translateY(1px) scale(.4,.35)}46%,66%{opacity:1;transform:translateY(1px) scale(.9,1.05)}86%{opacity:1;transform:translateY(1px) scale(.4,.3)}100%{opacity:0;transform:translateY(1px) scale(.3,.2)}}
@keyframes xg-lift{24%,70%{transform:translateY(-1.5px)}}
.g.x-yawn{animation:xg-yawn 2.6s ease-in-out}
.g.x-yawn .m-o{animation:xg-yawn-o 2.6s ease-in-out}

/* screen flicker: the face drops out twice and jitters, the screen glows faintly */
@keyframes xg-flicker{0%{opacity:1;transform:translateX(0)}10%{opacity:.15;transform:translateX(-1.5px)}18%{opacity:1;transform:translateX(0)}30%{opacity:.5;transform:translateX(1px)}40%{opacity:1;transform:translateX(0)}62%{opacity:.75}70%,100%{opacity:1;transform:translateX(0)}}
@keyframes xg-glow{10%{opacity:.12}18%{opacity:0}30%{opacity:.07}40%{opacity:0}}
.g.x-flicker .face{animation:xg-flicker .8s steps(1,end)}
.g.x-flicker .alert{animation:xg-glow .8s steps(1,end)}

/* scanline sweep down the screen */
@keyframes xg-scan{0%{opacity:0;transform:translateY(0)}14%{opacity:.85;transform:translateY(3px)}82%{opacity:.85;transform:translateY(32px)}100%{opacity:0;transform:translateY(34px)}}
.g.x-scan .scan{animation:xg-scan 1.5s ease-in-out}

/* peek over the shades: they slide down and dim so the eyes read as eyes, the eyes look left and right, the
   grin turns into a thin smirk (keeps it clear of the lowered shades), then everything goes back */
@keyframes xg-peek{20%,72%{transform:translateY(4px);opacity:.45}}
@keyframes xg-peek-eye{20%{transform:translate(0,-3px)}32%,44%{transform:translate(-2.5px,-3px)}56%,68%{transform:translate(2.5px,-3px)}80%{transform:translate(0,-1.5px)}}
.g.x-peek .shades{animation:xg-peek 2s ease-in-out}
.g.x-peek .eye{animation:xg-peek-eye 2s ease-in-out}
.g.x-peek .dot,.g.x-peek .m-smile{animation:x-show 2s ease-in-out}
.g.x-peek .m-big{animation:x-hide 2s ease-in-out}

@media (prefers-reduced-motion:reduce){.m,.g{animation:none!important}}