/* latin */
@font-face {
  font-family: 'Baloo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Baloo Regular'), local('Baloo-Regular'), url(baloo.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------- Colors ------- */
:root{
  --color: #FFF8DF;
  --background-color: #F2D7BF;
  --shadow: #DBBA92;
  --button-color: #DBBA92;
  --button-background-color: #FFF8DF;
  --button-shadow: #FCF0C4;
  --star: #FFED90;
  --moon-button-background-color: #231E5A;
  --moon-button-shadow: #030217;
  --sun-button-background-color: #ADD3FF;
  --sun-button-shadow: #569BEB;
  --fur: #E49B45;
  --fur-shadow: #C57415;
  --face-hair: #FFBB6A;
  --face: #FFD7A6;
  --eyes: #363636;
  --mouth: #363636;
  --tongue: #FFAFAF;
  --cheeks: #FFAFAF;
  --nose: #363636;
  --tear: #91a9ff;
  --moon-light: #EBF0E1;
  --moon-dark: #BCC1B2;
  --moon-crater-light: #DADFD0;
  --moon-crater-dark: #A4AB96;
  --sun-outside: #FFE9B1;
  --sun-middle: #FDF7E9;
  --sun-center: #FFFFFF;
  --fart-cloud: #A0C633;
  --hearts: #ff7373;
  --cookie-light: #EEA045;
  --cookie-dark: #E79536;
  --cookie-chip: #7D3535;
  --ping-pong-paddle-light: #CB2626;
  --ping-pong-paddle-dark: #9B1010;
  --ping-pong-paddle-handle: #BD7B55;
  --ping-pong-ball: #FFFFFF;
  --coffee-mug-light: #F26B41;
  --coffee-mug-dark: #E05428;
  --coffee-mug-steam: #FFFFFF;
  --yarn-light: #2C58F2;
  --yarn-medium: #1740CE;
  --yarn-dark: #0B2DA5;
  --yarn-needles: #7E8087;
}

.fur--white{
  --fur: #FFFFFF;
  --fur-shadow: #ccced4;
  --face-hair: #FFFFFF;
}

[data-edit=faceColor] .color-circle{
  background-color: var(--face);
}

[data-edit=furColor] .color-circle{
  background-color: var(--fur);
}

.fur--green{
  --fur: #4c475e;
  --fur-shadow: #322f3d;
  --face-hair: #9676c3;
}

.fur--default{

}

.face--white{
  --face: #FFFFFF;
  --nose: #FFAFAF;
}

.face--green{
  --face: #ffd3fd;
  --nose: #e674fd;
}

.face--default{

}

/* ------- Base ------- */
:root {
  font-size: 1vh;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none;
}

::-webkit-scrollbar {
  display: none;
}

html{
  height: 100%;
  font-family: 'Baloo';
}

body{
  height: 100%;
  margin: 0;
  font-size: 10rem;
  color: var(--color);
  background-color: var(--background-color);
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
}

.menu{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.game,
.editor{
  width: 35rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 25rem;
}

.actions .editor,
.actions--editing .game{
  display: none;
}

.actions--editing .editor{
  display: flex;
}

.button{
  width: 10rem;
  height: 10rem;
  padding: 1rem;
  color: var(--button-color);
  background-color: var(--button-background-color);
  box-shadow: -.2rem 1rem var(--button-shadow);
  border-radius: 3rem;
  font-size: 5rem;
  cursor: pointer;
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button svg{
  width: 100%;
  height: 100%;
}

.button-animate{
  animation-name: button;
  animation-duration: 400ms;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: paused;
}

.performing .button-action--awake{
  display: none;
}

.performing .button-action--sleep{
  display: none;
}

.button-action--awake .button{
  background-color: var(--sun-button-background-color);
  box-shadow: -.2rem 1rem var(--sun-button-shadow);
}

.button-action--sleep .button{
  background-color: var(--moon-button-background-color);
  box-shadow: -.2rem 1rem var(--moon-button-shadow);
}

.color-circle{
  border: .4rem solid #969696;
  width: 4rem;
  height: 4rem;
  border-radius: 100%;
}

.active{
  animation-play-state: running;
}

.button-animate:nth-child(1) .button{
  transform: rotate(5deg);
}

.button-animate:nth-child(2) .button{
  transform: rotate(-5deg);
}

.button-animate:nth-child(3) .button{
  transform: rotate(8deg);
}

.button-animate:nth-child(4) .button{
  transform: rotate(-3deg);
}

.button-animate:nth-child(5) .button{
  transform: rotate(8deg);
}

.button-animate:nth-child(6) .button{
  transform: rotate(-5deg);
}

.game .button-animate:nth-child(2) .button{
  transform: rotate(5deg);
}

.editor .button-animate:nth-child(5){
  margin-right: 12.5rem;
}

.debug{
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  padding: 1rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  font-family: monospace;
  font-size: 16px;
}

.debug-stat{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

progress {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 20rem;
  height: 1rem;
  border-radius: 1rem;
  background-color: #4e4e4e;
  color: #1458f0;
}

progress::-webkit-progress-bar {
  background-color: #4e4e4e;
  border-radius: 1rem;
}

progress::-webkit-progress-value {
  background-color: #1458f0;
  border-radius: 1rem;
}

progress::-moz-progress-bar {
  background-color: #1458f0;
  border-radius: 1rem;
}

.debug label{
  padding: 1rem;
}

.stage{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.canvas{
  width: calc(25rem * 1.5);
  height: calc(30rem * 1.5);
  position: relative;
}

.canvas svg{
  width: 100%;
  height: 100%;
}

.hide{
  display: none;
}

.controls{
  display: flex;
  font-size: 6rem;
}

.score{
  display: flex;
  justify-content: center;
}

.score svg{
  width: 8.5rem;
  height: 8.5rem;
}

/* ------- Rig ------- */
.rig, .armature{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.armature{
  transition: transform 1s ease-in-out;
}

.armature-right-hand,
.armature-paddle,
.armature-right-needle{
  transform-origin: calc(4.7rem * 1.5) calc(17.8rem * 1.5);
}

.armature-left-hand,
.armature-cookie,
.armature-left-needle{
  transform-origin: calc(20.2rem * 1.5) calc(17.8rem * 1.5);
}

.armature-right-foot{
  transform-origin: calc(8.1rem * 1.5) calc(23.6rem * 1.5);
}

.armature-left-foot{
  transform-origin: calc(17.1rem * 1.5) calc(23.6rem * 1.5);
}

.armature-feet{
  transform-origin: calc(12.4rem * 1.5) calc(23.6rem * 1.5);
}

.armature-shadow{
  transform-origin: calc(12.4rem * 1.5) calc(26rem * 1.5);
}

.armature-face{
  transform-origin: calc(12.4rem * 1.5) calc(15rem * 1.5);
}

.armature-left-tear{
  transform-origin: calc(17.4rem * 1.5) calc(15.3rem * 1.5);
}

.armature-right-cloud{
  transform-origin: calc(9rem * 1.5) calc(9.6rem * 1.5);
}

.rig-icons{
  display: none;
}

.rig-face .armature-display,
.rig-mug .armature-display,
.rig-yarn .armature-display,
.rig-ping-pong .armature-display,
.rig-cookie .armature-display,
.rig-moon .armature-display,
.rig-hearts .armature-display,
.rig-clouds .armature-display{
  opacity: 0;
}

.rig-accessories .armature-display{
  opacity: 0;
}

.body--fur .rig-accessories .armature-hair-body{
  opacity: 1;
}

.face--fur .rig-accessories .armature-hair-face{
  opacity: 1;
}

.ears--small .rig-accessories .armature-ears-small{
  opacity: 1;
}

.ears--medium .rig-accessories .armature-ears-medium{
  opacity: 1;
}

.ears--big .rig-accessories .armature-ears-big{
  opacity: 1;
}

.nose--round .armature-nose-round{
  opacity: 1;
}

.nose--triangle .armature-nose-triangle{
  opacity: 1;
}

.rig-shadow{
  fill: var(--shadow);
}

.rig-hearts{
  fill: var(--hearts);
}

.rig-clouds{
  fill: var(--fart-cloud);
}

.rig-moon [id=moonDark]{
  fill: var(--moon-dark);
}

.rig-moon [id=moonLight]{
  fill: var(--moon-light);
}

.rig-moon [id=craterDark]{
  fill: var(--moon-crater-dark);
}

.rig-moon [id=craterLight]{
  fill: var(--moon-crater-light);
}

.rig-face {
  fill: var(--eyes);
}

.rig-nose{
  fill: var(--nose);
}

.rig-face .svg-face{
  fill: var(--face);
}

.svg-body{
  fill: var(--fur);
}

.rig-accessories{
  fill: var(--fur);
}

.rig-accessories .svg-hair-face{
  fill: var(--face-hair);
}

.rig-feet{
  fill: var(--fur);
}

.rig-cookie [id=cookieLight]{
  fill: var(--cookie-light);
}

.rig-cookie [id=cookieDark]{
  fill: var(--cookie-dark);
}

.svg-left-tear{
  fill: var(--tear);
}

.rig-cookie [id=chips]{
  fill: var(--cookie-chip);
}

.rig-ping-pong [id^=face]{
  fill: var(--ping-pong-paddle-light);
}

.rig-ping-pong [id=side]{
  fill: var(--ping-pong-paddle-dark);
}

.rig-ping-pong [id=handle]{
  fill: var(--ping-pong-paddle-handle);
}

.svg-ball{
  fill: var(--ping-pong-ball);
}

.rig-yarn{
  fill: var(--yarn-light);
}

.svg-middle-yarn{
  fill: var(--yarn-medium);
}

.rig-yarn-ball  [id=yarnBallRight]{
  fill: var(--yarn-medium);
}

.rig-yarn-ball  [id=yarnBallBottom]{
  fill: var(--yarn-dark);
}

.rig-yarn-ball [id=yarnBallTail]{
  fill: var(--yarn-dark);
}

.svg-right-needle,
.svg-left-needle{
  fill: var(--yarn-needles);
}

.rig-mug{
  fill: var(--coffee-mug-light);
}

.rig-steam{
  fill: var(--coffee-mug-steam);
}

.rig-mug [id^=shadow]{
  fill: var(--coffee-mug-dark);
}

.svg-inside-mug{
  fill: var(--coffee-mug-dark);
}

.rig-hands{
  fill: var(--fur-shadow);
}

.svg-cheeks-happy{
  fill: var(--cheeks);
}

.svg-big-smile [id=bigSmileTongue]{
  fill: var(--tongue);
}

.svg-side-tongue [id=tongue]{
  fill: var(--tongue);
}

/* ------- Animations ------- */
.rig--happy .armature-eyes-open.armature-display,
.rig--happy .armature-small-smile.armature-display{
  opacity: 1;
}

.rig--pain .armature-eyes-wincing-big.armature-display,
.rig--pain .armature-big-frown.armature-display{
  opacity: 1;
}

.rig--frustration .armature-eyes-wincing-small.armature-display,
.rig--frustration .armature-medium-frown.armature-display,
.rig--frustration .armature-eyebrows-big-up.armature-display{
  opacity: 1;
}

.rig--tired .armature-eyes-closed.armature-display,
.rig--tired .armature-medium.armature-display,
.rig--tired .armature-eyebrows-small-up.armature-display{
  opacity: 1;
}

.rig--restless .armature-eyes-concentrated.armature-display,
.rig--restless .armature-small.armature-display,
.rig--restless .armature-eyebrows-serious.armature-display{
  opacity: 1;
}

.rig--sad .armature-eyes-closed.armature-display,
.rig--sad .armature-small-frown.armature-display,
.rig--sad .armature-eyebrows-small-up.armature-display{
  opacity: 1;
}

.rig--ecstatic .armature-eyes-happy-closed.armature-display,
.rig--ecstatic .armature-big-smile.armature-display,
.rig--ecstatic .armature-cheeks-happy.armature-display{
  opacity: 1;
}

.rig--bathroom .armature-eyes-wincing-big.armature-display,
.rig--bathroom .armature-grimmice.armature-display{
  opacity: 1;
}

.rig--sleep .armature-eyes-closed.armature-display,
.rig--sleep .armature-medium.armature-display,
.rig--sleep .rig-moon .armature-display{
  opacity: 1;
}

.rig--sleep .armature-body.armature-rotate,
.rig--sleep .armature-hair-face.armature-rotate,
.rig--sleep .armature-hair-body.armature-rotate,
.rig--sleep .armature-ears-small.armature-rotate,
.rig--sleep .armature-ears-medium.armature-rotate,
.rig--sleep .armature-ears-big.armature-rotate{
  transform: rotate(-10deg);
}

.rig--sleep .armature-hands.armature-rotate{
  transform: rotate(-5deg);
  transition-delay: 200ms;
}

.rig--play .armature-eyes-concentrated.armature-display,
.rig--play .armature-side-tongue.armature-display,
.rig--play .rig-ping-pong .armature-display{
  opacity: 1;
}

.rig--relax .armature-eyes-happy-closed.armature-display,
.rig--relax .armature-small-smile.armature-display,
.rig--relax .rig-mug .armature-display{
  opacity: 1;
}

.rig--create .armature-eyes-open.armature-display,
.rig--create .armature-small-smile.armature-display,
.rig--create .rig-yarn .armature-display{
  opacity: 1;
}

.rig--eat .armature-eyes-closed.armature-display,
.rig--eat .armature-big-smile.armature-display,
.rig--eat .rig-cookie .armature-display{
  opacity: 1;
}

.rig-moon .armature-translate{
  transition: transform 800ms;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  transform: translateX(6rem) translateY(4rem);
}

.rig--sleep .rig-moon .armature-translate{
  transform: translateX(0) translateY(0);
}

.rig--ecstatic .armature-hearts.armature-display{
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--ecstatic .armature-hearts .armature-translate{
  animation-name: slideUp;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--bathroom .armature-clouds.armature-display{
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--bathroom .armature-clouds .armature-translate{
  animation-name: slideUp;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--bathroom .armature-right-cloud.armature-rotate{
  animation-name: littleSpin;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--bathroom .rig-body .armature-translate{
  animation-name: strain;
  animation-duration: 1.5s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--sad .armature-left-tear.armature-display{
  animation-name: fadeIn;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--sad .armature-left-tear.armature-translate{
  animation-name: slideDown;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--sad .armature-left-tear.armature-scale{
  animation-name: scaleUp;
  animation-duration: 3s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--restless .armature-body.armature-rotate,
.rig--restless .armature-hair-body.armature-rotate,
.rig--restless .armature-hair-face.armature-rotate,
.rig--restless .armature-ears-small.armature-rotate,
.rig--restless .armature-ears-medium.armature-rotate,
.rig--restless .armature-ears-big.armature-rotate,
.rig--restless .armature-hands.armature-rotate{
  animation-name: tilt;
  animation-duration: 5s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--restless .armature-left-foot.armature-translate{
  animation-name: shiftLeft;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--restless .armature-right-foot.armature-translate{
  animation-name: shiftRight;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--restless .armature-left-foot.armature-rotate{
  animation-name: rotateLeft;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--restless .armature-right-foot.armature-rotate{
  animation-name: rotateRight;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.armature-eyebrows-big-up.armature-translate{
  transform-origin: center;
  animation-name: wince;
  animation-duration: 7s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .rig--happy .armature-eyes-open.armature-display{
  animation-name: blinkOut;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .rig--happy .armature-eyes-closed.armature-display{
  animation-name: blinkIn;
  animation-duration: 6s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .armature-body.armature-translate{
  transform-origin: center;
  animation-name: float;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .armature-shadow.armature-scale{
  animation-name: floatShadow;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .armature-hair-face.armature-translate{
  transform-origin: center;
  animation-name: float;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.1s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .armature-hair-body.armature-translate,
.rig--idle .armature-ears-small.armature-translate,
.rig--idle .armature-ears-big.armature-translate,
.rig--idle .armature-ears-medium.armature-translate{
  transform-origin: center;
  animation-name: float;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.2s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--idle .armature-left-hand.armature-translate,
.rig--idle .armature-right-hand.armature-translate,
.rig--idle .armature-mug.armature-translate{
  transform-origin: center;
  animation-name: float;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-delay: 0.3s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

/* eat */
/* .rig--eat .armature-shadow.armature-scale{
  animation-name: floatShadow;
  animation-duration: .2s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
} */

.rig--eat .armature-body.armature-translate,
.rig--eat .armature-hair-face.armature-translate,
.rig--eat .armature-hair-body.armature-translate,
.rig--eat .armature-ears-small.armature-translate,
.rig--eat .armature-ears-big.armature-translate,
.rig--eat .armature-ears-medium.armature-translate,
.rig--eat .armature-left-hand.armature-translate,
.rig--eat .armature-right-hand.armature-translate,
.rig--eat .armature-mug.armature-translate,
.rig--eat .armature-cookie.armature-translate{
  transform-origin: center;
  animation-name: eatJiggle;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--eat .armature-cookie.armature-rotate,
.rig--eat .armature-left-hand.armature-rotate{
  animation-name: eatCookie;
  animation-duration: 4s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--eat .armature-big-smile.armature-scale{
  animation-name: mouthClose;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}
/* end eat */

.rig--idle .armature-eyes-open.armature-translate{
  animation-name: leftRight;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-delay: .3s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--shake .armature-face.armature-translate{
  animation-name: shake;
  animation-duration: 1s;
  animation-timing-function: ease-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--shake .armature-face.armature-scale{
  animation-name: shakeSquish;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--play .armature-paddle.armature-rotate,
.rig--play .armature-right-hand.armature-rotate{
  animation-name: playPaddle;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: -.4s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--play .armature-ball.armature-translate{
  /* transform: translateY(-15rem); */
  animation-name: playBall;
  animation-duration: 1s;
  animation-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--create .armature-left-needle.armature-rotate,
.rig--create .armature-left-hand.armature-rotate{
  animation-name: knitLeft;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--create .armature-right-needle.armature-rotate,
.rig--create .armature-right-hand.armature-rotate{
  transform: rotate(-5deg);
  animation-name: knitRight;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--create .armature-middle-yarn.armature-rotate{
  animation-name: knit;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--create .armature-left-yarn.armature-translate{
  animation-name: upAndDown;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

.rig--create .armature-right-yarn.armature-translate{
  animation-name: upAndDown;
  animation-duration: 1s;
  animation-timing-function: ease-in;
  animation-delay: .5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
}

/* ------- Keyframes ------- */
@keyframes button {
  0%{
    transform: scale(1);
  }
  30%{
    transform: scale(.9);
  }
  100%{
    transform: scale(1);
  }
}

@keyframes float {
  0%{
    transform: translateY(0);
  }
  42%{
    transform: translateY(.77rem);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes floatShadow {
  0%{
    transform: scale(1);
  }
  42%{
    transform: scale(0.9);
  }
  100%{
    transform: scale(1);
  }
}

@keyframes blinkIn {
  12%{
    opacity: 0;
  }
  13%{
    opacity: 1;
  }
  14%{
    opacity: 1;
  }
  15%{
    opacity: 0;
  }
  40%{
    opacity: 0;
  }
  41%{
    opacity: 1;
  }
  42%{
    opacity: 1;
  }
  43%{
    opacity: 0;
  }
}

@keyframes blinkOut {
  12%{
    opacity: 1;
  }
  13%{
    opacity: 0;
  }
  14%{
    opacity: 0;
  }
  15%{
    opacity: 1;
  }
  40%{
    opacity: 1;
  }
  41%{
    opacity: 0;
  }
  42%{
    opacity: 0;
  }
  43%{
    opacity: 1;
  }
}

@keyframes wince {
  0%{
    transform: translateY(0);
  }
  42%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(.6rem);
  }
  80%{
    transform: translateY(.6rem);
  }
  90%{
    transform: translateY(0);
  }
}

@keyframes leftRight {
  0%{
    transform: translateX(0);
  }
  29%{
    transform: translateX(0);
  }
  30%{
    transform: translateY(-.2rem) translateX(.2rem);
  }
  38%{
    transform: translateY(-.2rem) translateX(.2rem);
  }
  40%{
    transform: translateY(-.2rem) translateX(-.2rem);
  }
  50%{
    transform: translateY(-.2rem) translateX(-.2rem);
  }
  52%{
    transform: translateY(0);
  }
}

@keyframes shake {
  0%{
    transform: translateX(0);
  }
  25%{
    transform: translateX(-.4rem);
  }
  50%{
    transform: translateX(.4rem);
  }
  75%{
    transform: translateX(-.4rem);
  }
  100%{
    transform: translateX(0) translateY(0);
  }
}

@keyframes shakeSquish {
  0%{
    transform: scaleY(1);
  }
  15%{
    transform: scaleY(1.04);
  }
  65%{
    transform: scaleY(1.04);
  }
  100%{
    transform: scaleY(1);
  }
}

@keyframes tilt {
  0%{
    transform: rotate(0);
  }
  34%{
    transform: rotate(0);
  }
  42%{
    transform: rotate(-3deg);
  }
  62%{
    transform: rotate(3deg);
  }
  72%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(0);
  }
}

@keyframes shiftLeft {
  0%{
    transform: translateY(0);
  }
  34%{
    transform: translateY(0);
  }
  42%{
    transform: translateY(-.5rem);
  }
  52%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes shiftRight {
  0%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(0);
  }
  62%{
    transform: translateY(-.5rem);
  }
  72%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes rotateLeft {
  0%{
    transform: rotate(0);
  }
  30%{
    transform: rotate(0);
  }
  42%{
    transform: rotate(-10deg);
  }
  52%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(0);
  }
}

@keyframes rotateRight {
  0%{
    transform: rotate(0);
  }
  50%{
    transform: rotate(0);
  }
  62%{
    transform: rotate(10deg);
  }
  72%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(0);
  }
}

@keyframes fadeIn {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  96%{
    opacity:  1;
  }
  100%{
    opacity: 0;
  }
}

@keyframes slideDown {
  0%{
    transform: translateY(-1rem);
  }
  100%{
    transform: translateY(1.5rem);
  }
}

@keyframes scaleUp {
  0%{
    transform: scale(0);
  }
  40%{
    transform: scale(1);
  }
}

@keyframes slideUp {
  0%{
    transform: translateY(2rem);
  }
  100%{
    transform: translateY(-2rem);
  }
}

@keyframes strain{
  0%{
    transform: translateX(.1rem) translateY(.1rem);
  }
  34%{
    transform: translateX(-.1rem) translateY(-.1rem);
  }
  42%{
    transform: translateX(.1rem) translateY(.1rem);
  }
  62%{
    transform: translateX(-.1rem) translateY(-.1rem);
  }
  72%{
    transform: translateX(.1rem) translateY(.1rem);
  }
  100%{
    transform: translateX(-.1rem) translateY(-.1rem);
  }
}

@keyframes playPaddle{
  0%{
    transform: rotate(-40deg);
  }
  50%{
    transform: rotate(5deg);
  }
  100%{
    transform: rotate(-40deg);
  }
}

@keyframes playBall{
  0%{
    transform: translateY(-15rem);
  }
  50%{
    transform: translateY(-3rem);
  }
  100%{
    transform: translateY(-15rem);
  }
}

@keyframes eatJiggle {
  0%{
    transform: translateY(0);
  }
  40%{
    transform: translateY(.5rem);
  }
  90%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(0);
  }
}

@keyframes eatCookie{
  0%{
    transform: rotate(-25deg);
  }
  10%{
    transform: rotate(14deg);
  }
  90%{
    transform: rotate(14deg);
  }
  100%{
    transform: rotate(-25deg);
  }
}

@keyframes mouthClose {
  0%{
    transform: scaleY(1);
  }
  50%{
    transform: scaleY(.5);
  }
  100%{
    transform: scaleY(1);
  }
}

@keyframes knitLeft {
  0%{
    transform: rotate(0);
  }
  50%{
    transform: rotate(-5deg);
  }
  100%{
    transform: rotate(0);
  }
}

@keyframes knitRight {
  0%{
    transform: rotate(-5deg);
  }
  50%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-5deg);
  }
}

@keyframes knit {
  0%{
    transform: rotate(0);
  }
  50%{
    transform: rotate(8deg);
  }
  100%{
    transform: rotate(0);
  }
}

@keyframes upAndDown {
  0%{
    transform: translateY(0rem);
  }
  50%{
    transform: translateY(.75rem);
  }
  100%{
    transform: translateY(0rem);
  }
}

@keyframes littleSpin {
  0%{
    transform: rotate(0);
  }
  100%{
    transform: rotate(25deg);
  }
}
