/* Navigation progress widget — shown while heavy SPA views prepare. */

#nav-progress{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  pointer-events:none;
  background:rgba(243,246,252,.28);
  backdrop-filter:blur(1.5px);
  opacity:0;
  transition:opacity .18s ease;
}
#nav-progress[data-active="1"]{
  opacity:1;
  pointer-events:none;
}
#nav-progress[hidden]{
  display:none !important;
}

#nav-progress .nav-progress-bar{
  position:fixed;
  top:0;
  inset-inline:0;
  height:3px;
  background:rgba(18,58,207,.08);
  overflow:hidden;
  z-index:1201;
}
#nav-progress .nav-progress-bar-fill{
  display:block;
  height:100%;
  width:0;
  background:linear-gradient(90deg,#123acf,#3b6ef5 55%,#ffc849);
  box-shadow:0 0 12px rgba(18,58,207,.35);
  transition:width .12s linear;
}

#nav-progress .nav-progress-card{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:min(320px, calc(100vw - 36px));
  max-width:420px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(25,40,76,.1);
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 40px rgba(16,30,70,.14);
  color:#18233f;
  direction:rtl;
}

#nav-progress .nav-progress-rings{
  position:relative;
  width:42px;
  height:42px;
  flex:0 0 auto;
}
#nav-progress .nav-progress-rings i{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1.5px solid rgba(18,58,207,.28);
}
#nav-progress .nav-progress-rings i:nth-child(1){
  inset:0;
  opacity:.35;
  animation:nav-ring-pulse 1.2s ease-out infinite;
}
#nav-progress .nav-progress-rings i:nth-child(2){
  inset:22%;
  opacity:.6;
  animation:nav-ring-pulse 1.2s ease-out .15s infinite;
}
#nav-progress .nav-progress-rings i:nth-child(3){
  inset:42%;
  opacity:1;
  background:rgba(18,58,207,.7);
  border-color:rgba(18,58,207,.9);
}

#nav-progress .nav-progress-copy{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
  flex:1 1 auto;
}
#nav-progress .nav-progress-title{
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}
#nav-progress .nav-progress-label{
  color:#5c6881;
  font-size:12px;
  font-weight:600;
}
#nav-progress .nav-progress-pct{
  font-size:13px;
  font-weight:800;
  color:#123acf;
  font-variant-numeric:tabular-nums;
  min-width:3.2em;
  text-align:end;
}

/* While navigating: don't leave the previous hero looking "current". */
html[data-navigating="1"] #page-hero,
html[data-navigating="1"] #home-landing .home-hero{
  opacity:.22 !important;
  filter:saturate(.55) brightness(1.05);
  transition:opacity .16s ease, filter .16s ease;
  pointer-events:none;
}
html[data-navigating="1"] #workspace,
html[data-navigating="1"] #word-library,
html[data-navigating="1"] #home-landing{
  pointer-events:none;
}
html[data-navigating="1"] #workspace .situation-directory,
html[data-navigating="1"] #workspace #verb-directory,
html[data-navigating="1"] #workspace #cards,
html[data-navigating="1"] #workspace #grammar-panel,
html[data-navigating="1"] #word-library{
  opacity:.35;
  transition:opacity .16s ease;
}

@keyframes nav-ring-pulse{
  0%{transform:scale(.92); opacity:.35}
  55%{transform:scale(1.06); opacity:.9}
  100%{transform:scale(.92); opacity:.35}
}

@media (prefers-reduced-motion: reduce){
  #nav-progress,
  #nav-progress .nav-progress-bar-fill,
  html[data-navigating="1"] #page-hero,
  html[data-navigating="1"] #home-landing .home-hero,
  html[data-navigating="1"] #workspace .situation-directory,
  html[data-navigating="1"] #workspace #verb-directory,
  html[data-navigating="1"] #workspace #cards,
  html[data-navigating="1"] #workspace #grammar-panel,
  html[data-navigating="1"] #word-library{
    transition:none !important;
  }
  #nav-progress .nav-progress-rings i{
    animation:none !important;
  }
}