.fall {
  animation: fall 1.2s cubic-bezier(0.55, 0, 1, 0.45) both;
}

@keyframes fall {
  from {
    translate: 0 0;
    rotate: 0deg;
  }

  to {
    translate: 0 120vh;
    rotate: var(--spin);
  }
}

.lancer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pop 0.5s ease-out;
}

.lancer[hidden] {
  display: none;
}

.lancer img {
  display: block;
  width: 160px;
  image-rendering: pixelated;
}

.lancer:hover img {
  animation: wiggle 0.3s ease-in-out infinite alternate;
}

@keyframes pop {
  from {
    transform: translate(-50%, -50%) scale(0);
  }

  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes wiggle {
  from {
    transform: rotate(-8deg);
  }

  to {
    transform: rotate(8deg);
  }
}