.cube_scene {
  width: 320px;          /* fits smallest iPhone width */
  height: 320px;
  perspective: 900px;    /* deeper 3D effect for larger cube */
  margin: 80px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
  animation: rotateCube 12s infinite linear;
}

.cube__face {
  position: absolute;
  width: 340px;
  height: 340px;
  border: 2px solid #ccc;
  background-size: cover;
  background-position: center;
  opacity: 0.95;
}

/* 3D positions — translateZ is half of cube size (340/2 = 170px) */
.cube__face--front  { transform: rotateY(0deg) translateZ(170px); }
.cube__face--back   { transform: rotateY(180deg) translateZ(170px); }
.cube__face--right  { transform: rotateY(90deg) translateZ(170px); }
.cube__face--left   { transform: rotateY(-90deg) translateZ(170px); }
.cube__face--top    { transform: rotateX(90deg) translateZ(170px); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(170px); }

@keyframes rotateCube {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}