/* Progresso de leitura: trilho à esquerda com marcas por seção (telas
   largas) e barra fina no topo (celular). */

.pgp {
  --prog: 0;
  position: fixed;
  left: 22px;
  top: 50%;
  z-index: 400;
  height: min(52vh, 420px);
  transform: translateY(-50%);
}
.pgp__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--sage) 50%, transparent); }
.pgp__fill { position: absolute; inset: 0 0 auto; height: calc(var(--prog) * 100%); background: linear-gradient(transparent, color-mix(in srgb, var(--sun) 55%, transparent)); }
.pgp__dot {
  position: absolute;
  top: calc(var(--prog) * 100%);
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sun);
  box-shadow: 0 0 12px color-mix(in srgb, var(--sun) 60%, transparent);
  translate: -50% -50%;
}
.pgp__marks { margin: 0; padding: 0; list-style: none; }
.pgp__marks li { position: absolute; top: var(--at); left: 0; translate: -50% -50%; }
.pgp__marks a { display: block; width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--sage) 80%, transparent); position: relative; }
.pgp__marks li.is-current a { background: var(--sun); }
.pgp__label {
  position: absolute;
  left: 16px;
  top: 50%;
  translate: 0 -50%;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--warm);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out);
}
.pgp__marks a:hover .pgp__label, .pgp__marks a:focus-visible .pgp__label { opacity: 1; }

.pgp-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 600;
  width: 100%;
  height: 2px;
  background: var(--sun);
  transform-origin: left center;
  transform: scaleX(var(--prog, 0));
  pointer-events: none;
  display: none;
}

@media (max-width: 1100px) {
  .pgp { display: none; }
  .pgp-bar { display: block; }
}