.pop-item {
      position: fixed;
      pointer-events: none;
      z-index: 999999;
      animation: itemPop 0.7s ease-out forwards;
    }

    .pop-item svg {
      width: 100%;
      height: 100%;
      /* strong shadow so it pops on white */
      filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25))
              drop-shadow(0 4px 8px rgba(0,0,0,0.12));
    }

    @keyframes itemPop {
      0% {
        transform: translate(0, 0) scale(0.25) rotate(0deg);
        opacity: 0;
      }
      18% {
        transform: translate(calc(var(--tx) * 0.2), -16px) scale(1.12) rotate(calc(var(--rot) * 0.3));
        opacity: 1;
      }
      35% {
        transform: translate(calc(var(--tx) * 0.4), -5px) scale(0.96) rotate(calc(var(--rot) * 0.5));
      }
      100% {
        transform: translate(var(--tx), 72px) scale(0.75) rotate(var(--rot));
        opacity: 0;
      }
    }