After pseudo-element overlaps the background-color of the container element when transform property added to the container

Question

When I add the transform: translateX(100px); property to the container, its background changes to the background of the ::after pseudo-element.

The ::after pseudo-element has a z-index: -1 and I don't understand why its background overlaps the background of the div.

This also happens when I add the property directly in the CSS without JS.

const div = document.querySelector('div');

document.querySelector('button').addEventListener('click', e => {
    div.classList.toggle('transform');  
});

*, ::after {
  box-sizing: border-box;  
}

div {
  align-items: center;
  background: #fff;
  border-style: solid;
  border-radius: 50%;
  border-width: 32px;
  border-color: blue;
  box-shadow: 0 10px rgba(0,0,0,.2) inset;
  display: flex;
  height: 8rem;
  justify-content: center;
  position: relative;
  width: 8rem;
  margin-bottom: 2rem;
}

div::after {
  border-radius: 50%;
  bottom: -2.6rem;
  content: "";
  height: calc(100% + 64px);
  position: absolute;
  width: calc(100% + 64px);
  z-index: -1;
  background: rgba(88,113,247,.5);
}

div.transform {
  transform: translateX(100px);
}

<div></div>
<button>Toggle transform property</button>