@nebulaai/lumina-ui/src/styles.css

Enterprise-grade glass morphism UI components with neural-inspired design system

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Lumina UI Styles */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Glass Morphism Effects */
.glass-effect {
  @apply bg-white/10 backdrop-blur-md border border-white/20 shadow-lg;
}

.glass-subtle {
  @apply bg-white/5 backdrop-blur-sm border border-white/10;
}

.glass-intense {
  @apply bg-white/20 backdrop-blur-xl border border-white/30 shadow-xl;
}

/* Neural Activity Animations */
@keyframes neural-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.neural-pulse {
  animation: neural-pulse 2s ease-in-out infinite;
}

@keyframes data-flow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.data-flow {
  animation: data-flow 3s linear infinite;
}

/* Quantum Effects */
@keyframes quantum-shift {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05) rotate(90deg); }
  50% { transform: scale(0.95) rotate(180deg); }
  75% { transform: scale(1.02) rotate(270deg); }
}

.quantum-effect {
  animation: quantum-shift 4s ease-in-out infinite;
}

/* Glow Effects */
.glow-blue {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.glow-purple {
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.glow-green {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
}

/* Holographic Effects */
.holographic {
  background: linear-gradient(
    45deg,
    rgba(255, 0, 150, 0.3),
    rgba(0, 255, 255, 0.3),
    rgba(255, 255, 0, 0.3),
    rgba(255, 0, 150, 0.3)
  );
  background-size: 200% 200%;
  animation: holographic-shift 3s ease infinite;
}

@keyframes holographic-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particle Effects */
.particle-field {
  position: relative;
  overflow: hidden;
}

.particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

/* Neon Button Effects */
.neon-button {
  position: relative;
  background: transparent;
  border: 2px solid;
  overflow: hidden;
  transition: all 0.3s ease;
}

.neon-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.neon-button:hover::before {
  left: 100%;
}

/* Responsive Glass Effects */
@media (max-width: 768px) {
  .glass-effect {
    @apply bg-white/15 backdrop-blur-sm;
  }

  .glass-intense {
    @apply bg-white/25 backdrop-blur-lg;
  }
}

/* Dark theme overrides */
.dark .glass-effect {
  @apply bg-black/20 border-white/10;
}

.dark .glass-subtle {
  @apply bg-black/10 border-white/5;
}

.dark .glass-intense {
  @apply bg-black/30 border-white/20;
}