/* ✨ Global base style */
.to-top-button {
	position: fixed;
	bottom: 40px;
	right: 30px;
	width: 60px;
	height: 60px;
	background-color: #333;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
	z-index: 9999;
	border: 2px solid white;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	position: fixed;
}

/* 👀 Show when visible */
.to-top-button.visible {
	opacity: 1;
	visibility: visible;
	animation: pulse 2s infinite;
	background-color: #605f5f;
}

/* 🌀 Hover effect */
.to-top-button:hover {
	transform: scale(1.1);
	background-color: #3e3e3e;
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* 🖱️ Active click effect */
.to-top-button:active {
	transform: scale(0.95);
}

.to-top-button svg {
	width: 40px;
	height: 40px;
	/* fill: currentColor; */
}

/* 💓 Pulse animation */
@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
	}
	70% {
		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
	}
}

/* 🌀 Scroll progress ring using conic-gradient */
.to-top-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: conic-gradient(#543954 var(--scroll-progress, 0%), transparent 0%);
	z-index: -1;
}