/* =============================================================================
   Component: Back to top — floating circle, bottom-right, fades in on scroll
   ========================================================================== */

.tt-back-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: var(--z-header);
	width: 48px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--tt-ink);
	color: #fff;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0;
	transform: translateY(8px);
	transition:
		opacity var(--dur-base) var(--ease),
		transform var(--dur-base) var(--ease),
		background var(--dur-base) var(--ease);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

.tt-back-to-top[hidden] {
	display: none;
}

.tt-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.tt-back-to-top:hover,
.tt-back-to-top:focus-visible {
	background: #000;
	transform: translateY(-4px);
}

.tt-back-to-top:focus-visible {
	outline: 2px solid var(--tt-ink);
	outline-offset: 3px;
}

.tt-back-to-top:active {
	transform: translateY(0);
}

.tt-back-to-top svg {
	display: block;
}