body {
  margin: 0;
  height: 100vh;
  background: #000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  perspective: 1200px;
  font-family: 'Tektur', sans-serif;
  position: relative;
  color: #0ff;
}

canvas#stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  background: #000;
}

.cube-container {
  width: 250px;
  height: 250px;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(20deg);
  transition: transform 0.2s ease;
  cursor: grab;
  position: relative;
  z-index: 1;
}

.face {
  position: absolute;
  width: 250px;
  height: 250px;
  background: #111;
  border: 2px solid #0ff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0ff;
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 0 20px #0ff;
  user-select: none;
  backface-visibility: hidden;
  transition: background 0.3s;
  pointer-events: auto;
}

.face:hover {
  background: #1a1a1a;
}

.front  { transform: translateZ(125px); }
.back   { transform: rotateY(180deg) translateZ(125px); }
.right  { transform: rotateY(90deg) translateZ(125px); }
.left   { transform: rotateY(-90deg) translateZ(125px); }
.top    { transform: rotateX(90deg) translateZ(125px); }
.bottom { transform: rotateX(-90deg) translateZ(125px); }

/* Loader Styles */
#loaderWrapper {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loader-cube {
  width: 60px;
  height: 60px;
  position: relative;
  transform-style: preserve-3d;
  animation: loaderSpin 3s linear infinite;
}

.loader-cube .face {
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 255, 255, 0.15);
  border: 2px solid #0ff;
  box-shadow: 0 0 10px #0ff;
}

.loader-cube .front  { transform: translateZ(30px); }
.loader-cube .back   { transform: rotateY(180deg) translateZ(30px); }
.loader-cube .right  { transform: rotateY(90deg) translateZ(30px); }
.loader-cube .left   { transform: rotateY(-90deg) translateZ(30px); }
.loader-cube .top    { transform: rotateX(90deg) translateZ(30px); }
.loader-cube .bottom { transform: rotateX(-90deg) translateZ(30px); }

@keyframes loaderSpin {
  0%   { transform: rotateX(0deg) rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}

.loading-text {
  margin-top: 3rem;
  font-size: 1.2rem;
  letter-spacing: 1px;
  color: #0ff;
  font-family: monospace;
}

.dots::after {
  content: '.';
  animation: dots 2s steps(4, end) infinite;
}

@keyframes dots {
  0%   { content: '.'; }
  25%  { content: '..'; }
  50%  { content: '...'; }
  75%  { content: '.'; }
  100% { content: '..'; }
}

/* Smooth fade-out on cube click */
#cubeWrapper.fade-out {
  animation: fadeOut 0.6s forwards;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    transform: scale(0.9) rotateX(30deg) rotateY(30deg);
    pointer-events: none;
  }
}
#cubeWrapper.zoom-out {
  animation: flyOut 0.7s ease-in-out forwards;
}

@keyframes flyOut {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
    pointer-events: none;
  }
}