/**
 * MotionKit: Reading Progress module.
 * Colors/thickness/radius are applied as CSS custom properties by
 * progress.js on init (kept out of the PHP markup so the module has
 * exactly one source of truth for its own styling, same pattern as
 * the Cursor module).
 */

.motionkit-progress-track {
	position: fixed;
	left: 0;
	right: 0;
	height: var(--motionkit-progress-thickness, 4px);
	background-color: var(--motionkit-progress-bg, #e5e7eb);
	z-index: 999998;
	pointer-events: none;
}

.motionkit-progress-top {
	top: 0;
}

.motionkit-progress-bottom {
	bottom: 0;
}

.motionkit-progress-fill {
	height: 100%;
	width: 100%;
	background-color: var(--motionkit-progress-color, #000);
	border-radius: var(--motionkit-progress-radius, 0);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
	transition: transform 0.1s linear;
}

.motionkit-progress-pct {
	position: fixed;
	right: 14px;
	font-size: 11px;
	line-height: 1;
	color: var(--motionkit-progress-color, #000);
	background: rgba(255, 255, 255, 0.85);
	padding: 3px 7px;
	border-radius: 999px;
	pointer-events: none;
	z-index: 999998;
}

.motionkit-progress-track.motionkit-progress-top .motionkit-progress-pct {
	top: 8px;
}

.motionkit-progress-track.motionkit-progress-bottom .motionkit-progress-pct {
	bottom: 8px;
}

@media (prefers-reduced-motion: reduce) {
	.motionkit-progress-fill {
		transition: none !important;
	}
}