/**
 * NTP Score ring primitives — bike single, best-of archive, and bike admin preview.
 * (Was shared with mobile; bike module owns this copy to avoid cross-module CSS coupling.)
 *
 * @package NewTechPrice
 */

.ntp-ntp-score__ring {
	--ntp-score-frac: 0;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: clamp(6.5rem, 5.5rem + 2.5dvw, 7.5rem);
	height: clamp(6.5rem, 5.5rem + 2.5dvw, 7.5rem);
}

.ntp-ntp-score__ring--expert {
	width: clamp(7.5rem, 6.25rem + 3dvw, 8.75rem);
	height: clamp(7.5rem, 6.25rem + 3dvw, 8.75rem);
}

.ntp-ntp-score__ring-svg {
	display: block;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.ntp-ntp-score__ring-track {
	fill: none;
	stroke: color-mix(in srgb, var(--ntp-border-color, #dfe4ea) 95%, transparent);
	stroke-width: 7;
}

[data-theme='dark'] .ntp-ntp-score__ring-track {
	stroke: color-mix(in srgb, var(--ntp-border-color, #334155) 85%, transparent);
}

.ntp-ntp-score__ring-arc {
	fill: none;
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}

.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-track,
.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-arc {
	stroke-width: 6.5;
}

.ntp-ntp-score__ring-label {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
}

.ntp-ntp-score__ring--pillar .ntp-ntp-score__ring-label {
	flex-direction: column;
	gap: 0;
}

.ntp-ntp-score__ring-value {
	font-size: clamp(1.2rem, 1.05rem + 0.45dvw, 1.45rem);
	letter-spacing: -0.03em;
	color: var(--ntp-primary-color, #0a1931);
}

[data-theme='dark'] .ntp-ntp-score__ring-value {
	color: var(--ntp-text-color, #f1f5f9);
}

.ntp-ntp-score__ring--expert .ntp-ntp-score__ring-value {
	font-size: clamp(1.4rem, 1.2rem + 0.55dvw, 1.75rem);
}

.ntp-ntp-score__ring-max {
	font-size: clamp(0.75rem, 0.7rem + 0.2dvw, 0.875rem);
	font-weight: 700;
	color: var(--ntp-text-muted, #64748b);
}

[data-theme='dark'] .ntp-ntp-score__ring-max {
	color: var(--ntp-text-muted, #94a3b8);
}

@media (prefers-reduced-motion: no-preference) {
	.ntp-ntp-score__ring-arc--animate {
		animation: ntp-ntp-score-ring-draw 1.15s cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	@keyframes ntp-ntp-score-ring-draw {
		to {
			stroke-dashoffset: calc(100 * (1 - var(--ntp-score-frac, 0)));
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.ntp-ntp-score__ring-arc--animate {
		stroke-dashoffset: calc(100 * (1 - var(--ntp-score-frac, 0)));
		animation: none;
	}
}