/**
 * P&J Design System — High Performance Glassmorphism & GPU Optimization
 * Backdrop-filter is strictly restricted to fixed viewport containers (Header & Modals)
 * to avoid GPU rasterization thrashing during scrolling (eliminating INP & CLS bottlenecks).
 */

/* Content containers inside scroll flow (NO backdrop-filter) */
.pj-glass-soft, .pj-glass-medium, .pj-glass-strong {
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  transform: translateZ(0); /* Force layer composition without re-rasterizing */
}

.pj-glass-soft {
  background: var(--bg-card, rgba(15, 23, 42, 0.95));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
}

.pj-glass-medium {
  background: var(--bg-card, rgba(15, 23, 42, 0.95));
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28);
}

.pj-glass-strong {
  background: var(--bg-card, rgba(15, 23, 42, 0.98));
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35);
}

/* FIXED ELEMENTS ONLY (Safe for backdrop-filter) */
.pj-header {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.pj-modal-overlay {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

@media (prefers-reduced-transparency: reduce) {
  .pj-glass-soft, .pj-glass-medium, .pj-glass-strong, .pj-header, .pj-modal-overlay {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg-card, #0B132B) !important;
  }
}