/* SPA Navigation Transitions */

/* جلوگیری از پرش افقی صفحه: وقتی بین صفحه بلند و کوتاه جابجا می‌شویم،
   ظاهر/ناپدید شدن اسکرول‌بار کل محتوای وسط‌چین را می‌لغزاند */
html {
  overflow-y: scroll;
}

/* Immediate feedback while a page is being fetched */
#spa-content.spa-navigating {
  opacity: 1;
  transition: opacity 0.08s ease;
}

/* جابه‌جایی فقط با محوشدن انجام می‌شود؛ transform باعث پرش عمودی محتوا بود. */
.spa-fade-out {
  opacity: 0;
  transition: opacity 0.08s ease;
}

/* Content fade in */
.spa-fade-in {
  animation: spaFadeIn 0.14s ease-out forwards;
}

@keyframes spaFadeIn {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  #spa-content.spa-navigating, .spa-fade-out { transition: none; }
  .spa-fade-in { animation: none; }
}

/* Loading bar at top */
#spa-loading-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

#spa-loading-bar.active {
  opacity: 1;
}

.spa-loading-bar__progress {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 0 2px 2px 0;
  animation: spaLoadingProgress 1.5s ease forwards;
}

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

#spa-loading-bar:not(.active) .spa-loading-bar__progress {
  width: 100% !important;
  animation: spaLoadingDone 0.3s ease forwards;
}

@keyframes spaLoadingDone {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Full document navigation also keeps a visual bridge between pages.
   Unsupported browsers retain their normal navigation behavior. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
  animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  .spa-loading-bar__progress {
    animation: none !important;
  }
  #spa-loading-bar { transition: none; }
  .spa-loading-bar__progress { width: 85%; }
}