/**
 * AIR Navigation Loader (2026-09-01)
 *
 * A single, reusable, global perceived-responsiveness component for
 * customer-facing dashboard navigation. It does NOT block, does NOT delay
 * navigation, and shows NO fake progress percentages - only an indeterminate
 * top bar (immediate, subtle acknowledgement) and, after a short threshold, a
 * small AIR-styled pill with contextual text. Themed entirely from the global
 * `--air-*` variables (air_global_theme.css) with safe fallbacks. Driven by
 * air_navigation_loader.js; no per-page or per-controller markup required.
 */

/* Immediate, subtle acknowledgement: an indeterminate top bar.
   Fades in over ~160ms so a genuinely fast page swap barely registers - no
   flashing on fast loads - while still starting the instant a click happens. */
#air-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2147483000;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transition: opacity 0.16s ease;
}

#air-nav-bar.is-on { opacity: 1; }

#air-nav-bar::before {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 35%;
  left: -35%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(90deg, rgba(127, 182, 224, 0), var(--air-accent, #7fb6e0), rgba(127, 182, 224, 0));
  animation: airNavSlide 1.15s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}

@keyframes airNavSlide {
  0%   { left: -35%; }
  100% { left: 100%; }
}

/* The gated (>~500ms) indicator: a large, polished loading card sitting dead
   centre of the viewport - impossible to miss, but never an error/blocking
   dialog. A very light translucent backdrop with a soft blur focuses attention
   while the page stays visible; it traps no pointer input, so the UI never
   looks crashed or disabled. */
#air-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(6, 10, 15, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

#air-nav-overlay.is-on { opacity: 1; }

#air-nav-overlay .air-nav-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  min-width: 15rem;
  max-width: min(90vw, 30rem);
  padding: 2.4rem 2.8rem;
  border-radius: 1rem;
  background: var(--air-bg-card, #131a22);
  border: 1px solid var(--air-border, #263238);
  color: var(--air-text-primary, #e6edf3);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.22s ease;
}

#air-nav-overlay.is-on .air-nav-card { transform: none; }

#air-nav-overlay .air-nav-spin {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 4px solid rgba(127, 182, 224, 0.22);
  border-top-color: var(--air-accent, #7fb6e0);
  animation: airNavSpin 0.8s linear infinite;
}

#air-nav-overlay .air-nav-text {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--air-text-primary, #e6edf3);
  max-width: 26rem;
  overflow-wrap: anywhere;
}

/* Responsive: comfortable on phones without feeling cramped. */
@media (max-width: 480px) {
  #air-nav-overlay .air-nav-card { padding: 1.8rem 1.5rem; min-width: 0; width: 100%; gap: 1rem; }
  #air-nav-overlay .air-nav-spin { width: 46px; height: 46px; }
  #air-nav-overlay .air-nav-text { font-size: 1.08rem; }
}

@keyframes airNavSpin { to { transform: rotate(360deg); } }

/* Instant, element-local tactile feedback on the clicked trigger. */
.air-nav-busy {
  opacity: 0.72;
  cursor: progress;
  transition: opacity 0.12s ease;
}

/* Respect reduced-motion: keep it, but calm it down to gentle pulses. */
@media (prefers-reduced-motion: reduce) {
  #air-nav-bar::before {
    left: 0;
    width: 100%;
    background: var(--air-accent, #7fb6e0);
    animation: airNavPulse 1.3s ease-in-out infinite;
  }
  #air-nav-overlay .air-nav-spin { animation: airNavPulse 1.3s ease-in-out infinite; }
  #air-nav-overlay .air-nav-card { transform: none; transition: none; }
  @keyframes airNavPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
}