.carnival-container {
  display: block;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  perspective: 600px;
}

.carnival-wrapper {
  position: fixed;
  z-index: 15;
  top: -20px;
  will-change: top;
  animation-name: carnival-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.carnival-sway-wrapper {
  will-change: transform;
  animation-name: carnival-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.carnival-confetti {
  width: 8px;
  height: 16px;
  background-color: #f0f;
  will-change: transform;
  animation-name: carnival-flutter;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
}

.carnival-confetti.circle {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.carnival-confetti.square {
    width: 8px;
    height: 8px;
}

.carnival-confetti.triangle {
    width: 0;
    height: 0;
    background-color: transparent !important;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid;
    width: 10px;
    height: 10px;
    background-color: inherit;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@keyframes carnival-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}

@keyframes carnival-sway {
  0% {
    transform: translateX(calc(var(--sway-amount, 50px) * -1));
  }
  100% {
    transform: translateX(var(--sway-amount, 50px));
  }
}

@keyframes carnival-flutter {
  0% {
    transform: rotate3d(1, 1, 1, 0deg);
  }
  25% {
    transform: rotate3d(1, 0.5, 0, 90deg);
  }
  50% {
    transform: rotate3d(0.5, 1, 0.5, 180deg);
  }
  75% {
    transform: rotate3d(0, 0.5, 1, 270deg);
  }
  100% {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}