Rotating 3D card bug: weird layers order


I designed a rotating 3D Card. But it has this weird bug when you place the cursor exactly in the viewport center (I circled the cursor position on the attached picture).

The gray div that is meant to be the card’s volume pops to the front. It happens only in Safari (I tested only on Mac, so it might happen in other browsers as well).

Ideally, this div should always stay 1 px behind the div that contains the card face and reflections. How do I fix it?

p.s. Also, reportedly animation doesn’t work in Mozilla Firefox 108.0.1

Here is my public share link
Here’s the published page