#waitingWindow {
   position: fixed;
   inset: 0;
   width: 100%;
   height: 100%;
   background: #ffffffaa;
   display: none;
   justify-content: center;
   align-items: center;
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   z-index: 100;

   opacity: 0;
   transition-property: overlay display opacity;
   transition-duration: 300ms;
   transition-behavior: allow-discrete;

   .center {
      position: absolute;
      height: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      gap: 5svw;
      align-items: center;

      .wave {
         width: 8px;
         height: 150px;
         background: var(--main-bg);
         border-radius: 20px;
         transform: scale(0);
      }
      
   }
   
   &.active {
      display: flex;
      opacity: 1;
      
      .center .wave {
         animation: wave 1s linear infinite;
         animation-delay: calc(var(--delay) * 1s);
      }

      @starting-style {
         opacity: 0;
      }
   }
}

@keyframes wave {
   0% {
      transform: scale(0);
   }
   50% {
      transform: scale(1);
   }
   100% {
      transform: scale(0);
   }
}