.goal-widget__mascot {
  --mascot-bottom-inset: 2px;
  position: absolute;
  top: calc(var(--goal-mascot-bar-offset) - var(--goal-mascot-size) + 3px + var(--mascot-bottom-inset));
  left: calc(var(--goal-progress) * 100%);
  z-index: 2;
  display: block;
  width: var(--goal-mascot-size);
  height: var(--goal-mascot-size);
  transform: translateX(-50%);
  transition: left 0.35s ease;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: calc(var(--goal-mascot-size) * 2) var(--goal-mascot-size);
  image-rendering: pixelated;
  animation: mascotIdle 0.9s steps(2, end) infinite;
}

.goal-widget__mascot--dog {
  background-image: url('./mascots/dog.png');
}

.goal-widget__mascot--cat {
  background-image: url('./mascots/cat.png');
}

.goal-widget__mascot--white-cat {
  background-image: url('./mascots/white-cat.png');
}

.goal-widget__mascot--bird {
  background-image: url('./mascots/bird.png');
}

.goal-widget__mascot--shimaenaga {
  background-image: url('./mascots/shimaenaga.png');
}

.goal-widget__mascot--rabbit {
  background-image: url('./mascots/rabbit.png');
}

.goal-widget__mascot--bear {
  background-image: url('./mascots/bear.png');
}

.goal-widget__mascot--hero {
  background-image: url('./mascots/hero.png');
}

.goal-widget__mascot--raccoon {
  background-image: url('./mascots/raccoon.png');
}

.goal-widget__mascot--rocket {
  background-image: url('./mascots/rocket.png');
}

.goal-widget__mascot--coffee {
  background-image: url('./mascots/coffee.png');
}

.goal-widget__mascot--robot {
  background-image: url('./mascots/robot.png');
}

.goal-widget--completed.goal-widget--animate-completion.goal-widget--mascot-celebration .goal-widget__mascot {
  animation: mascotComplete 0.58s ease-in-out 3;
}

.goal-widget--completed.goal-widget--animate-completion.goal-widget--mascot-celebration .goal-widget__mascot--rocket {
  z-index: 5;
  animation:
    mascotRocketLaunch 1.25s cubic-bezier(0.72, 0, 1, 0.62) forwards,
    mascotIdle 0.18s steps(2, end) infinite;
}

@keyframes mascotIdle {
  to {
    background-position: calc(var(--goal-mascot-size) * -2) 0;
  }
}

@keyframes mascotComplete {
  40% {
    transform: translate(-50%, -12px) scale(1.08);
  }
}

@keyframes mascotRocketLaunch {
  0% {
    transform: translateX(-50%) scale(1);
  }

  30% {
    transform: translate(-50%, -10px) scale(0.98);
  }

  100% {
    transform: translate(-50%, calc((var(--goal-shell-height, var(--goal-height)) + var(--goal-mascot-size)) * -1)) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  .goal-widget__mascot,
  .goal-widget--completed.goal-widget--animate-completion.goal-widget--mascot-celebration .goal-widget__mascot {
    animation: none;
  }
}