.moth {
  position: fixed;
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 9999;
  background-image: url('../images/structure/mothflying.gif');
  background-size: contain, cover;
  background-repeat: no-repeat, no-repeat;

  animation: flyAway 1.8s ease-out forwards;
  will-change: transform, opacity;
}


@keyframes flyAway {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1.75);
    opacity: 1;
  }
  100% {
    transform: translate(var(--x, 0px), var(--y, -120px)) rotate(var(--r, 25deg)) scale(0.85);
    opacity: 0;
  }
}