/* =========================================
           CONTENEDOR Y ESCENA 3D
        ========================================= */
.preloader-scene {
  width: 300px;
  height: 300px;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.smart-dice {
  width: var(--dice-size);
  height: var(--dice-size);
  position: relative;
  transform-style: preserve-3d;
  animation:
    rotate3D 6s infinite linear,
    floatDice 3s infinite ease-in-out alternate;
}

/* =========================================
           CARAS DEL DADO
        ========================================= */
.face {
  position: absolute;
  width: var(--dice-size);
  height: var(--dice-size);
  border-radius: 16px; /* Borde ligeramente más redondeado para el nuevo tamaño */
  backdrop-filter: blur(5px);
  display: grid;
  padding: 16px;
  /* Animación de colores cada 3 seg (5 colores = 15s total) */
  animation: faceColorCycle 15s infinite;
}

/* Posicionamiento 3D de cada cara */
.front {
  transform: rotateY(0deg) translateZ(var(--half-size));
}
.back {
  transform: rotateY(180deg) translateZ(var(--half-size));
}
.right {
  transform: rotateY(90deg) translateZ(var(--half-size));
}
.left {
  transform: rotateY(-90deg) translateZ(var(--half-size));
}
.top {
  transform: rotateX(90deg) translateZ(var(--half-size));
}
.bottom {
  transform: rotateX(-90deg) translateZ(var(--half-size));
}

/* =========================================
           ICONOS (ANIMACIÓN DE COLOR)
        ========================================= */
.icon-fill {
  animation: iconFillCycle 15s infinite;
}

.icon-stroke {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: iconStrokeCycle 15s infinite;
}

/* =========================================
           SOMBRA PROYECTADA EN EL SUELO
        ========================================= */
.floor-shadow {
  position: absolute;
  bottom: -80px;
  width: 80px;
  height: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  filter: blur(10px);
  animation:
    shadowScale 3s infinite ease-in-out alternate,
    shadowColorCycle 15s infinite;
}

/* =========================================
           ANIMACIONES (KEYFRAMES)
        ========================================= */
@keyframes rotate3D {
  0% {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
  }
}

@keyframes floatDice {
  0% {
    top: 0px;
  }
  100% {
    top: -20px;
  }
}

@keyframes shadowScale {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
}

/* Ciclo de colores: Blanco -> Negro -> Naranja -> Azul -> Verde */
@keyframes faceColorCycle {
  0%,
  18% {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
      inset 0 0 15px rgba(0, 0, 0, 0.05),
      0 0 10px rgba(255, 255, 255, 0.5);
  }
  20%,
  38% {
    background-color: rgba(20, 20, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow:
      inset 0 0 15px rgba(255, 255, 255, 0.1),
      0 0 10px rgba(0, 0, 0, 0.8);
  }
  40%,
  58% {
    background-color: rgba(255, 94, 0, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 0 15px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(255, 94, 0, 0.6);
  }
  60%,
  78% {
    background-color: rgba(10, 37, 64, 0.95); /* Midnight Blue */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 0 15px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(10, 37, 64, 0.6);
  }
  80%,
  98% {
    background-color: rgba(27, 67, 50, 0.95); /* Forest Green */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 0 15px rgba(255, 255, 255, 0.2),
      0 0 15px rgba(27, 67, 50, 0.6);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow:
      inset 0 0 15px rgba(0, 0, 0, 0.05),
      0 0 10px rgba(255, 255, 255, 0.5);
  }
}

/* Color de la sombra coincidiendo con el dado */
@keyframes shadowColorCycle {
  0%,
  18% {
    background: rgba(255, 255, 255, 0.3);
  }
  20%,
  38% {
    background: rgba(20, 20, 25, 0.5);
  }
  40%,
  58% {
    background: rgba(255, 94, 0, 0.4);
  }
  60%,
  78% {
    background: rgba(10, 37, 64, 0.4);
  }
  80%,
  98% {
    background: rgba(27, 67, 50, 0.4);
  }
  100% {
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Color de los iconos: Negros en la cara blanca, blancos en las demás */
@keyframes iconFillCycle {
  0%,
  18% {
    fill: #000;
  }
  20%,
  98% {
    fill: #fff;
  }
  100% {
    fill: #000;
  }
}

@keyframes iconStrokeCycle {
  0%,
  18% {
    stroke: #000;
  }
  20%,
  98% {
    stroke: #fff;
  }
  100% {
    stroke: #000;
  }
}