zindex not working on pseudoelements

Question

css gurus. I have been googling for a while with no success. I am currently having trouble trying to set the zindex of my before pseudoelement. It works on one of my clouds(line 5) but as soon as I override the transform property with another class it seems to ignore z-index: -1. You'll notice a huge white circle on the clouds(the pseudoelement)

codepen here: https://codepen.io/bautistaaa/pen/zPLpxo?editors=1100

cloud pseudoelement css

    .cloud:after, .cloud:before {
  background: #fff;
    content: '';
    position: absolute;
    z-index: -1;
}

.cloud:after {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;

    height: 100px;
    left: 50px;
    top: -50px;
    width: 100px;
}

  .cloud:before {
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;

    width: 180px;
    height: 180px;
    right: 50px;
    top: -90px;
  }

as soon as I try to introduce transform

.cloud-group-1 .biggest-2x {
  transform: scale(3);
  -webkit-transform: scale(3);
  top: 400px;
}

It seems to ignore the z:index and I am not sure why.