#animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

.thumb {
  position: absolute;
  top: -10vh;
  left: calc(var(--x, 50%) * 1%);
  font-size: calc(var(--size, 36) * 1px);
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.6));
  will-change: transform, opacity;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  pointer-events: none;
  opacity: 0;
  animation-delay: var(--delay, 0s);
  animation-duration: var(--dur, 6s);
}

@keyframes fall {
  0% {
    transform: translateY(-20vh) rotate(-10deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  50% {
    transform: translateY(50vh) rotate(10deg);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(115vh) rotate(40deg);
    opacity: 0;
  }
}