/* ============================================
   CUBE V3: Variables, Wrapper, 3D Context & Faces
   ============================================ */
:root {
  --cube-edge-hsl: 220 75% 75%;
  --cube-edge-alpha: 0.35;
  --cube-edge-width: 1.5px;
  --cube-glow-strength: 1.2;
  --cube-img-opacity: 0.5;
  --cube-img-hover-opacity: 0.75;
  --cube-brightness: 1.1;
  --cube-saturation: 1.2;
  --cube-contrast: 1.05;
}

:is(.cube2, .cube, .cube-container, .floating-cube) { transform-style: preserve-3d !important; will-change: transform; pointer-events: auto; cursor: grab; }
:is(.cube2, .cube, .cube-container, .floating-cube):active { cursor: grabbing; }

.cube-container { perspective: 1200px; perspective-origin: 50% 50%; transform-style: preserve-3d !important; position: relative; z-index: 10; }
.floating-cube, .floating-cube.cube { position: relative; width: 280px; height: 280px; transform-style: preserve-3d !important; z-index: 10; }
.cube-container .floating-cube, .cube-container .cube { transform-style: preserve-3d !important; }

#home, #home > div, #home .hero-variant, #home .max-w-7xl, #home .grid, #home .order-2, #home .flex { transform-style: preserve-3d; }

:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face) {
  position: absolute; top: 0; left: 0;
  background: transparent !important;
  border: var(--cube-edge-width) solid hsl(var(--cube-edge-hsl) / var(--cube-edge-alpha)) !important;
  box-sizing: border-box; backface-visibility: visible; pointer-events: auto;
  transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
  transform-style: preserve-3d;
}

.floating-cube .face { width: 280px; height: 280px; transform-style: preserve-3d; }

.floating-cube .face.front  { transform: rotateY(0deg) translateZ(140px) !important; }
.floating-cube .face.back   { transform: rotateY(180deg) translateZ(140px) !important; }
.floating-cube .face.right  { transform: rotateY(90deg) translateZ(140px) !important; }
.floating-cube .face.left   { transform: rotateY(-90deg) translateZ(140px) !important; }
.floating-cube .face.top    { transform: rotateX(90deg) translateZ(140px) !important; }
.floating-cube .face.bottom { transform: rotateX(-90deg) translateZ(140px) !important; }

.floating-cube .face {
  border-color: hsl(var(--cube-edge-hsl) / var(--cube-edge-alpha)) !important;
  box-shadow: 0 0 8px hsl(var(--cube-edge-hsl) / 0.4), inset 0 0 8px hsl(var(--cube-edge-hsl) / 0.2);
}