<div class="cube-workspace">
<div class="cube-spinner">
<div class="cube-face cube-front"></div>
<div class="cube-face cube-back"></div>
<div class="cube-face cube-right"></div>
<div class="cube-face cube-left"></div>
<div class="cube-face cube-top"></div>
<div class="cube-face cube-bottom"></div>
</div>
<p class="loading-label">Initializing Engine</p>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #020617;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.cube-workspace {
perspective: 800px;
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
}
.cube-spinner {
position: relative;
width: 80px;
height: 80px;
transform-style: preserve-3d;
animation: spin-cube 3s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95);
}
@keyframes spin-cube {
0% { transform: rotateX(0deg) rotateY(0deg); }
33% { transform: rotateX(180deg) rotateY(0deg); }
66% { transform: rotateX(180deg) rotateY(180deg); }
100% { transform: rotateX(360deg) rotateY(360deg); }
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
background: rgba(59, 130, 246, 0.2);
border: 2px solid #3b82f6;
box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.5), 0 0 20px rgba(59, 130, 246, 0.2);
}
/* Mathematically accurate cube assembly securely placed */
.cube-front { transform: rotateY(0deg) translateZ(40px); }
.cube-back { transform: rotateY(180deg) translateZ(40px); }
.cube-right { transform: rotateY(90deg) translateZ(40px); }
.cube-left { transform: rotateY(-90deg) translateZ(40px); }
.cube-top { transform: rotateX(90deg) translateZ(40px); }
.cube-bottom { transform: rotateX(-90deg) translateZ(40px); }
.loading-label {
color: #38bdf8;
font-weight: 700;
letter-spacing: 4px;
text-transform: uppercase;
margin: 0;
animation: pulse-op 1.5s infinite alternate;
}
@keyframes pulse-op {
to { opacity: 0.3; }
}
