/* ------- Colors ------- */
:root{
  --fur: #DE9E53;
  --fur-shadow: #BB6D12;
  --face: #F0CEA6;
  --eyes: #363636;
  --mouth: #363636;
  --tongue: #FFAFAF;
  --nose: #FFAFAF;
  --background: #FFFFFF;
  --shadow: #E6EBF3;
}

/* ------- Base ------- */
:root {
  font-size: 1vh;
}
html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0;
  font-size: 10rem;
}
.stage{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
  background-color: #F2D7BF;
}
.canvas{
  width: calc(25rem * 1.5);
  height: calc(30rem * 1.5);
  position: relative;
}
.canvas svg{
  width: 100%;
  height: 100%;
}
.controls{
  
}
.row{
  display: flex;
}
.ctrl-btn{
  width: 6.4rem;
  height: 6.4rem;
  padding: 1rem;
  margin: 1rem;
  display: flex;
  background-color: #FFF5D3;
  border-radius: 2rem;
  transform: rotate(5deg);
  box-shadow: .4rem .7rem 0px #FBE9C0; 
}

.ctrl-btn svg{
  width: 100%;
  height: 100%;
}
.ctrl-btn--sleep{
  background-color: #31288e;
  border-radius: 2rem;
  transform: rotate(-8deg);
  box-shadow: -.5rem .5rem 0px #040221; 
}
.ctrl-btn--awake{
  background-color: #9ac9ff;
  border-radius: 2rem;
  transform: rotate(-5deg);
  box-shadow: -.4rem .7rem 0px #5da0ef; 
}
.ctrl-btn--sleep.active,
.ctrl-btn--awake.active{
  display:none;
}
/* ------- Rig ------- */
.rig, .armature{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.armature{
  transition: transform 1s ease-in-out;
}
.armature-right-hand{
  transform-origin: calc(4.7rem * 1.5) calc(17.8rem * 1.5);
}
.armature-left-hand{
  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);
}
.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-ears-small.armature-display,
.rig-accessories .armature-ears-big.armature-display{
  opacity: 0;
}

/* ------- 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--play .armature-eyes-concentrated.armature-display,
.rig--play .armature-side-tongue.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--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--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{
  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;
}
.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;
}

/* ------- Keyframes ------- */
@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) translateY(-.4rem);
  }
  50%{
    transform: translateX(.4rem) translateY(-.4rem);
  }
  75%{
    transform: translateX(-.4rem) translateY(-.4rem);
  }
  100%{
    transform: translateX(0) translateY(0);
  }
}
@keyframes shakeSquish {
  0%{
    transform: scaleY(1);
  }
  15%{
    transform: scaleY(0.96);
  }
  65%{
    transform: scaleY(0.96);
  }
  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);
  }
}
