/* 
  SPA Transitions & Progress Bar 
  Designed for Advans Premium Experience
*/

:root {
  --spa-transition-speed: 0.2s;
  --spa-progress-color: var(--color-accent, #e0e67e);
}

/* Page Transition States */
#spa-container {
  position: relative;
  z-index: 2;
  transition: opacity var(--spa-transition-speed) ease-in-out,
              transform var(--spa-transition-speed) ease-in-out;
  opacity: 1;
  transform: translateY(0);
}

.spa-loading #spa-container {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

/* Top Progress Bar */
#spa-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--spa-progress-color);
  z-index: 9999;
  transition: width 0.3s ease, opacity 0.3s ease;
  box-shadow: 0 0 10px var(--spa-progress-color);
}

#spa-progress.finished {
  width: 100% !important;
  opacity: 0;
}

/* Ensure header links stay clickable and active states work */
.nav-links a.active {
  color: var(--color-nav-active) !important;
  opacity: 1 !important;
}

/* Avoid jumpy header on transition */
header {
  transition: background 0.3s ease, padding 0.3s ease !important;
}