/**
 * نيورون - router.css
 * أنماط التنقل SPA: انتقالات ناعمة، شريط تحميل، وتبديل المحتوى
 */

/* ═══════════════════════════════════
   Navigation Loading Bar (أعلى الصفحة)
   ═══════════════════════════════════ */
.neuron-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-pink, #f472b6), var(--color-purple, #a78bfa), var(--color-blue, #60a5fa));
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px rgba(164, 120, 250, 0.4);
}

.neuron-nav-progress.active {
  opacity: 1;
  animation: neuronNavProgress 8s cubic-bezier(0.4, 0, 0, 1) forwards;
}

.neuron-nav-progress.done {
  width: 100% !important;
  animation: none;
  transition: width 0.15s ease, opacity 0.3s ease 0.2s;
  opacity: 0;
}

@keyframes neuronNavProgress {
  0%   { width: 0; }
  15%  { width: 30%; }
  50%  { width: 60%; }
  80%  { width: 85%; }
  100% { width: 95%; }
}

/* ═══════════════════════════════════
   Page Content Transitions
   ═══════════════════════════════════ */
#neuron-content {
  will-change: opacity, transform;
  min-height: 50vh;
}

/* حالة الخروج (الصفحة القديمة تختفي) */
#neuron-content.page-exit {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.12s ease-out, transform 0.12s ease-out;
  pointer-events: none;
}

/* حالة الدخول (الصفحة الجديدة تظهر) */
#neuron-content.page-enter {
  opacity: 0;
  transform: translateY(8px);
}

#neuron-content.page-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* ═══════════════════════════════════
   Route Link Styling
   ═══════════════════════════════════ */
/* روابط محملة مسبقاً → مؤشر instant */
a[data-prefetched] {
  cursor: pointer;
}

/* رابط نشط في التنقل */
.header__nav-link.active {
  color: var(--color-white, #fff);
}

/* ═══════════════════════════════════
   Error Overlay (عند فشل AJAX)
   ═══════════════════════════════════ */
.neuron-error-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  text-align: center;
  padding: 2rem;
  animation: fadeInUp 0.4s ease forwards;
}

.neuron-error-overlay h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  margin-bottom: 1rem;
  color: var(--color-text-primary);
}

.neuron-error-overlay p {
  font-size: 1rem;
  opacity: 0.7;
  margin-bottom: 2rem;
  max-width: 500px;
}

.neuron-error-overlay .btn--retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  border: 1px solid var(--bg-border);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.neuron-error-overlay .btn--retry:hover {
  background: var(--color-pink);
  border-color: var(--color-pink);
  color: #fff;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════
   Smooth scroll override for SPA
   ═══════════════════════════════════ */
html.spa-navigating {
  scroll-behavior: auto !important;
}