.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-xl);
}

.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border: 1px solid var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glass-glow);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--glass-shadow);
  padding: 20px;
  transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}

.glass-card:hover {
  border-color: var(--glass-border-strong);
  box-shadow: var(--glass-shadow), var(--glass-glow);
}

.glass-card--float:hover {
  transform: translateY(-3px);
}

.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--bg-gradient);
  pointer-events: none;
}

.ambient-bg::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  top: -200px;
  right: -100px;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.06) 0%, transparent 70%);
  animation: ambientDrift 20s ease-in-out infinite alternate;
}

.ambient-bg::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: -150px;
  left: -100px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, transparent 70%);
  animation: ambientDrift 25s ease-in-out infinite alternate-reverse;
}

@keyframes ambientDrift {
  from { transform: translate(0, 0); }
  to { transform: translate(30px, 20px); }
}