/**
 * Reading Bar — visual styles only.
 * Motion is driven by the --rb-p custom property (0 to 1), set from JavaScript.
 * The live bar is position:fixed; previews omit .rb-bar--live so they stay in their card.
 */

.rb-bar {
	--rb-h: 3px;
	--rb-c1: #111111;
	--rb-c2: #d4ff00;
	--rb-p: 0;
	position: relative;
	box-sizing: border-box;
	height: var(--rb-h);
	pointer-events: none;
	background: transparent;
}

.rb-bar *,
.rb-bar *::before,
.rb-bar *::after {
	box-sizing: border-box;
}

.rb-bar--live {
	position: fixed;
	top: calc(var(--rb-admin, 0px) + var(--rb-offset, 0px) + env(safe-area-inset-top, 0px));
	left: 0;
	right: 0;
	z-index: var(--rb-z, 99990);
	opacity: 0;
	transition: opacity 0.45s ease;
}

.rb-bar--live.is-active {
	opacity: 1;
}

body.admin-bar .rb-bar--live {
	--rb-admin: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .rb-bar--live {
		--rb-admin: 46px;
	}
}

.rb-bar__fill {
	display: block;
	width: calc(var(--rb-p) * 100%);
	height: 100%;
	background: var(--rb-c1);
}

.rb-bar__tip {
	display: none;
}

/* Gradient family shares one sweep. Glow, shimmer, and pulse add motion on top. */
.rb-bar[data-style="gradient"] .rb-bar__fill,
.rb-bar[data-style="glow"] .rb-bar__fill,
.rb-bar[data-style="shimmer"] .rb-bar__fill,
.rb-bar[data-style="pulse"] .rb-bar__fill,
.rb-bar[data-style="floating"] .rb-bar__fill {
	background: linear-gradient(90deg, var(--rb-c1), var(--rb-c2));
}

.rb-bar[data-style="glow"] .rb-bar__fill,
.rb-bar[data-shadow="1"] .rb-bar__fill {
	box-shadow: 0 0 14px var(--rb-c2);
	box-shadow: 0 0 14px color-mix(in srgb, var(--rb-c2) 70%, transparent);
}

.rb-bar[data-style="shimmer"] .rb-bar__fill {
	position: relative;
	overflow: hidden;
}

.rb-bar[data-style="shimmer"] .rb-bar__fill::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 35%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
	animation: rb-sheen 2.6s ease-in-out infinite;
}

@keyframes rb-sheen {
	0% {
		transform: translateX(-130%);
	}
	100% {
		transform: translateX(340%);
	}
}

.rb-bar[data-style="pulse"] .rb-bar__tip {
	display: block;
	position: absolute;
	top: 50%;
	left: calc(var(--rb-p) * 100%);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rb-c2);
	transform: translate(-50%, -50%);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--rb-c2) 55%, transparent);
	animation: rb-pulse 1.8s ease-out infinite;
}

@keyframes rb-pulse {
	0% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--rb-c2) 55%, transparent);
	}
	100% {
		box-shadow: 0 0 0 9px transparent;
	}
}

.rb-bar[data-style="hairline"],
.rb-bar[data-style="dual"] {
	background: color-mix(in srgb, var(--rb-c1) 14%, transparent);
}

.rb-bar--live[data-style="floating"] {
	top: calc(var(--rb-admin, 0px) + var(--rb-offset, 0px) + env(safe-area-inset-top, 0px) + 10px);
	left: max(12px, env(safe-area-inset-left, 0px));
	right: max(12px, env(safe-area-inset-right, 0px));
	border-radius: 999px;
	overflow: hidden;
	background: rgba(10, 10, 10, 0.08);
}

.rb-bar[data-style="floating"] {
	border-radius: 999px;
	overflow: hidden;
	background: rgba(10, 10, 10, 0.08);
}

.rb-bar[data-style="floating"] .rb-bar__fill {
	border-radius: inherit;
}

.rb-bar[data-rounded="1"] .rb-bar__fill {
	border-radius: 999px;
}

.rb-bar--live[data-rounded="1"] {
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.rb-bar--live {
		transition: none;
	}

	.rb-bar__tip,
	.rb-bar[data-style="shimmer"] .rb-bar__fill::after {
		animation: none;
	}
}