/* =============================================================
   neo-glass.css — Glass Hierarchy & Crystal Edge System
   NashDomBG · Light Scene · Neo-Glassmorphism v2.2
   Phase 2a — DO NOT add layout, animation, or token definitions
   ============================================================= */

/* ----------------------------------------------------------
   SCENE CONTAINER — Level 1 (heavy glass, outermost wrapper)
   ---------------------------------------------------------- */
.glass-container {
  background: var(--glass-heavy);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  border: var(--border-glass);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl);
  position: relative;
}

/* Cards nested inside glass-container drop one opacity level */
.glass-container > .glass-card {
  background: var(--glass-light);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
}

/* ----------------------------------------------------------
   STANDARD GLASS CARD — Level 2 (medium glass)
   ---------------------------------------------------------- */
.glass-card {
  background: var(--glass-medium);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border: var(--border-glass);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card), var(--border-inner-glow);
  padding: var(--card-padding);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--dur-standard) var(--ease-glass),
    box-shadow var(--dur-standard) var(--ease-glass),
    border-color var(--dur-standard) var(--ease-glass);
}

.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover), var(--border-inner-glow);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------------------------
   CRYSTAL EDGE VARIANT — bevel multi-layer shadow
   ---------------------------------------------------------- */
.glass-card--crystal {
  box-shadow:
    var(--shadow-card),
    0 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 15px -3px rgba(200, 220, 255, 0.15),
    inset 0 0 20px -10px rgba(255, 255, 255, 0.1);
}

.glass-card--crystal:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-card-hover),
    0 0 2px 0 rgba(255, 255, 255, 0.8),
    0 0 25px -3px rgba(200, 220, 255, 0.25),
    inset 0 0 30px -10px rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
}

/* ----------------------------------------------------------
   HERO ACCENT CARD — accent gradient bleeding through glass
   ---------------------------------------------------------- */
.glass-card--hero {
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--palette-accent) 30%, transparent),
      color-mix(in srgb, var(--palette-accent-hover) 20%, transparent)
    ),
    var(--glass-medium);
  backdrop-filter: var(--blur-medium);
  -webkit-backdrop-filter: var(--blur-medium);
  border: var(--border-glass-glow);
  box-shadow:
    var(--shadow-card),
    0 0 1px 0 rgba(255, 255, 255, 0.6),
    0 0 20px -4px var(--palette-accent-muted),
    inset 0 0 20px -10px rgba(255, 255, 255, 0.1);
  padding: calc(var(--card-padding) * 1.33);
}

.glass-card--hero:hover {
  transform: translateY(-2px);
  box-shadow:
    var(--shadow-card-hover),
    0 0 2px 0 rgba(255, 255, 255, 0.7),
    0 0 30px -4px var(--palette-accent-muted),
    inset 0 0 28px -10px rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.6);
}

/* Noise texture overlay — applied as pseudo-element */
.glass-card--hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

.glass-card--hero > * {
  position: relative;
  z-index: 2;
}

/* ----------------------------------------------------------
   GLASS INNER — Level 3 (light glass, nested inside cards)
   Max nesting depth: 2 levels
   ---------------------------------------------------------- */
.glass-inner {
  background: var(--glass-light);
  backdrop-filter: var(--blur-light);
  -webkit-backdrop-filter: var(--blur-light);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  padding: var(--card-padding-sm);
}

/* ----------------------------------------------------------
   ULTRA OVERLAY — Level 4 (hover overlays, badges, tabs)
   ---------------------------------------------------------- */
.glass-ultra {
  background: var(--glass-ultra);
  backdrop-filter: var(--blur-none);
  -webkit-backdrop-filter: var(--blur-none);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------
   APP-SPECIFIC CARD OVERRIDES
   ---------------------------------------------------------- */

/* KPI cards — compact, no hover lift */
.kpi-card.glass-card {
  padding: var(--card-padding-sm);
  cursor: default;
}

.kpi-card.glass-card:hover {
  transform: none;
}

/* City cards — pointer cursor, lift preserved */
.city-card.glass-card {
  cursor: pointer;
}

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

/* Chart cards — standard padding, no override needed */
.chart-card.glass-card {
  /* inherits base .glass-card */
}

/* Listings table wrapper — flush edges, scroll container */
.listings-table-wrap.glass-card {
  padding: 0;
  overflow-x: auto;
}

/* Map legend — compact */
.map-legend.glass-card {
  padding: var(--card-padding-sm);
}

/* Auth card — centered narrow form */
.auth-card.glass-card {
  max-width: 380px;
  margin-inline: auto;
  text-align: center;
}

/* ----------------------------------------------------------
   INTERACTIVE CARD — data attribute variant
   ---------------------------------------------------------- */
.glass-card[data-interactive] {
  cursor: pointer;
}

.glass-card[data-interactive]:hover {
  transform: translateY(-3px);
}

/* ----------------------------------------------------------
   FOCUS STATES — accessibility
   ---------------------------------------------------------- */
.glass-card[data-interactive]:focus-visible,
.glass-card[tabindex]:focus-visible {
  outline: 2px solid var(--palette-accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-card-hover), 0 0 0 4px var(--palette-accent-muted);
}

/* ----------------------------------------------------------
   ACTIVE / PRESSED STATE
   ---------------------------------------------------------- */
.glass-card[data-interactive]:active,
.city-card.glass-card:active {
  transform: translateY(-1px) scale(0.995);
  transition-duration: var(--dur-fade);
}

/* ----------------------------------------------------------
   SAFARI COMPAT — fallback when backdrop-filter unsupported
   ---------------------------------------------------------- */
@supports not (backdrop-filter: blur(1px)) {
  .glass-card {
    background: rgba(255, 255, 255, 0.72);
  }

  .glass-card--hero {
    background: rgba(230, 245, 255, 0.85);
  }

  .glass-container {
    background: rgba(255, 255, 255, 0.82);
  }

  .glass-inner {
    background: rgba(255, 255, 255, 0.55);
  }
}

/* ----------------------------------------------------------
   REDUCED MOTION — respect user preference
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-card--crystal,
  .glass-card--hero,
  .glass-card[data-interactive],
  .city-card.glass-card {
    transition: none;
  }

  .glass-card:hover,
  .glass-card--crystal:hover,
  .glass-card--hero:hover,
  .glass-card[data-interactive]:hover,
  .city-card.glass-card:hover {
    transform: none;
  }
}