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

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!