/* Black Diamond Spa — Glass & Atmospheric Effects */

/* ── Glass Card ─────────────────────────────────── */

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

.glass--md {
  background: var(--glass-bg-md);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-lg);
}

.glass--tiffany {
  background: rgba(10, 186, 181, 0.06);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid rgba(10, 186, 181, 0.25);
  border-radius: var(--radius-lg);
}

/* ── Card ────────────────────────────────────────── */

.card {
  background: var(--bg-secondary);
  border: 1px solid var(--divider);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(10, 186, 181, 0.25);
}

.card--glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-color: var(--glass-border);
}

.card--glass:hover {
  border-color: rgba(10, 186, 181, 0.35);
  box-shadow: var(--shadow-tiffany);
}

/* ── Mist breath (atmospheric overlay) ──────────── */

@keyframes mistBreath {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

.mist-breath {
  animation: mistBreath 10s ease-in-out infinite;
}

/* ── Glow effect ─────────────────────────────────── */

.glow-tiffany {
  box-shadow: 0 0 20px var(--tiffany-glow);
}

.glow-tiffany:hover {
  box-shadow: 0 0 32px var(--tiffany-glow-strong);
}

@media (prefers-reduced-motion: reduce) {
  .mist-breath {
    animation: none;
    opacity: 0.8;
  }
}