/* Cube Animation Styles - From Original MeshStudios */

.scene {
  width: 200px;
  height: 250px;
  position: relative;
  margin: 0 auto;
  perspective: 1000px;
}

.cube {
  width: 100px;
  height: 100px;
  position: absolute;
  z-index: 2;
  transform: rotateX(-36deg) rotateY(45deg);
  transform-style: preserve-3d;
}

.cube_count_1 {
  z-index: 2;
  left: 50px;
  animation: cube 2s 1s ease infinite;
}

.cube_count_1 .cube__face {
  animation-delay: 1s;
}

.cube_count_2 {
  z-index: 1;
  top: 38px;
  left: -16px;
  animation: cube 2s 1.1s ease infinite;
}

.cube_count_2 .cube__face {
  animation-delay: 1.1s;
}

.cube_count_3 {
  z-index: 1;
  top: 38px;
  left: 116px;
  animation: cube 2s 1.2s ease infinite;
}

.cube_count_3 .cube__face {
  animation-delay: 1.2s;
}

.cube_count_4 {
  z-index: 2;
  top: 116px;
  left: -16px;
  animation: cube 2s 1.1s ease infinite;
}

.cube_count_4 .cube__face {
  animation-delay: 1.1s;
}

.cube_count_5 {
  z-index: 1;
  top: 116px;
  left: 116px;
  animation: cube 2s 1.2s ease infinite;
}

.cube_count_5 .cube__face {
  animation-delay: 1.2s;
}

.cube_count_6 {
  z-index: 0;
  top: 154px;
  left: 50px;
  animation: cube 2s 1.3s ease infinite;
}

.cube_count_6 .cube__face {
  animation-delay: 1.3s;
}

/* Cube faces */
.cube__face {
  width: 100px;
  height: 100px;
  position: absolute;
  background: #fff;
  border: 6px solid black;
}

.cube__face--front {
  box-shadow: inset -6px -6px 0 0 black;
  animation: cube-face-front 2s ease infinite;
  transform: rotateY(0deg) translateZ(50px);
}

.cube__face--right {
  animation: cube-face-right 2s ease infinite;
  transform: rotateY(90deg) translateZ(50px);
}

.cube__face--back {
  animation: cube-face-back 2s ease infinite;
  transform: rotateY(180deg) translateZ(50px);
}

.cube__face--left {
  box-shadow: inset 6px -6px 0 0 black;
  animation: cube-face-left 2s ease infinite;
  transform: rotateY(-90deg) translateZ(50px);
}

.cube__face--top {
  box-shadow: inset -6px 6px 0 0 black;
  animation: cube-face-top 2s ease infinite;
  transform: rotateX(90deg) translateZ(50px);
}

.cube__face--bottom {
  transform: rotateX(-90deg) translateZ(50px);
}

@keyframes cube {
  0% { transform: rotateX(-36deg) rotateY(45deg) rotateZ(0); }
  100% { transform: rotateX(-126deg) rotateY(0deg) rotateZ(-45deg); }
}

@keyframes cube-face-front {
  0% { box-shadow: inset -6px -6px 0 0 black; }
  100% { box-shadow: inset 0 0 0 0 black; }
}

@keyframes cube-face-right {
  0% { box-shadow: inset 0 0 0 0 black; }
  50% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset 6px -6px 0 0 black; }
}

@keyframes cube-face-back {
  0% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset -6px -6px 0 0 black; }
}

@keyframes cube-face-left {
  0% { box-shadow: inset 6px -6px 0 0 black; }
  100% { box-shadow: inset 0 0 0 0 black; }
}

@keyframes cube-face-top {
  0% { box-shadow: inset -6px 6px 0 0 black; }
  50% { box-shadow: inset 0 0 0 0 black; }
  100% { box-shadow: inset 6px -6px 0 0 black; }
}

/* Animation control */
.animation-paused {
  animation-play-state: paused !important;
}

.animation-paused .cube__face {
  animation-play-state: paused !important;
}

/* Smooth transition to front-facing logo position */
.cube-stopped {
  animation: none !important;
  transform: rotateX(-36deg) rotateY(45deg) rotateZ(0deg) !important;
  transition: transform 1s ease-out !important;
}

.cube-stopped .cube__face {
  animation: none !important;
  transition: box-shadow 1s ease-out !important;
}

/* Final logo state - clean front-facing position */
.cube-stopped .cube__face--front {
  box-shadow: inset -6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--right {
  box-shadow: inset 6px -6px 0 0 black !important;
}

.cube-stopped .cube__face--top {
  box-shadow: inset -6px 6px 0 0 black !important;
}

.cube-stopped .cube__face--left {
  box-shadow: inset 0 0 0 0 black !important;
}

.cube-stopped .cube__face--back {
  box-shadow: inset 0 0 0 0 black !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .scene {
    width: 150px;
    height: 200px;
  }
  
  .cube {
    width: 75px;
    height: 75px;
  }
  
  .cube__face {
    width: 75px;
    height: 75px;
  }
  
  .cube__face--front,
  .cube__face--back,
  .cube__face--right,
  .cube__face--left {
    transform: rotateY(0deg) translateZ(37.5px);
  }
  
  .cube__face--front { transform: rotateY(0deg) translateZ(37.5px); }
  .cube__face--back { transform: rotateY(180deg) translateZ(37.5px); }
  .cube__face--right { transform: rotateY(90deg) translateZ(37.5px); }
  .cube__face--left { transform: rotateY(-90deg) translateZ(37.5px); }
  .cube__face--top { transform: rotateX(90deg) translateZ(37.5px); }
  .cube__face--bottom { transform: rotateX(-90deg) translateZ(37.5px); }
  
  .cube_count_2 { left: 75px; }
  .cube_count_3 { top: 75px; }
  .cube_count_4 { left: 75px; top: 75px; }
  .cube_count_5 { left: 37.5px; top: 37.5px; }
  .cube_count_6 { left: 37.5px; top: 112.5px; }
}