/* =========================================================================
   Leon.Studio — Design System / NAVEGACAO
   -------------------------------------------------------------------------
   Helpers do menu mobile (herdados do Mouv) + estados de scroll da barra
   fixa + indice lateral de secoes + barra de progresso de leitura.
   ========================================================================= */

/* --- menu mobile: o JS so alterna estas duas classes ------------------- */
.menu-open   { display: flex !important; }
.icon-hidden { display: none !important; }

/* --- barra fixa: fica mais densa e opaca depois do primeiro scroll ----- */
.ds-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  transition:
    background-color var(--dur-base) var(--ease-out-quart),
    border-color     var(--dur-base) var(--ease-out-quart),
    backdrop-filter  var(--dur-base) var(--ease-out-quart),
    padding          var(--dur-base) var(--ease-out-quart);
  background-color: transparent;
  border-bottom: var(--hairline) solid transparent;
}
.ds-nav.is-scrolled {
  background-color: rgba(5, 5, 5, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--border);
}
.ds-nav.is-scrolled .ds-nav-shell { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.ds-nav-shell {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  transition: padding var(--dur-base) var(--ease-out-quart);
}

/* --- link de nav: sublinhado que cresce do centro ---------------------- */
.nav-link {
  position: relative;
  color: var(--text-tertiary);
  transition: color var(--dur-fast) var(--ease-out-quart);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 0; height: 1px;
  background: var(--green-500);
  transform: translateX(-50%);
  transition: width var(--dur-base) var(--ease-out-quart);
}
.nav-link:hover,
.nav-link.is-active { color: var(--white); }
.nav-link:hover::after,
.nav-link.is-active::after { width: 100%; }

/* --- progresso de leitura (topo da pagina) ----------------------------- */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: var(--grad-accent);
  box-shadow: var(--glow-green-sm);
  z-index: calc(var(--z-nav) + 1);
  pointer-events: none;
}

/* --- indice lateral de secoes (desktop) -------------------------------- */
.section-rail {
  position: fixed;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-sticky);
  display: none;
  flex-direction: column;
  gap: 0.75rem;
  align-items: flex-end;
}
@media (min-width: 1536px) { .section-rail { display: flex; } }

.rail-dot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.rail-dot span.rail-label {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-tertiary);
  opacity: 0;
  transform: translateX(6px);
  transition: opacity var(--dur-base) var(--ease-out-quart), transform var(--dur-base) var(--ease-out-quart);
  white-space: nowrap;
}
.rail-dot span.rail-tick {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--white-24);
  transition: width var(--dur-base) var(--ease-out-quart), background-color var(--dur-base) var(--ease-out-quart);
}
.rail-dot:hover span.rail-label { opacity: 1; transform: translateX(0); }
.rail-dot:hover span.rail-tick  { width: 28px; background: var(--white-64); }
.rail-dot.is-active span.rail-label { opacity: 1; transform: translateX(0); color: var(--green-500); }
.rail-dot.is-active span.rail-tick  { width: 34px; background: var(--green-500); box-shadow: var(--glow-green-sm); }

/* --- variante sobre secao clara -------------------------------------
   O rail e position:fixed, entao nao herda os tokens de .mode-light das
   secoes que passam por baixo dele. .on-light e alternada via JS
   (initRail em interactions.js) conforme a secao no centro da tela. */
.section-rail.on-light .rail-dot span.rail-label { color: var(--ink-400); }
.section-rail.on-light .rail-dot span.rail-tick  { background: var(--black-24); }
.section-rail.on-light .rail-dot:hover span.rail-tick { background: var(--black-48); }
.section-rail.on-light .rail-dot.is-active span.rail-label { color: var(--green-800); }
.section-rail.on-light .rail-dot.is-active span.rail-tick  { background: var(--green-800); box-shadow: none; }