/* === GLASSMORPHISM UTILITIES === */

.glass-card {
  background: rgba(15, 22, 41, 0.7);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  border: 1px solid rgba(42, 191, 191, 0.1);
  border-radius: var(--radius-lg);
}

.glass-card-light {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

.glass-glow {
  box-shadow:
    0 0 20px rgba(42, 191, 191, 0.08),
    inset 0 0 20px rgba(42, 191, 191, 0.02);
}

.glass-border-glow {
  border: 1px solid rgba(42, 191, 191, 0.15);
  box-shadow: 0 0 15px rgba(42, 191, 191, 0.05);
}

.glow-text {
  text-shadow: 0 0 20px rgba(42, 191, 191, 0.4);
}

/* 3D Card Effect */
.card-3d {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.card-3d-inner {
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.card-3d:hover .card-3d-inner {
  transform: rotateY(2deg) rotateX(2deg);
}

/* Frosted surface */
.frosted {
  background: linear-gradient(
    135deg,
    rgba(42, 191, 191, 0.06),
    rgba(15, 22, 41, 0.8)
  );
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Gradient borders */
.gradient-border {
  position: relative;
  border: none !important;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--primary), transparent, var(--primary-dark));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}