/* =========================================
   GLASS.CSS — Glassmorphism Utility Classes
   ========================================= */

/* ---- Core Glass Panel ---- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: var(--transition-theme);
}

/* ---- Glass Variants ---- */
.glass-sm {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.glass-lg {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: transform var(--transition-base),
              box-shadow var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-theme);
}

.glass-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
              0 0 0 1px var(--accent-1),
              0 0 30px rgba(79, 142, 247, 0.15);
  border-color: rgba(79, 142, 247, 0.4);
  background: var(--glass-bg-hover);
}

/* ---- Glass Navbar ---- */
.glass-nav {
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  transition: var(--transition-theme);
}

.glass-nav--scrolled {
  background: var(--glass-bg-strong);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.4);
  border-bottom-color: rgba(79, 142, 247, 0.2);
}

/* ---- Glass Input ---- */
.glass-input {
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text-primary);
  font-size: var(--text-base);
  width: 100%;
  outline: none;
  transition: border-color var(--transition-base),
              box-shadow var(--transition-base),
              background var(--transition-theme);
}

.glass-input:focus {
  border-color: var(--accent-1);
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.15),
              0 0 20px rgba(79, 142, 247, 0.1);
  background: var(--glass-bg-hover);
}

.glass-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

/* ---- Glass Tag / Pill ---- */
.glass-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 6px var(--space-2);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-primary);
  transition: var(--transition-theme);
}

.glass-tag--accent {
  border-color: rgba(79, 142, 247, 0.4);
  color: var(--accent-1);
  background: rgba(79, 142, 247, 0.08);
  box-shadow: 0 0 12px rgba(79, 142, 247, 0.1);
}

.glass-tag--green {
  border-color: rgba(0, 212, 100, 0.4);
  color: #00d464;
  background: rgba(0, 212, 100, 0.08);
  box-shadow: 0 0 12px rgba(0, 212, 100, 0.1);
}

/* ---- Glass Badge ---- */
.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-theme);
}

.glass-badge:hover {
  transform: scale(1.05);
  color: var(--accent-1);
  border-color: rgba(79, 142, 247, 0.5);
  box-shadow: 0 0 16px rgba(79, 142, 247, 0.2);
}

/* ---- Glass Modal Overlay ---- */
.glass-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
}

/* ---- Glass Mobile Menu ---- */
.glass-menu {
  position: fixed;
  inset: 0;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border-right: 1px solid var(--glass-border);
  z-index: calc(var(--z-nav) + 10);
  transform: translateX(-100%);
  transition: transform var(--transition-slow);
}

.glass-menu.is-open {
  transform: translateX(0);
}

/* ---- Glass Stat Badge (floating) ---- */
.glass-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-3);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  min-width: 110px;
  text-align: center;
  position: absolute;
}

/* ---- Glass Toast ---- */
.glass-toast {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 212, 100, 0.4);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
              0 0 20px rgba(0, 212, 100, 0.15);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transform: translateY(100px);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow);
  max-width: 360px;
}

.glass-toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Glow Utilities ---- */
.glow-blue {
  box-shadow: 0 0 20px rgba(79, 142, 247, 0.3),
              0 0 40px rgba(79, 142, 247, 0.1);
}

.glow-violet {
  box-shadow: 0 0 20px rgba(155, 89, 245, 0.3),
              0 0 40px rgba(155, 89, 245, 0.1);
}

.glow-cyan {
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3),
              0 0 40px rgba(0, 212, 255, 0.1);
}

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

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

/* ---- Orb Decorations ---- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.35;
  z-index: 0;
}

.orb--blue {
  background: radial-gradient(circle, var(--accent-1), transparent 70%);
}

.orb--violet {
  background: radial-gradient(circle, var(--accent-2), transparent 70%);
}

.orb--cyan {
  background: radial-gradient(circle, var(--accent-3), transparent 70%);
}