/* ============================================
   CUBE V3: Hover, Interaction, Images & Responsive
   ============================================ */

/* Hover glow */
:is(.cube2, .cube, .cube-container, .floating-cube):hover :is(.face, .cube-face) {
  border-color: hsl(var(--cube-edge-hsl) / 0.98) !important;
  box-shadow: 0 0 calc(10px * var(--cube-glow-strength)) hsl(var(--cube-edge-hsl) / 0.6),
    0 0 calc(20px * var(--cube-glow-strength)) hsl(var(--cube-edge-hsl) / 0.4);
}

/* Interaction state (dragging) */
:is(.cube2, .cube, .cube-container, .floating-cube).interacting :is(.face, .cube-face) {
  border-color: hsl(var(--cube-edge-hsl) / 0.98) !important;
  box-shadow: 0 0 calc(10px * var(--cube-glow-strength)) hsl(var(--cube-edge-hsl) / 0.6),
    0 0 calc(20px * var(--cube-glow-strength)) hsl(var(--cube-edge-hsl) / 0.4);
}

/* Image layers */
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face)::before {
  content: ""; position: absolute; inset: 0;
  background-repeat: no-repeat; background-size: cover; background-position: center;
  opacity: var(--cube-img-opacity);
  filter: brightness(var(--cube-brightness)) saturate(var(--cube-saturation)) contrast(var(--cube-contrast));
  transition: opacity 120ms ease-out, filter 120ms ease-out;
  pointer-events: none !important;
}

/* Brighten on hover/interaction */
:is(.cube2, .cube, .cube-container, .floating-cube):hover :is(.face, .cube-face)::before,
:is(.cube2, .cube, .cube-container, .floating-cube).interacting :is(.face, .cube-face)::before {
  opacity: var(--cube-img-hover-opacity);
  filter: brightness(calc(var(--cube-brightness) * 1.2)) saturate(calc(var(--cube-saturation) * 1.4)) contrast(var(--cube-contrast));
}

/* Face images */
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).front::before  { background-image: url('../gallery/1 (1).jpg'); }
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).back::before   { background-image: url('../gallery/1 (2).jpg'); }
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).right::before  { background-image: url('../gallery/1 (3).jpg'); }
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).left::before   { background-image: url('../gallery/1 (4).jpg'); }
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).top::before    { background-image: url('../gallery/1 (5).jpg'); }
:is(.cube2, .cube, .cube-container, .floating-cube) :is(.face, .cube-face).bottom::before { background-image: url('../gallery/1 (6).jpg'); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  :is(.cube2, .cube, .cube-container), :is(.cube2, .cube, .cube-container) :is(.face, .cube-face) { transition: none; }
  .floating-cube { animation: none !important; }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .floating-cube, .floating-cube.cube { width: 200px !important; height: 200px !important; }
  .floating-cube .face { width: 200px !important; height: 200px !important; }
  .floating-cube .face.front  { transform: rotateY(0deg) translateZ(100px) !important; }
  .floating-cube .face.back   { transform: rotateY(180deg) translateZ(100px) !important; }
  .floating-cube .face.right  { transform: rotateY(90deg) translateZ(100px) !important; }
  .floating-cube .face.left   { transform: rotateY(-90deg) translateZ(100px) !important; }
  .floating-cube .face.top    { transform: rotateX(90deg) translateZ(100px) !important; }
  .floating-cube .face.bottom { transform: rotateX(-90deg) translateZ(100px) !important; }
}