.confetti-container {
  animation: hideContainer 0.1s forwards;
  animation-delay: 1.9s;
  bottom: 0;
  height: 100vh;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
  z-index: 10000;
  pointer-events: none; /* Prevent interference with user interactions */
  will-change: opacity, transform; /* Optimize for animations */
}

@media screen and (min-width: 768px) {
  .confetti-container div:nth-child(1) {
    --end: 10% !important;
    left: 10% !important;
  }

  .confetti-container div:nth-child(2) {
    --end: 10% !important;
    left: 55% !important;
  }

  .confetti-container div:nth-child(4) {
    left: 40% !important;
  }

  .confetti-container div:nth-child(5) {
    left: 65% !important;
  }

  .confetti-container div:nth-child(6) {
    left: 30% !important;
  }

  .confetti-container div:nth-child(8) {
    left: 75% !important;
  }
}

@media screen and (min-width: 1024px) {
  .confetti-container {
    width: 1024px;
  }
  .confetti-container div:nth-child(1) {
    --end: 0 !important;
  }

  .confetti-container div:nth-child(2) {
    left: 70% !important;
    --end: 0 !important;
  }

  .confetti-container div:nth-child(4) {
    left: 50% !important;
  }

  .confetti-container div:nth-child(5) {
    left: 80% !important;
  }

  .confetti-container div:nth-child(6) {
    left: 35% !important;
  }

  .confetti-container div:nth-child(8) {
    left: 85% !important;
  }
}

.confetti-container div {
  --startRotate: 0deg;
  animation: moveConfatti 2s forwards;
  opacity:0;
  position: absolute;
}

.confetti-container div:nth-child(1) {
  --end: 0;
  --endRotate: -30.84deg;
  --start: -90%;
  height: 181px;
  left: 5%;
  width: 181px;
}

.confetti-container div:nth-child(2) {
  --end: 0;
  --endRotate: 30deg;
  --start: -30%;
  height: 175px;
  left: 60%;
  width: 175px;
}

.confetti-container div:nth-child(3) {
  --end: 30%;
  --endRotate: 9.256deg;
  --start: -60%;
  height: 155px;
  left: 5%;
  width: 155px;
}

.confetti-container div:nth-child(4) {
  --end: 30%;
  --endRotate: -24.826deg;
  --start: -100%;
  height: 146px;
  left: 30%;
  width: 146px;
}

.confetti-container div:nth-child(5) {
  --end: 30%;
  --endRotate: 16.434deg;
  --start: -20%;
  height: 240px;
  left: 50%;
  width: 240px;
}

.confetti-container div:nth-child(6) {
  --end: 48%;
  --endRotate: -13.426deg;
  --start: -30%;
  height: 240px;
  left: 20%;
  width: 240px;
}

.confetti-container div:nth-child(7) {
  --end: 85%;
  --endRotate: -27.66deg;
  --start: -15%;
  height: 91px;
  left: 10%;
  width: 91px;
}

.confetti-container div:nth-child(8) {
  --end: 85%;
  --endRotate: 18.265deg;
  --start: -50%;
  height: 90px;
  left: 70%;
  width: 90px;
}

@keyframes moveConfatti {
  0%   {opacity: 1; top: var(--start); transform: rotate(var(--startRotate));}
  30%  {opacity: 1; transform: rotate(var(--endRotate)); top: var(--end);}
  70%  {opacity: 1; transform: rotate(var(--endRotate)); top: var(--end);}
  100% {opacity: 0; top: var(--end); transform: rotate(var(--endRotate)); visibility: hidden;}
}

@keyframes hideContainer {
  0% {opacity: 1; visibility: visible;}
  99% {opacity: 0; visibility: visible;}
  100% {opacity: 0; visibility: hidden;}
}