/* ---- Neumorphic 3D cube ---- */
:root{
  --cube-size: clamp(180px, 28vw, 380px);
}


.cube-wrap{
  perspective: 1200px;
  filter: drop-shadow(0 20px 30px rgba(15,23,42,.12));
}
.cube{
  position: relative;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  animation: cubeSpin 16s linear infinite;
}
.cube__face{
  position:absolute;
  width:100%; height:100%;
  border-radius: 18px;
  /* neumorphic-ish panel */
  background: linear-gradient(145deg, var(--surface), #ffffff);
  box-shadow: var(--shadow-soft);
  /* subtle texture lines */
  background-image:
    linear-gradient(160deg, rgba(14,107,168,.08), transparent 60%),
    linear-gradient(45deg, rgba(0,0,0,.04) 0 1px, transparent 1px);
  background-size: auto, 8px 8px;
  opacity:.98;
}

/* Faces positioning */
.cube__face.front  { transform: translateZ(calc(var(--cube-size)/2)); }
.cube__face.back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size)/2)); }
.cube__face.right  { transform: rotateY( 90deg) translateZ(calc(var(--cube-size)/2)); }
.cube__face.left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size)/2)); }
.cube__face.top    { transform: rotateX( 90deg) translateZ(calc(var(--cube-size)/2)); }
.cube__face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size)/2)); }




/* Animation */
@keyframes cubeSpin{
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  50%  { transform: rotateX(-20deg) rotateY(180deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}



/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .cube{ animation: none; }
}