/**
 * Barra de progresso de leitura (vertical, na lateral esquerda), estilo YouTube.
 * - Trilho: faixa sutil que ocupa toda a altura da janela.
 * - Preenchimento: sobe de cima para baixo conforme a leitura.
 * - Marcador: um "thumb" circular que desce junto com o progresso.
 *
 * A proporção de preenchimento/marcador é controlada pela variável CSS
 * --progress (definida pelo JS em reading-progress.js).
 */

#reading-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 12px;
	height: 100vh;
	z-index: 99999;
	pointer-events: none;
	/* Trilho sutil ocupando toda a altura. */
	background: linear-gradient(180deg, rgba(236, 32, 39, 0.14), rgba(0, 25, 73, 0.14));
}

/* Preenchimento (de cima para baixo). */
#reading-progress-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: var(--progress, 0%);
	background: linear-gradient(180deg, #ec2027, #001949);
	transition: height 0.1s ease-out;
	will-change: height;
}

/* Marcador deslizante (como o "thumb" dos vídeos do YouTube, na vertical). */
#reading-progress-bar::after {
	content: "";
	position: absolute;
	left: 50%;
	top: var(--progress, 0%);
	transform: translate(-50%, -50%);
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid #ec2027;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	transition: top 0.1s ease-out;
	will-change: top;
}

@media (max-width: 782px) {
	#reading-progress-bar {
		width: 8px;
	}

	#reading-progress-bar::after {
		width: 16px;
		height: 16px;
		border-width: 2px;
	}
}