/**
 * Visual Effects - Lazy-loaded for components needing glass/glow effects
 * Import this in components that need luxury visual effects
 * 
 * Usage:
 * import '@/styles/effects.css';
 */

/* Luxury glassmorphism utility */
.glass-luxury {
  background: var(--glass-medium);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
}

.glass-luxury-dark {
  background: hsla(0 0% 0% / 0.6);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid hsla(0 0% 100% / 0.1);
}

/* Premium gradient backgrounds */
.bg-luxury-mesh {
  background-image: 
    radial-gradient(at 40% 20%, hsla(280, 100%, 70%, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 60%, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 60%, 0.05) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 70%, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 70%, 0.08) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 0.08) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 70%, 0.08) 0px, transparent 50%);
}

.btn-glow-emerald:hover {
  box-shadow: 0 0 25px hsl(var(--primary) / 0.4);
}

.btn-glow-danger:hover {
  box-shadow: 0 0 25px hsl(0 84% 60% / 0.4);
}

.btn-glow-warning:hover {
  box-shadow: 0 0 25px hsl(45 93% 47% / 0.4);
}

/* Animated gradient for About Us page */
@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 8s ease infinite;
}

/* Breathing glow animation for OrbitalHero */
@keyframes glow-breathe {
  0%, 100% { 
    opacity: 0.15;
    transform: translate(-50%, -50%) scale(1);
  }
  50% { 
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

.animate-glow-breathe {
  animation: glow-breathe 5s ease-in-out infinite;
}

/* Non-critical gradient utilities - moved from index.css for lazy loading */
.gradient-premium {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-heart-icon {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #991b1b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gradient-comment-icon {
  background: linear-gradient(135deg, #d4d4d8 0%, #a1a1aa 50%, #71717a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}