$diameter1: 30px;
$diameter2: 20px;
$diameter3: 15px;
$diameter4: 12px;
$bg1: #ffb924;
$bg2: #ff8b24;
$bg3: #ff6724;
$bg4: #ff2e24;

#cursor {
  position: absolute;
  z-index: 1;
  filter:url('#goo');
  transform-origin: center;
  
  .blob {
    position: absolute;
    margin: -#{$diameter1/2} 0 0 -#{$diameter1/2};
    width: $diameter1;
    height: $diameter1;
    border-radius: 100%;
    background: $bg1;
    top: 50%;
    left: 50%;
    pointer-events: none;
    
    &:nth-child(2) {
      width: $diameter2;
      height: $diameter2;
      margin: -#{$diameter2/2} 0 0 -#{$diameter2/2};
      z-index: -1;
      background: $bg2;
    }
    
    &:nth-child(3) {
      width: $diameter3;
      height: $diameter3;
      margin: -#{$diameter3/2} 0 0 -#{$diameter3/2};
      z-index: -2;
      background: $bg3;
      animation: move2 .3s forwards infinite;
    }
    
    &:nth-child(4) {
      width: $diameter4;
      height: $diameter4;
      margin: -#{$diameter4/2} 0 0 -#{$diameter4/2};
      z-index: 30;
      background: $bg4;
      animation: move3 .5s forwards infinite;
    }
  }
}

@keyframes move2 {
  0% {
    left: 5px;
    top: -5px;
  }
  100% {
    left: -5px;
    top: 5px
  }
}

@keyframes move3 {
  0% {
    left: 5px;
    top: 5px;
  }
  100% {
    left: -5px;
    top: -5px
  }
}