Overflow:hidden breaks z-index and translateZ but 'visible' does not. Why?

Question

I'm trying to make a 3D art piece that has some layers in front of the frame layer and some layers behind the frame layer. I want the frame to mask off the layers behind it, and still be able to see the depth when I rotate the art. I can do this without making the frame mask the layers behind it, and it works fine, but if I change the frame's overflow to hidden, or if I try a clipping path, the layers behind the frame lose their depth and become flat.

Here's a codepen example: https://codepen.io/Tom-Columbus/pen/yLGVgRM

body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
perspective: 1000px;
overflow: hidden; 
}

.artwork {
width: 509px;
height: 768px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
box-shadow:
  rgba(22, 31, 39, 0.42) 0px 60px 123px -25px,
  rgba(19, 26, 32, 0.08) 0px 35px 75px -35px;
z-index: 12;
}

.layer {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
transform-style: preserve-3d;
}

.frame {
position: fixed;
width: 509px;
height: 768px;
background-size: cover;
transform-style: preserve-3d;
border: 1px solid #333;
transform: translateZ(0px);
}

I've tried masking the layers in the frame with these lines... overflow:hidden; clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

^ In the example you can see the depth between the moon and the flower, but the edge of the moon and flower are also visible outside of the frame layer.

And if you apply "overflow:hidden" or the clipping path, the moon and flower's edge will no longer be visible outside of the frame layer, but they lose their depth and become flat.

I've read about relative and absolute positions messing with the masking, and I've tried a few different combos but can't seem to figure it out. I really appreciate any help I can get, feel like I'm out of ideas.

I'm on Mac (Ventura 13.5.1) and Chrome browser