/* Stripe Bar — frontend styles */

.sbar {
	--sbar-color: #22c55e;
	--sbar-color-end: color-mix(in oklab, var(--sbar-color) 80%, #000 20%);
	--sbar-track: rgba(0, 0, 0, 0.08);
	--sbar-radius: 999px;
	--sbar-height: 50px;
	--sbar-text: inherit;

	display: block;
	width: 100%;
	max-width: 720px;
	margin: 1.25rem auto;
	font-family: inherit;
	color: var(--sbar-text);
}

.sbar__label {
	font-size: clamp(0.85rem, 1.5vw, 0.95rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-bottom: 0.4rem;
	opacity: 0.85;
}

.sbar__head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	margin-bottom: 0.4rem;
	font-variant-numeric: tabular-nums;
}

.sbar__current {
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	font-weight: 700;
}

.sbar__goal {
	font-size: clamp(0.8rem, 1.4vw, 0.95rem);
	opacity: 0.7;
}

.sbar__track {
	position: relative;
	width: 100%;
	height: var(--sbar-height);
	background: var(--sbar-track);
	border-radius: var(--sbar-radius);
	overflow: hidden;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sbar__fill {
	position: relative;
	height: 100%;
	width: 0%;
	border-radius: var(--sbar-radius);
	background: linear-gradient(
		90deg,
		var(--sbar-color) 0%,
		var(--sbar-color-end) 100%
	);
	transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.02) inset;
	overflow: hidden;
}

/* Shimmer pseudo-element used by the "subtle" and "lively" presets. */
.sbar__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(255, 255, 255, 0.35) 50%,
		transparent 70%
	);
	transform: translateX(-100%);
}

/* ---------- Animation presets ---------- */

/* None: static gradient, no shimmer, no flow, no pulse. */
.sbar.sbar--anim-none .sbar__fill::after {
	display: none;
}

/* Subtle: shimmer band moves across the fill. */
.sbar.sbar--anim-subtle .sbar__fill::after {
	animation: sbar-shimmer 2.6s linear infinite;
}

/* Lively: shimmer + slowly flowing 3-stop gradient + gentle brightness pulse. */
.sbar.sbar--anim-lively .sbar__fill {
	background: linear-gradient(
		90deg,
		var(--sbar-color) 0%,
		var(--sbar-color-end) 50%,
		var(--sbar-color) 100%
	);
	background-size: 200% 100%;
	animation:
		sbar-flow 6s linear infinite,
		sbar-pulse 3s ease-in-out infinite;
}

.sbar.sbar--anim-lively .sbar__fill::after {
	animation: sbar-shimmer 2.4s linear infinite;
}

/* When goal is reached, calm everything down. */
.sbar.sbar--complete .sbar__fill::after { display: none; }
.sbar.sbar--complete .sbar__fill { animation: none; }

.sbar__percent {
	margin-top: 0.4rem;
	text-align: right;
	font-size: clamp(0.85rem, 1.5vw, 1rem);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0.85;
}

/* Paused state: desaturate slightly and stop motion. */
.sbar.sbar--paused .sbar__fill {
	filter: saturate(0.6) opacity(0.85);
	animation: none;
}
.sbar.sbar--paused .sbar__fill::after { animation: none; display: none; }

@keyframes sbar-shimmer {
	0%   { transform: translateX(-100%); }
	100% { transform: translateX(100%); }
}

@keyframes sbar-flow {
	0%   { background-position:   0% 0%; }
	100% { background-position: 200% 0%; }
}

@keyframes sbar-pulse {
	0%, 100% { filter: brightness(1); }
	50%      { filter: brightness(1.08); }
}

@media (prefers-color-scheme: dark) {
	.sbar {
		--sbar-track: rgba(255, 255, 255, 0.12);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sbar__fill { transition: none; animation: none; }
	.sbar__fill::after { animation: none; display: none; }
}