/**
 original: https://github.com/clarkode/3d-cube-animation-css
 mejoras:  https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style
 recomendaciones: ChatGPT
 adaptacion: AGD Soporte y Sistemas
*/

.center-cube {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-cube {
  width: 500px;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.scene{
  perspective: 350vw;
  perspective-origin: 100% 100%;
  width: inherit;
  height: inherit;
  margin: auto;
  padding: 0;
}

.cube{
  --cube-width: 300px;
  --cube-height: 300px;
  --cube-face: 150px;
  --cube-opacity: 0.90;
  --cube-delay: 13s;

  transform-style: preserve-3d;
  width: var(--cube-width);
  height: var( --cube-height);
  margin: 3em auto 0 auto;
  position: relative;
  animation: loop var(--cube-delay) linear infinite;
}

.cube img{
  display: flex;
  opacity: var(--cube-opacity);
  align-items: center;
  justify-content: center;
  width: inherit;
  height: inherit;
  position: absolute;
  backface-visibility: inherit;
}

.cube img:nth-child(1){
  transform: rotateY(0deg) translateZ(var(--cube-face));
}

.cube img:nth-child(2){
  transform: rotateY(90deg) translateZ(var(--cube-face));
}

.cube img:nth-child(3){
  transform: rotateY(180deg) translateZ(var(--cube-face));
}

.cube img:nth-child(4){
  transform: rotateY(-90deg) translateZ(var(--cube-face));
}

.cube img:nth-child(5){
  transform: rotateX(90deg) translateZ(var(--cube-face));
}

.cube img:nth-child(6){
  transform: rotateX(-90deg) translateZ(var(--cube-face));
}

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

/* Estilos para tamaños de pantalla pequeños (por ejemplo, teléfonos móviles) */
@media (max-width: 767px) {
  .scene {
    transform: scale(0.50);
  }
}

/* Estilos para tamaños de pantalla medianos (por ejemplo, tablets) */
@media (min-width: 768px) and (max-width: 1023px) {
  .scene {
    transform: scale(0.75);
    margin-top: 10%;
  }
}

/* Estilos para tamaños de pantalla grandes (por ejemplo, computadoras de escritorio) */
@media (min-width: 1024px) {
  .scene {
    transform: scale(1);
    margin-top: 10%;
  }
}