/* Character rig and the seven poses.
   The pose is a class on the actor's root <g>: pose-idle, pose-walk, pose-type,
   pose-think, pose-tool, pose-done, pose-error. Joints rotate around their own
   local origin (each joint group is translated to its pivot in the markup). */

.actor { --d: 0s; cursor: pointer; }
.actor .ua, .actor .fa, .actor .lg, .actor .hd, .actor .bd {
  transition: transform .32s cubic-bezier(.34, 1.45, .5, 1);
}
.actor .brow, .actor .m-open {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform .2s ease;
}
.actor .eyes {
  transform-box: fill-box;
  transform-origin: center;
  animation: a-blink 4.8s infinite;
  animation-delay: var(--d);
}

/* rest position */
.arm-l .ua { transform: rotate(6deg); }
.arm-l .fa { transform: rotate(-9deg); }
.arm-r .ua { transform: rotate(-6deg); }
.arm-r .fa { transform: rotate(9deg); }

.mouth { display: none; }
.m-smile { display: inline; }
.prop.tool-prop { display: none; }
.fx > g { display: none; }
.fx { pointer-events: none; }

/* things some people always carry in the left hand */
.carry .arm-l .ua { transform: rotate(9deg); }
.carry .arm-l .fa { transform: rotate(-98deg); }

/* ---------- idle ---------- */
.pose-idle .bd { animation: a-breathe 3.4s ease-in-out infinite; animation-delay: var(--d); }

/* ---------- walk ---------- */
.pose-walk .bd { animation: a-bob calc(.28s / var(--tempo, 1)) ease-in-out infinite alternate; }
.pose-walk .leg-l .lg { animation: a-step calc(.56s / var(--tempo, 1)) linear infinite; }
.pose-walk .leg-r .lg { animation: a-step calc(.56s / var(--tempo, 1)) linear infinite; animation-delay: calc(-.28s / var(--tempo, 1)); }
.pose-walk .arm-l .ua { animation: a-swing-l calc(.56s / var(--tempo, 1)) ease-in-out infinite; }
.pose-walk .arm-r .ua { animation: a-swing-r calc(.56s / var(--tempo, 1)) ease-in-out infinite; }
.carry.pose-walk .arm-l .ua { animation: none; }

/* ---------- type ---------- */
.pose-type .arm-l .ua { transform: rotate(16deg); }
.pose-type .arm-r .ua { transform: rotate(-16deg); }
.pose-type .arm-l .fa { animation: a-type-l .24s ease-in-out infinite; }
.pose-type .arm-r .fa { animation: a-type-r .24s ease-in-out infinite; animation-delay: -.12s; }
.pose-type .hd { transform: translateY(1.3px) rotate(2deg); }
.pose-type .prop.carried { display: none; }
.pose-type .bd { animation: a-breathe 2.2s ease-in-out infinite; }

/* ---------- think ---------- */
.pose-think .arm-r .ua { transform: rotate(40deg); }
.pose-think .arm-r .fa { transform: rotate(143deg); }
.pose-think .arm-l .ua { transform: rotate(13deg); }
.pose-think .arm-l .fa { transform: rotate(-86deg); }
.pose-think .hd { animation: a-ponder 3.2s ease-in-out infinite; }
.pose-think .bd { animation: a-breathe 3.4s ease-in-out infinite; }
.pose-think .fx-think { display: inline; animation: a-float 2.4s ease-in-out infinite; }
.pose-think .dot { animation: a-dot 1.2s ease-in-out infinite; }
.pose-think .dot.d2 { animation-delay: .18s; }
.pose-think .dot.d3 { animation-delay: .36s; }
.carry.pose-think .arm-l .ua { transform: rotate(9deg); }
.carry.pose-think .arm-l .fa { transform: rotate(-98deg); }

/* ---------- tool ---------- */
.pose-tool .arm-r .ua { transform: rotate(-62deg); }
.pose-tool .arm-r .fa { animation: a-tool .72s ease-in-out infinite; }
.pose-tool .prop.tool-prop { display: inline; }
.pose-tool .hd { transform: rotate(4deg); }
.pose-tool .bd { animation: a-breathe 1.8s ease-in-out infinite; }
.pose-tool .fx-tool { display: inline; }
.pose-tool .gear { animation: a-spin 1.8s linear infinite; }

/* ---------- done ---------- */
.pose-done .arm-l .ua { transform: rotate(152deg); }
.pose-done .arm-l .fa { transform: rotate(14deg); }
.pose-done .arm-r .ua { transform: rotate(-152deg); }
.pose-done .arm-r .fa { transform: rotate(-14deg); }
.pose-done .bd { animation: a-hop .56s ease-out 3; }
.pose-done .m-smile { display: none; }
.pose-done .m-open { display: inline; }
.pose-done .fx-done { display: inline; animation: a-pop .36s cubic-bezier(.3, 1.7, .5, 1); }
.pose-done .spark { animation: a-twinkle 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pose-done .spark.s2 { animation-delay: .25s; }
.pose-done .spark.s3 { animation-delay: .5s; }

/* ---------- error ---------- */
.pose-error .arm-l .ua { transform: rotate(3deg); }
.pose-error .arm-l .fa { transform: rotate(-3deg); }
.pose-error .arm-r .ua { transform: rotate(-3deg); }
.pose-error .arm-r .fa { transform: rotate(3deg); }
.pose-error .bd { transform: translateY(1.6px); }
.pose-error .hd { animation: a-shake .46s ease-in-out infinite; }
.pose-error .m-smile { display: none; }
.pose-error .m-frown { display: inline; }
.pose-error .brow-l { transform: rotate(-18deg); }
.pose-error .brow-r { transform: rotate(18deg); }
.pose-error .fx-error { display: inline; animation: a-alarm .7s ease-in-out infinite; }

/* talking: the mouth moves while a speech bubble is filling */
.talking .m-smile { display: none; }
.talking .m-open { display: inline; animation: a-talk .24s ease-in-out infinite alternate; }
.talking.pose-error .m-frown { display: none; }

/* wheelchair: roll, do not step */
.wc.pose-walk .lg, .wc.pose-walk .bd, .wc.pose-done .bd { animation: none; }
.wc.pose-walk .rim { stroke-dasharray: 5 4; animation: a-roll .5s linear infinite; }
.wc.pose-walk .arm-l .ua { animation: a-push-l .6s ease-in-out infinite; }
.wc.pose-walk .arm-r .ua { animation: a-push-r .6s ease-in-out infinite; }

/* Stop all: everything freezes in place */
.halted .actor *, .halted .actor { animation-play-state: paused !important; }

.avatar .bd, .avatar .eyes { animation: none !important; }

@keyframes a-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes a-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.1px); } }
@keyframes a-bob { from { transform: translateY(0) rotate(-1.6deg); } to { transform: translateY(-2.2px) rotate(1.6deg); } }
@keyframes a-step { 0%, 50%, 100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-5.5px) rotate(5deg); } }
@keyframes a-swing-l { 0%, 100% { transform: rotate(20deg); } 50% { transform: rotate(-10deg); } }
@keyframes a-swing-r { 0%, 100% { transform: rotate(10deg); } 50% { transform: rotate(-20deg); } }
@keyframes a-type-l { 0%, 100% { transform: rotate(-82deg); } 50% { transform: rotate(-70deg); } }
@keyframes a-type-r { 0%, 100% { transform: rotate(82deg); } 50% { transform: rotate(70deg); } }
@keyframes a-ponder { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(-3deg) translateY(-.6px); } }
@keyframes a-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes a-dot { 0%, 100% { opacity: .35; } 40% { opacity: 1; } }
@keyframes a-tool { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(-74deg); } }
@keyframes a-spin { to { transform: rotate(360deg); } }
@keyframes a-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-7px); } }
@keyframes a-pop { from { transform: scale(.2); } to { transform: scale(1); } }
@keyframes a-twinkle { 0%, 100% { transform: scale(.5); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes a-shake { 0%, 100% { transform: rotate(-5deg) translateY(1.4px); } 50% { transform: rotate(5deg) translateY(1.4px); } }
@keyframes a-alarm { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-2px) rotate(6deg); } }
@keyframes a-talk { from { transform: scaleY(.35); } to { transform: scaleY(1.05); } }
@keyframes a-roll { to { stroke-dashoffset: -9; } }
@keyframes a-push-l { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(-4deg); } }
@keyframes a-push-r { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(4deg); } }

@media (prefers-reduced-motion: reduce) {
  .pose-idle .bd, .actor .eyes, .pose-think .hd, .pose-think .fx-think { animation: none; }
}