/* ═══════════════════════════════════════════
   SPA Router — Transitions & Progress Bar
   ═══════════════════════════════════════════ */

/* ── Progress bar ─────────────────────────── */
#spa-progress {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 3px;
   z-index: 99999;
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease;
}

#spa-progress.spa-progress--active {
   opacity: 1;
}

.spa-progress__bar {
   height: 100%;
   width: 0%;
   background: linear-gradient(
      90deg,
      var(--ep-brand-primary, #F7426F),
      var(--ep-brand-secondary, #F87A58)
   );
   border-radius: 0 2px 2px 0;
   box-shadow: 0 0 8px rgba(247, 66, 111, 0.5);
}


/*
 * Content transitions — IMPORTANT:
 * We must NOT use opacity < 1 or transform on the wrapper itself,
 * because that creates a CSS stacking context which traps Bootstrap
 * modals inside it (z-index 1055 becomes local, not global).
 *
 * Instead, we transition an inner pseudo-layer via visibility/clip-path
 * and apply the visual effect to the children.
 */
.app__slide-wrapper.spa-fade-out > * {
   opacity: 0;
   transform: translateY(6px);
   transition: opacity 0.22s ease, transform 0.22s ease;
}

.app__slide-wrapper.spa-fade-out {
   pointer-events: none;
}

.app__slide-wrapper.spa-fade-in > * {
   animation: spaChildFadeIn 0.22s ease forwards;
}

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

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
   .app__slide-wrapper.spa-fade-out > * {
      transition: none;
      transform: none;
   }

   .app__slide-wrapper.spa-fade-in > * {
      animation: none;
      opacity: 1;
      transform: none;
   }

   .spa-progress__bar {
      transition: none !important;
   }
}