/* Premium Visual Effects & Glassmorphism */

/* Glassmorphism Base Classes */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.glass-light {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glass-dark {
  background: rgba(16, 17, 20, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-blue {
  background: linear-gradient(135deg, 
    rgba(0, 85, 255, 0.1) 0%, 
    rgba(38, 111, 255, 0.05) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 85, 255, 0.2);
}

.glass-green {
  background: linear-gradient(135deg, 
    rgba(37, 160, 112, 0.1) 0%, 
    rgba(91, 190, 152, 0.05) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37, 160, 112, 0.2);
}

/* Premium Background Patterns */
.bg-premium-gradient {
  background: linear-gradient(135deg, 
    var(--brand-dark-primary) 0%,
    var(--brand-dark-blue) 25%,
    var(--brand-dark-charcoal) 50%,
    var(--brand-dark-slate) 75%,
    var(--brand-dark-primary) 100%);
}

.bg-premium-mesh {
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 85, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(37, 160, 112, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(38, 111, 255, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, var(--brand-dark-primary) 0%, var(--brand-dark-charcoal) 100%);
}

.bg-geometric-pattern {
  background-image: 
    linear-gradient(30deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02)),
    linear-gradient(150deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02)),
    linear-gradient(30deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02)),
    linear-gradient(150deg, rgba(255, 255, 255, 0.02) 12%, transparent 12.5%, transparent 87%, rgba(255, 255, 255, 0.02) 87.5%, rgba(255, 255, 255, 0.02));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px;
}

/* Sophisticated Shadows */
.shadow-premium {
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.shadow-premium-lg {
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.shadow-glow-blue {
  box-shadow: 
    0 0 20px rgba(0, 85, 255, 0.3),
    0 0 40px rgba(0, 85, 255, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-glow-green {
  box-shadow: 
    0 0 20px rgba(37, 160, 112, 0.3),
    0 0 40px rgba(37, 160, 112, 0.1),
    0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Premium Card Styles */
.card-premium {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: var(--space-xl);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-premium:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.card-premium-blue {
  background: linear-gradient(135deg, 
    rgba(0, 85, 255, 0.1) 0%, 
    rgba(38, 111, 255, 0.05) 100%);
  border: 1px solid rgba(0, 85, 255, 0.2);
}

.card-premium-green {
  background: linear-gradient(135deg, 
    rgba(37, 160, 112, 0.1) 0%, 
    rgba(91, 190, 152, 0.05) 100%);
  border: 1px solid rgba(37, 160, 112, 0.2);
}

/* Premium Button Enhancements */
.btn-premium {
  background: linear-gradient(135deg, 
    var(--brand-blue-primary) 0%, 
    var(--brand-blue-bright) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-premium:hover {
  background: linear-gradient(135deg, 
    var(--brand-blue-bright) 0%, 
    var(--brand-blue-medium) 100%);
  transform: translateY(-2px);
  box-shadow: 
    0 8px 12px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(0, 85, 255, 0.3);
}

.btn-premium-green {
  background: linear-gradient(135deg, 
    var(--brand-green-vibrant) 0%, 
    var(--brand-green-light) 100%);
}

.btn-premium-green:hover {
  background: linear-gradient(135deg, 
    var(--brand-green-light) 0%, 
    var(--brand-green-vibrant) 100%);
  box-shadow: 
    0 8px 12px rgba(0, 0, 0, 0.15),
    0 0 20px rgba(37, 160, 112, 0.3);
}

/* Animated Background Elements */
.bg-animated-gradient {
  background: linear-gradient(-45deg, 
    var(--brand-dark-primary),
    var(--brand-dark-blue),
    var(--brand-dark-charcoal),
    var(--brand-dark-slate));
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
}

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

/* Floating Elements */
.floating-element {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Premium Borders */
.border-premium {
  border: 1px solid;
  border-image: linear-gradient(135deg, 
    rgba(0, 85, 255, 0.3) 0%, 
    rgba(37, 160, 112, 0.3) 50%, 
    rgba(0, 85, 255, 0.3) 100%) 1;
}

/* Subtle Noise Texture */
.texture-noise {
  position: relative;
}

.texture-noise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.15) 1px, transparent 0);
  background-size: 20px 20px;
  pointer-events: none;
  opacity: 0.1;
}

/* Premium Hover Effects */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

.hover-glow:hover {
  box-shadow: 
    0 0 30px rgba(0, 85, 255, 0.4),
    0 0 60px rgba(0, 85, 255, 0.2);
}