.firework-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;

  &.enabled {
    display: block;
  }

  .firework {
    &,
    &::before,
    &::after {
      --initialSize: 0.8vmin;
      --finalSize: 55vmin;
      --particleSize: 0.6vmin;
      --color1: #e6ac7c;
      --color2: #ffe4c4;
      --color3: #ffffff;
      --color4: #deb887;
      --color5: #e6ac7c;
      --color6: #ffe4c4;
      --y: -30vmin;
      --x: -50%;
      --initialY: 60vmin;
      content: "";
      animation: firework 4s infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, var(--y));
      width: var(--initialSize);
      aspect-ratio: 1;
      background: 
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 50% 0%,
        radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 50%,
        radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 50% 100%,
        radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 0% 50%,
        
        /* specific shapes */
        radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 80% 90%,
        radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 95% 90%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 90% 70%,
        radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 100% 60%,
        radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 55% 80%,
        radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 70% 77%,
        
        /* more particles */
        radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 22% 90%,
        radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 45% 90%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 70%,
        radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 10% 60%,
        radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 31% 80%,
        radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 28% 77%,
        radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 13% 72%,
        
        /* top left */
        radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 80% 10%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 95% 14%,
        radial-gradient(circle, var(--color2) var(--particleSize), #0000 0) 90% 23%,
        radial-gradient(circle, var(--color3) var(--particleSize), #0000 0) 100% 43%,
        radial-gradient(circle, var(--color4) var(--particleSize), #0000 0) 85% 27%,
        radial-gradient(circle, var(--color5) var(--particleSize), #0000 0) 77% 37%,
        radial-gradient(circle, var(--color6) var(--particleSize), #0000 0) 60% 7%,
        
        /* top right */
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 22% 14%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 45% 20%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 33% 34%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 10% 29%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 31% 37%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 28% 7%,
        radial-gradient(circle, var(--color1) var(--particleSize), #0000 0) 13% 42%
      ;
      background-size: var(--initialSize) var(--initialSize);
      background-repeat: no-repeat;
    }

    &::before {
      --x: -50%;
      --y: -50%;
      --initialY: -50%;
      transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
    }

    &::after {
      --x: -50%;
      --y: -50%;
      --initialY: -50%;
      transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
    }

    &:nth-child(2) {
      --x: 30vmin;

      &,
      &::before,
      &::after {
        --color1: #e6ac7c;
        --color2: #ffffff;
        --color3: #e6ac7c;
        --color4: #ffe4c4;
        --color5: #deb887;
        --color6: #e6ac7c;
        --finalSize: 60vmin;
        left: 30%;
        top: 60%;
        animation-delay: -0.25s;
      }
    }

    &:nth-child(3) {
      --x: -30vmin;
      --y: -50vmin;

      &,
      &::before,
      &::after {
        --color1: #ffe4c4;
        --color2: #e6ac7c;
        --color3: #ffffff;
        --color4: #e6ac7c;
        --color5: #deb887;
        --color6: #ffe4c4;
        --finalSize: 50vmin;
        left: 70%;
        top: 60%;
        animation-delay: -0.4s;
      }
    }

    &:nth-child(4) {
      --x: 10vmin;
      --y: -40vmin;

      &,
      &::before,
      &::after {
        --color1: #e6ac7c;
        --color2: #ffffff;
        --color3: #ffe4c4;
        --color4: #e6ac7c;
        --color5: #e6ac7c;
        --color6: #deb887;
        --finalSize: 55vmin;
        left: 20%;
        top: 40%;
        animation-delay: -0.6s;
      }
    }

    &:nth-child(5) {
      --x: -20vmin;
      --y: -60vmin;
      
      &,
      &::before,
      &::after {
        --color1: #ffe4c4;
        --color2: #e6ac7c;
        --color3: #e6ac7c;
        --color4: #ffffff;
        --color5: #deb887;
        --color6: #e6ac7c;
        --finalSize: 65vmin;
        left: 80%;
        top: 30%;
        animation-delay: -0.8s;
      }
    }

    &:nth-child(6) {
      --x: 0vmin;
      --y: -25vmin;

      &,
      &::before,
      &::after {
        --color1: #e6ac7c;
        --color2: #e6ac7c;
        --color3: #ffe4c4;
        --color4: #deb887;
        --color5: #ffffff;
        --color6: #e6ac7c;
        --finalSize: 50vmin;
        left: 50%;
        top: 30%;
        animation-delay: -1.0s;
      }
    }
  }
}

@keyframes firework {
  0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
  50% { width: 0.5vmin; opacity: 1; }
  100% { width: var(--finalSize); opacity: 0; }
}