/* AI-Enhanced styles for the 3D cube and modern helpers */
:root {
  --cube-size: 180px;
  --ai-primary: #8b5cf6;
  --ai-secondary: #ec4899;
  --ai-accent: #06b6d4;
}

/* Scene container to provide perspective */
.scene {
  width: 320px;
  height: 320px;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.cube {
  width: var(--cube-size);
  height: var(--cube-size);
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(20deg);
  animation: cube-rotate 8s linear infinite;
}

.face {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: #0f172a;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,240,255,0.95));
  box-shadow: 0 12px 30px rgba(2,6,23,0.45), inset 0 1px 0 rgba(255,255,255,0.6);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.3s ease;
}

/* AI-themed cube enhancements */
.ai-cube .face {
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.9), 
    rgba(236, 72, 153, 0.8), 
    rgba(6, 182, 212, 0.9)
  );
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ai-cube:hover .face {
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3), inset 0 1px 0 rgba(255,255,255,0.8);
}

.face.face-front  { transform: translateZ(calc(var(--cube-size) / 2)); }
.face.face-back   { transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.face.face-right  { transform: rotateY(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.face.face-left   { transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.face.face-top    { transform: rotateX(90deg)  translateZ(calc(var(--cube-size) / 2)); }
.face.face-bottom { transform: rotateX(-90deg) translateZ(calc(var(--cube-size) / 2)); }

@keyframes cube-rotate {
  0%   { transform: rotateX(-20deg) rotateY(0deg); }
  25%  { transform: rotateX(-10deg) rotateY(90deg); }
  50%  { transform: rotateX(10deg) rotateY(180deg); }
  75%  { transform: rotateX(0deg) rotateY(270deg); }
  100% { transform: rotateX(-20deg) rotateY(360deg); }
}

/* AI pulse animation */
@keyframes ai-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.05); }
}

/* Gradient text animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .cube { animation: none; }
}

/* Make the scene responsive */
@media (max-width: 768px) {
  .scene { width: 220px; height: 220px; }
  :root { --cube-size: 140px; }
  .face { font-size: 1.5rem; }
}

/* Enhanced glass morphism effects */
.bg-white\/3 { 
  background-color: rgba(255,255,255,0.03); 
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* AI-themed gradient backgrounds */
.ai-gradient-bg {
  background: linear-gradient(-45deg, #8b5cf6, #ec4899, #06b6d4, #10b981);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

/* Hover effects for cards */
.ai-card {
  transition: all 0.3s ease;
  border: 1px solid rgba(255,255,255,0.1);
}

.ai-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Animated icons */
.ai-icon {
  animation: ai-pulse 2s ease-in-out infinite;
}

/* Responsive enhancements */
@media (max-width: 768px) {
  .ai-cube .face { font-size: 1.5rem; }
}

/* End of AI-enhanced styles */