:root {
  --dice-size: 120px;
  --half-size: 60px;
}

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

.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;
  backdrop-filter: blur(5px);
  display: grid;
  padding: 16px;
  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 Y ONDAS DE PULSO EN EL SUELO
        ========================================= */
.floor-shadow {
  position: absolute;
  bottom: -5px;
  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;
}

/* Ondas de pulso NFC / Conexión */
.pulse-wave {
  position: absolute;
  bottom: -1px;
  width: 60px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  animation:
    pulseWaveExpand 2s infinite ease-out,
    shadowColorCycle 15s infinite;
}

.pulse-wave:nth-child(2) {
  animation-delay: 1s;
}

/* =========================================
           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;
  }
}

@keyframes pulseWaveExpand {
  0% {
    transform: scale(0.5);
    opacity: 1;
    border-width: 3px;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
    border-width: 1px;
  }
}

/* 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);
    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);
    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 y ondas coincidiendo con el dado */
@keyframes shadowColorCycle {
  0%,
  18% {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.3);
  }
  20%,
  38% {
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(20, 20, 25, 0.5);
  }
  40%,
  58% {
    border-color: rgba(255, 94, 0, 0.6);
    background: rgba(255, 94, 0, 0.4);
  }
  60%,
  78% {
    border-color: rgba(0, 180, 216, 0.6);
    background: rgba(10, 37, 64, 0.4);
  }
  80%,
  98% {
    border-color: rgba(76, 201, 240, 0.6);
    background: rgba(27, 67, 50, 0.4);
  }
  100% {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.3);
  }
}

/* Color de los iconos */
@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;
  }
}