/**
 * Scroll to Top Component
 *
 * @package CloveTheme
 * @since 1.0.0
 */

.scroll-to-top {
	position: fixed;
	bottom: var(--space-8);
	right: var(--space-8);
	z-index: var(--z-sticky);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	color: var(--color-text-inverse);
	background: var(--gradient-brand);
	border: none;
	border-radius: var(--radius-full);
	box-shadow: var(--shadow-lg);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition:
		opacity var(--duration-300) var(--ease-out),
		visibility var(--duration-300) var(--ease-out),
		transform var(--duration-300) var(--ease-out),
		background-color var(--duration-150) var(--ease-out);
}

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

.scroll-to-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 15px 25px -5px rgba(99, 102, 241, 0.4);
}

.scroll-to-top:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: 4px;
}

.scroll-to-top i {
	font-size: 1.25rem;
}

@media (max-width: 767px) {
	.scroll-to-top {
		bottom: var(--space-6);
		right: var(--space-6);
		width: 2.75rem;
		height: 2.75rem;
	}
}

/* Hide if reduced motion preferred - purely optional, but keeps it accessible by not animating */
@media (prefers-reduced-motion: reduce) {
	.scroll-to-top {
		transition: opacity var(--duration-300) var(--ease-out), visibility var(--duration-300) var(--ease-out);
		transform: none;
	}

	.scroll-to-top:hover {
		transform: none;
	}
}