/* ================================================================
   Back-to-Top — circular scroll-progress button (back-to-top.css)
   Fixed bottom-left so it never collides with the bottom-right
   contact FAB. A brand-blue ring fills as the page scrolls; an
   up-chevron sits in the middle. Hidden until you scroll past the
   hero. Behaviour: assets/js/back-to-top.js
   ================================================================ */

.doso-totop {
	--totop-size: 52px;
	--totop-brand: var(--color-primary, #2563eb);

	position: fixed;
	left: clamp(1rem, 3vw, 2rem);
	bottom: clamp(1rem, 3vw, 2rem);
	z-index: 9980;

	width: var(--totop-size);
	height: var(--totop-size);
	display: grid;
	place-items: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: var(--totop-brand);
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(15, 23, 42, 0.18);

	opacity: 0;
	visibility: hidden;
	transform: translateY(14px) scale(0.9);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s, box-shadow 0.2s;
}

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

.doso-totop:hover {
	box-shadow: 0 10px 26px rgba(37, 99, 235, 0.32);
}

.doso-totop:focus-visible {
	outline: 3px solid rgba(37, 99, 235, 0.4);
	outline-offset: 2px;
}

/* Progress ring — rotated so 0% starts at 12 o'clock. */
.doso-totop__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
}

.doso-totop__track,
.doso-totop__bar {
	fill: none;
	stroke-width: 3;
}

.doso-totop__track {
	stroke: rgba(15, 23, 42, 0.1);
}

.doso-totop__bar {
	stroke: var(--totop-brand);
	stroke-linecap: round;
	/* pathLength="100" on the SVG circle → offset maps 1:1 to percent. */
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.1s linear;
}

/* Centre chevron. */
.doso-totop__arrow {
	position: relative;
	z-index: 1;
	transition: transform 0.2s ease;
}

.doso-totop:hover .doso-totop__arrow {
	transform: translateY(-2px);
}

@media (max-width: 480px) {
	.doso-totop { --totop-size: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.doso-totop,
	.doso-totop__arrow,
	.doso-totop__bar {
		transition: opacity 0.2s ease, visibility 0.2s;
	}
}