.money-flip {
  display: inline-grid;
  min-width: max-content;
  place-items: center end;
  perspective: 500px;
}

.money-flip > span {
  grid-area: 1 / 1;
  backface-visibility: hidden;
  transform-origin: 50% 70%;
}

.money-flip-points { animation: money-flip-points 8s ease-in-out infinite; }
.money-flip-cash { animation: money-flip-cash 8s ease-in-out infinite; }

@keyframes money-flip-points {
  0%, 38% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  48%, 88% { opacity: 0; transform: translateY(-5px) rotateX(18deg); filter: blur(2px); }
  98%, 100% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

@keyframes money-flip-cash {
  0%, 38% { opacity: 0; transform: translateY(5px) rotateX(-18deg); filter: blur(2px); }
  48%, 88% { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
  98%, 100% { opacity: 0; transform: translateY(5px) rotateX(-18deg); filter: blur(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .money-flip-points { animation: none; }
  .money-flip-cash { display: none; animation: none; }
}
