:root {
  --mar-primary: #e0b0ff;
  --mar-secondary: #2d2433;
}

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

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

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

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

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

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

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

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

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

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

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

/* --== Eating Animation ==-- */
.eating .mar-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);
  }
}