Masking an object to make it appear as if it goes behind the item it's rotating around

Question

I'm trying to make a 'dot' orbit around another object (circle) but due to the z-index the dot always appears above the circle it is meant orbiting around.

CodePen link: https://codepen.io/moy/pen/ROVZXd?editors=1100

Ideally the 2nd half of the animation would take place behind the object so it's not seen until it comes out the other side - is that possible?

I thought about fading out the object that is moving around but I don't think that would give a smooth/masked effect?

A bit stuck as to how I'd mask this area as I can't see a way the CSS would know it's meant to be hidden. I thought maybe I could change the z-index 50% though the animation it and reset it at 0%/100% but that doesn't appear to do anything.

Any ideas? Thanks in advance!

.earth {
  background: white;
  border: 1px solid black;
  border-radius: 50%;
  display: block;
  height: 100px;
  margin: 30px auto;
  position: relative;
  width: 100px;
  z-index: 20;
}

.orbit {
  border: 2px #eee transparent;
  border-radius: 50%;
  height: 140px;
  margin: auto;
  position: absolute;
  top: -20px;
  left: -20px;
  transform: rotateZ(60deg) rotateY(60deg);
  transform-style: preserve-3d;
  width: 140px;
  z-index: 10;
}
.orbit .moon {
  animation: move ease-in-out infinite;
  animation-duration: 2s;
  background: black;
  border-radius: 50%;
  height: 15px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 15px;
  z-index: 10;
}

@keyframes move {
  0% {
    transform: rotateZ(-90deg) translateX(70px) rotateZ(90deg) rotateY(-70deg); z-index: 20;
  }
  50% {
    z-index: -20;
  }
  100% {
    transform: rotateZ(270deg) translateX(70px) rotateZ(-270deg) rotateY(-70deg); z-index: 20;
  }
}

<div class="earth">
  <div class="orbit">
    <div class="moon"></div>
  </div>
</div>

Answer 1

I seem to have solved this by adding a negative z-index to an animation applied to the parent .orbit

Link: https://codepen.io/moy/pen/wZdpRw?editors=1100

I initially applied this at 50% through the animation as that should be the furthest away the dot is before it comes back behind the larger circle. However this didn't work, setting it on 100% did work. Not entirely sure why but it seems to work!