/* ============================================================
   CSCrew Neon Glass — glass.css
   visionOS-inspired glass material system
   5-layer formula: backdrop-filter → fill → border →
                    inset highlight → multi-layer shadow
   ============================================================ */

/* --------------------------------------------------
   MATERIAL 1 — ULTRA THIN
   Background panels, sidebars, secondary containers
   -------------------------------------------------- */
.glass-ultra-thin {
  background-color: var(--color-surface-dark);
  background: rgba(255,255,255,0.055);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 2px 8px rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------
   MATERIAL 2 — THIN
   Standard cards, content panels, stat cards
   -------------------------------------------------- */
.glass-thin {
  background-color: var(--color-surface-mid);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(32px) saturate(160%);
  backdrop-filter: blur(32px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.085),
    0 4px 16px rgba(0,0,0,0.08);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------
   MATERIAL 3 — REGULAR
   Modals, active panels, profile hero
   -------------------------------------------------- */
.glass-regular {
  background-color: var(--color-surface-mid);
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 8px 32px rgba(0,0,0,0.10),
    0 32px 64px rgba(0,0,0,0.06);
  border-radius: var(--radius-xl);
}

/* --------------------------------------------------
   MATERIAL 4 — THICK
   Overlays, context menus, dropdowns, toasts
   -------------------------------------------------- */
.glass-thick {
  background: rgba(22,27,39,0.88);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 16px 48px rgba(0,0,0,0.14);
  border-radius: var(--radius-md);
}

/* --------------------------------------------------
   MATERIAL 5 — CHROME
   Navigation bars, tab bars, category bar
   -------------------------------------------------- */
.glass-chrome {
  background: rgba(15,17,24,0.85);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  backdrop-filter: blur(50px) saturate(200%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* --------------------------------------------------
   VIBRANCY TEXT COLORS
   Never pure white/black on glass
   -------------------------------------------------- */
.text-vibrancy-primary  { color: var(--color-text-primary); }
.text-vibrancy-secondary { color: var(--color-text-secondary); }
.text-vibrancy-dim       { color: var(--color-text-dim); }
.text-vibrancy-accent    { color: var(--accent-text); }

/* --------------------------------------------------
   BORDER TREATMENTS
   -------------------------------------------------- */
.glass-border-default {
  border-color: rgba(255,255,255,0.08);
}
.glass-border-hover {
  border-color: rgba(91,127,255,0.4);
  border-color: color-mix(in srgb, var(--main-color) 40%, transparent);
}
.glass-border-active {
  border-color: var(--main-color);
  border-width: 2px;
}
.glass-border-covert {
  border-color: rgba(255,59,59,0.4);
}
.glass-border-contraband {
  border-color: rgba(240,176,48,0.5);
}
.glass-border-disabled {
  border-color: rgba(255,255,255,0.04);
  opacity: 0.4;
}

/* --------------------------------------------------
   RARITY BORDER ACCENTS (for top strips)
   -------------------------------------------------- */
.rarity-strip {
  position: relative;
}
.rarity-strip::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  border-radius: inherit;
}
.rarity-strip.rarity-consumer::before    { background: var(--rarity-consumer); }
.rarity-strip.rarity-milspec::before     { background: var(--rarity-milspec); }
.rarity-strip.rarity-restricted::before  { background: var(--rarity-restricted); }
.rarity-strip.rarity-classified::before  { background: var(--rarity-classified); }
.rarity-strip.rarity-covert::before      { background: var(--rarity-covert); }
.rarity-strip.rarity-contraband::before  { background: linear-gradient(90deg, var(--rarity-contraband), #ffe580); }

/* --------------------------------------------------
   CARD SHINE OVERLAY (hover gradient)
   -------------------------------------------------- */
.card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--t-base);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
*:hover > .card-shine,
.card-shine.active {
  opacity: 1;
}

/* --------------------------------------------------
   PODIUM GRADIENTS
   -------------------------------------------------- */
.podium-gold {
  background: linear-gradient(160deg, rgba(240,176,48,0.18) 0%, transparent 70%);
}
.podium-silver {
  background: linear-gradient(160deg, rgba(180,188,200,0.12) 0%, transparent 70%);
}
.podium-bronze {
  background: linear-gradient(160deg, rgba(180,100,40,0.12) 0%, transparent 70%);
}

/* --------------------------------------------------
   PROGRESS BAR FILL GRADIENT
   -------------------------------------------------- */
.progress-fill-gradient {
  background: linear-gradient(
    90deg,
    var(--main-color) 0%,
    #8ca5ff 100%
  );
  background: linear-gradient(
    90deg,
    var(--main-color) 0%,
    color-mix(in srgb, var(--main-color), white 40%) 100%
  );
}

/* --------------------------------------------------
   COVERT BUTTON GRADIENT
   -------------------------------------------------- */
.covert-gradient {
  background: linear-gradient(90deg, #ff3b3b 0%, #ff8c42 100%);
}

/* --------------------------------------------------
   CONTRABAD BADGE GRADIENT
   -------------------------------------------------- */
.contraband-gradient {
  background: linear-gradient(90deg, #f0b030 0%, #ffe580 100%);
}

/* ============================================================
   GLASS PANEL HELPER — combines material + padding
   ============================================================ */

.glass-panel {
  background: var(--color-surface-dark);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.glass-panel--elevated {
  background: var(--color-surface-mid);
  border-color: var(--color-border-default);
}