.weld-bubble {
    --size: 10px;
    width: var(--size);
    height: var(--size);
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 calc(var(--size) * 2) var(--size) #fff;
    animation: welding-buble-effect 1s 1 forwards;
    translate: -50% -50%;
    pointer-events: none;

  }
  
  .weld-bubble:nth-child(4) {
    position: absolute;
    left: 50%;
    top: 50%;
  }
  
  .weld-bubble:nth-child(3) {
    --size: 10px;
    position: absolute;
    left: calc(50% - 2.5px);
    top: calc(50% + 2.5px);
    animation-delay: 0.1s;
  }
  
  .weld-bubble:nth-child(2) {
    --size: 10px;
    position: absolute;
    left: calc(50% - 5px);
    top: calc(50% + 5px);
    animation-delay: 0.2s;
  }
  
  .weld-bubble:nth-child(1) {
    --size: 5px;
    position: absolute;
    left: calc(50% - 7.5px);
    top: calc(50% + 7.5px);
    animation-delay: 0.3s;
  }
  
  @keyframes welding-buble-effect {
    0% {
      scale: 1;
      box-shadow: 0 0 calc(var(--size)) var(--size) rgb(166, 215, 248);
    }
    7.5% {
      scale: 1.5;
    }
    33% {
      scale: 1;
      background: #f0f2ee;
      box-shadow: 0 0 calc(5px) 5px #d4602e;
    }
    66% {
      width: calc(var(--size) / 2);
      height: calc(var(--size) / 2);
      background: #edeca9;
      box-shadow: 0 0 calc(5px) 5px #d4602e;
    }
    75% {
      width: 0;
      height: 0;
      box-shadow: 0 0 calc(5px) 5px #d4602e;
    }
    100% {
      width: 0;
      height: 0;
      box-shadow: 0 0 0 0 #d4602e;
    }
  }