/*
 * Metric Horizon - back-to-top button with a scroll progress ring.
 * Uses --mh-* tokens from the core token bridge.
 */

.mh-totop {
	position: fixed;
	right: clamp(16px, 3vw, 34px);
	bottom: clamp(16px, 3vw, 34px);
	z-index: 900;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background: var(--mh-primary, #0a1b4d);
	color: #fff;
	cursor: pointer;

	box-shadow: 0 10px 26px rgba(10, 27, 77, 0.28);

	opacity: 0;
	visibility: hidden;
	transform: translateY(10px) scale(0.94);
	transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
		visibility 0.28s ease, background 0.2s ease;
}

.mh-totop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
}

.mh-totop:hover {
	background: var(--mh-primary-hover, #0d3b8e);
	transform: translateY(-2px) scale(1.03);
}

.mh-totop:active {
	transform: translateY(0) scale(0.97);
}

.mh-totop:focus-visible {
	outline: 2px solid var(--mh-secondary, #1e5ed6);
	outline-offset: 3px;
}

/* ---------------- progress ring ---------------- */
.mh-totop__ring {
	position: absolute;
	inset: -3px;
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	transform: rotate(-90deg);
	pointer-events: none;
}

.mh-totop__ring circle {
	fill: none;
	stroke-width: 1.4;
	stroke-linecap: round;
}

.mh-totop__ring-bg {
	stroke: rgba(255, 255, 255, 0.12);
}

.mh-totop__ring-bar {
	stroke: var(--mh-secondary, #1e5ed6);
	stroke-dasharray: 125.6; /* 2 * PI * r, r = 20 */
	stroke-dashoffset: 125.6;
	transition: stroke-dashoffset 0.12s linear;
}

/* ---------------- arrow ---------------- */
.mh-totop__icon {
	position: relative;
	width: 22px;
	height: 22px;
	transition: transform 0.25s ease;
}

.mh-totop:hover .mh-totop__icon {
	transform: translateY(-2px);
}

@media (max-width: 575px) {
	.mh-totop {
		width: 48px;
		height: 48px;
	}
	.mh-totop__icon {
		width: 19px;
		height: 19px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mh-totop,
	.mh-totop__icon,
	.mh-totop__ring-bar {
		transition: none;
	}
}

@media print {
	.mh-totop {
		display: none;
	}
}