@use "design";
@use "helpers";

.confetti {
  position: fixed;
  inset: 0;

  z-index: design.$z-confetti;
  pointer-events: none;

  > div {
    position: absolute;
    top: -50px;

    will-change: left, transform;
    backface-visibility: hidden;
  }

  > div:nth-child(3n + 1) {
    background: #13cc7f;
  }
  > div:nth-child(3n + 2) {
    background: #047c4a;
  }
  > div:nth-child(3n + 3) {
    background: #11cc87;
  }
}

// This is named dumb because it gets repeated like a bunch of times
@keyframes c {
  100% {
    left: var(--left);
    transform: translateY(calc(100vh + 200px)) rotate(var(--rotate));
  }
}

@for $i from 0 through 75 {
  .c#{$i} {
    --left: #{random(100) + "%"};
    --rotate: #{helpers.to-fixed((random() * 360), 1)}deg;

    animation: c
      unquote(helpers.to-fixed((4 + random()), 1) + "s")
      unquote(helpers.to-fixed(calc(random(100) / 12), 1) + "s")
      1;
  }
}