/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   SMOUSE STUDIO — BACK TO TOP (shared / single source of truth)
   A clean, minimal floating button that appears after the user scrolls down
   and smooth-scrolls back to the top. backtotop.js injects the markup on
   every page; this file styles it to match the site's dark / orange scheme.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.sm-backtotop {
	position: fixed;
	right: 1.75rem;
	bottom: 1.75rem;
	z-index: 9999;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;

	background-color: #2a2a2a;
	border: 1px solid #575757;
	border-radius: 50%;
	color: #FAF2F0;
	cursor: pointer;
	box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);

	/* Hidden until scrolled — fade + slide up on reveal. */
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.25s ease, visibility 0.25s ease,
		transform 0.25s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.sm-backtotop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sm-backtotop:hover {
	background-color: var(--smouse-orange, #E35300);
	border-color: var(--smouse-orange, #E35300);
}

.sm-backtotop:active {
	transform: translateY(0) scale(0.94);
}

.sm-backtotop svg {
	width: 45%;
	height: 45%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (max-width: 720px) {
	.sm-backtotop {
		right: 1.1rem;
		bottom: 1.1rem;
		width: 2.5rem;
		height: 2.5rem;
	}
}