.cube-section { display: flex; justify-content: center; align-items: center; padding: 80px 20px; perspective: 1200px; } .cube-container { width: 260px; height: 260px; position: relative; transform-style: preserve-3d; animation: spinCube 16s infinite cubic-bezier(0.25, 0.1, 0.25, 1); } .cube-face { position: absolute; width: 260px; height: 260px; background: rgba(15, 15, 15, 0.95); border: 1px solid rgba(var(--accent-color-rgb), 0.2); backdrop-filter: blur(10px); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 0 40px rgba(var(--accent-color-rgb), 0.1) inset, 0 10px 40px rgba(0, 0, 0, 0.5); backface-visibility: hidden; border-radius: var(--radius-md); } .face-1 { transform: rotateY(0deg) translateZ(130px); } .face-2 { transform: rotateY(90deg) translateZ(130px); } .face-3 { transform: rotateY(180deg) translateZ(130px); } .face-4 { transform: rotateY(-90deg) translateZ(130px); } @keyframes spinCube { 0%, 15% { transform: rotateY(0deg); } 25%, 40% { transform: rotateY(-90deg); } 50%, 65% { transform: rotateY(-180deg); } 75%, 90% { transform: rotateY(-270deg); } 100% { transform: rotateY(-360deg); } } @media (prefers-reduced-motion: reduce) { .cube-container { animation: none; transform: rotateY(0deg); } } .cube-stat-value { font-size: 3.5rem; font-weight: var(--font-weight-bold); margin-bottom: 10px; filter: drop-shadow(0 0 15px rgba(var(--accent-color-rgb), 0.5)); } .cube-stat-label { font-size: 1.2rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 2px; text-align: center; } @media (max-width: 600px) { .cube-container { width: 200px; height: 200px; } .cube-face { width: 200px; height: 200px; } .face-1 { transform: rotateY(0deg) translateZ(100px); } .face-2 { transform: rotateY(90deg) translateZ(100px); } .face-3 { transform: rotateY(180deg) translateZ(100px); } .face-4 { transform: rotateY(-90deg) translateZ(100px); } .cube-stat-value { font-size: 2.5rem; } .cube-stat-label { font-size: 1rem; } }