/* === PREMIUM VISUAL ENHANCEMENTS === */

/* Neon Glow Effects */
.neon-glow-cyan {
  box-shadow:
    0 0 10px rgba(102, 252, 241, 0.3),
    0 0 20px rgba(102, 252, 241, 0.2),
    0 0 30px rgba(102, 252, 241, 0.1);
}

.neon-glow-magenta {
  box-shadow:
    0 0 10px rgba(255, 0, 255, 0.3),
    0 0 20px rgba(255, 0, 255, 0.2),
    0 0 30px rgba(255, 0, 255, 0.1);
}

/* Premium Gradients */
.gradient-cyber {
  background: linear-gradient(
    135deg,
    rgba(102, 252, 241, 0.1) 0%,
    rgba(138, 126, 164, 0.1) 100%
  );
}

.gradient-ocean {
  background: linear-gradient(
    135deg,
    rgba(14, 165, 233, 0.1) 0%,
    rgba(6, 182, 212, 0.1) 100%
  );
}

.gradient-forest {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.1) 0%,
    rgba(132, 204, 22, 0.1) 100%
  );
}

.gradient-sunset {
  background: linear-gradient(
    135deg,
    rgba(249, 115, 22, 0.1) 0%,
    rgba(168, 85, 247, 0.1) 100%
  );
}

/* Enhanced Borders */
.border-glow {
  border: 1px solid rgba(102, 252, 241, 0.3);
  box-shadow:
    0 0 10px rgba(102, 252, 241, 0.1),
    inset 0 0 10px rgba(102, 252, 241, 0.05);
}

.light .border-glow {
  border: 1px solid rgba(0, 180, 216, 0.4);
  box-shadow:
    0 0 10px rgba(0, 180, 216, 0.1),
    inset 0 0 10px rgba(0, 180, 216, 0.05);
}

/* Premium Shadows */
.shadow-premium {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.2);
}

.light .shadow-premium {
  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Depth Effects */
.depth-1 {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(0, 0, 0, 0.06);
}

.depth-2 {
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
}

.depth-3 {
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Frosted Glass Variants */
.glass-strong {
  background: rgba(var(--kodo-void), 0.7);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.light .glass-strong {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(30px) saturate(200%);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.glass-subtle {
  background: rgba(var(--kodo-void), 0.3);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.light .glass-subtle {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Interactive States */
.interactive {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 24px rgba(0, 0, 0, 0.2),
    0 0 20px rgba(102, 252, 241, 0.1);
}

.interactive:active {
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Text Effects */
.text-glow {
  text-shadow:
    0 0 10px rgba(102, 252, 241, 0.5),
    0 0 20px rgba(102, 252, 241, 0.3);
}

.text-shadow-soft {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.light .text-shadow-soft {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Premium Buttons */
.btn-premium {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    rgb(var(--kodo-cyan)),
    rgb(var(--kodo-cyan-dim))
  );
  box-shadow:
    0 4px 12px rgba(var(--kodo-cyan), 0.3),
    0 2px 4px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

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

.btn-premium:hover::before {
  left: 100%;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 16px rgba(var(--kodo-cyan), 0.4),
    0 3px 6px rgba(0, 0, 0, 0.3);
}

/* Card Enhancements */
.card-premium {
  background: rgba(var(--kodo-graphite), 0.5);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.card-premium:hover {
  border-color: rgba(102, 252, 241, 0.3);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(102, 252, 241, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-4px);
}

.light .card-premium {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.light .card-premium:hover {
  border-color: rgba(0, 180, 216, 0.4);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 0 20px rgba(0, 180, 216, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}