:root {
  --mer-primary: #b0e0ff;
  --mer-secondary: #242d33;
}

/* --== Container ==-- */
#mer-npc {
  position: absolute;
  width: 60px;
  height: 110px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.mer-limb-slot {
  position: absolute;
  overflow: visible;
}

.mer-body {
  position: relative;
  width: 100%;
  height: 100%;
}

.mer-limb-slot img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  height: 100%;
  width: auto;
}

/* --== Body Parts ==-- */
.mer-head {
  top: 0;
  left: 17.5px;
  width: 25px;
  height: 25px;
  z-index: 6;
  background-color: var(--mer-primary);
}

.mer-torso {
  top: 28px;
  left: 10px;
  width: 40px;
  height: 45px;
  z-index: 5;
  background-color: var(--mer-secondary);
  transform-origin: bottom center;
}

.mer-arm {
  top: 28px;
  width: 20px;
  height: 45px;
  transform-origin: top center;
  background-color: var(--mer-primary);
}
.mer-arm.left {
  left: -5px;
  z-index: 7;
}
.mer-arm.right {
  right: -5px;
  z-index: 2;
}

.mer-leg {
  top: 73px;
  width: 20px;
  height: 50px;
  transform-origin: top center;
  background-color: var(--mer-secondary);
}
.mer-leg.left {
  left: 10px;
  z-index: 4;
}
.mer-leg.right {
  right: 10px;
  z-index: 3;
}

/* --== Walking Animation ==-- */
.walking .mer-arm.left {
  animation: swing 0.6s infinite alternate;
}
.walking .mer-arm.right {
  animation: swing-reverse 0.6s infinite alternate;
}
.walking .mer-leg.left {
  animation: swing-reverse 0.6s infinite alternate;
}
.walking .mer-leg.right {
  animation: swing 0.6s infinite alternate;
}
.walking .mer-body {
  animation: bob 0.3s ease-in-out infinite alternate;
}
.walking .mer-torso {
  animation: torso-twist 0.6s ease-in-out infinite alternate;
}

/* --== Idle Animation ==-- */
#mer-npc:not(.walking):not(.waving) .mer-torso {
  animation: breathe 2.4s ease-in-out infinite;
}
#mer-npc:not(.walking):not(.waving) .mer-arm.left,
#mer-npc:not(.walking):not(.waving) .mer-arm.right {
  animation: idle-sway 3.2s ease-in-out infinite;
}

/* --== Waving Animation ==-- */
.waving .mer-arm.left {
  animation: wave 1.6s ease-in-out 1;
}

/* --== Eating Animation ==-- */
.eating .mer-arm.right {
  animation: eat-bob 0.35s ease-in-out infinite alternate;
}

/* --== Keyframes ==-- */
@keyframes swing {
  0% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(25deg);
  }
}

@keyframes swing-reverse {
  0% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

@keyframes bob {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-3px);
  }
}

@keyframes torso-twist {
  0% {
    transform: rotate(-3deg);
  }
  100% {
    transform: rotate(3deg);
  }
}

@keyframes breathe {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.04);
  }
}

@keyframes idle-sway {
  0%,
  100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

@keyframes eat-bob {
  0% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(80deg);
  }
}

@keyframes wave {
  0% {
    transform: rotate(15deg);
  }
  12% {
    transform: rotate(155deg);
  }
  22% {
    transform: rotate(140deg);
  }
  32% {
    transform: rotate(160deg);
  }
  42% {
    transform: rotate(140deg);
  }
  52% {
    transform: rotate(160deg);
  }
  62% {
    transform: rotate(140deg);
  }
  72% {
    transform: rotate(160deg);
  }
  82% {
    transform: rotate(145deg);
  }
  100% {
    transform: rotate(15deg);
  }
}