.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 14px;
  opacity: 0.95;
  border-radius: 3px;
  animation-name: confetti-fall;
  animation-timing-function: cubic-bezier(0.35, 0.5, 0.65, 1);
  animation-fill-mode: forwards;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(105vh) translateX(var(--x)) rotate(var(--r));
    opacity: 0.15;
  }
}