.shape-container{perspective:1000px;perspective-origin:50%}.cube-3d{width:60px;height:60px;transform-style:preserve-3d;animation:15s linear infinite rotateCube;position:relative}@keyframes rotateCube{0%{transform:rotateX(0)rotateY(0)rotate(0)}to{transform:rotateX(360deg)rotateY(360deg)rotate(0)}}.cube-face{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(135deg,#ff006e 0%,#ff69b4 15%,#8338ec 30%,#3a86ff 45%,#06ffa5 60%,#0ff 75%,#fbbf24 90%,#ff006e 100%) 0 0/400% 400%;border:2px solid #ffffffe6;width:60px;height:60px;animation:6s infinite holographicGradient;position:absolute;box-shadow:0 0 20px #8a2bec99,inset 0 0 15px #ffffff4d}@keyframes holographicGradient{0%{filter:hue-rotate()brightness(1.2);background-position:0%}50%{filter:hue-rotate(180deg)brightness(1.4);background-position:100%}to{filter:hue-rotate(360deg)brightness(1.2);background-position:0%}}.cube-front{transform:rotateY(0)translateZ(30px)}.cube-back{transform:rotateY(180deg)translateZ(30px)}.cube-right{transform:rotateY(90deg)translateZ(30px)}.cube-left{transform:rotateY(-90deg)translateZ(30px)}.cube-top{transform:rotateX(90deg)translateZ(30px)}.cube-bottom{transform:rotateX(-90deg)translateZ(30px)}.cube-3d-right{animation:18s linear infinite reverse rotateCube}
