/**
 * File: assets/css/components/go-to-top.css
 * Description: Go-to-top button styles.
 *
 * MAGIDA GLOBAL UI PASS 4:
 * - Desktop vertical right-edge button.
 * - Mobile circular arrow button.
 */

.magida-go-to-top {
	position: fixed;
	right: 24px;
	bottom: 96px;
	z-index: var(--magida-z-floating);
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 72px;
	padding: 12px 0;
	border: 0;
	background: transparent;
	color: var(--magida-text-muted);
	opacity: 0;
	pointer-events: none;
	transform: translateY(12px);
	transition:
		opacity var(--magida-transition),
		color var(--magida-transition),
		transform var(--magida-transition);
}

.magida-go-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.magida-go-to-top__label {
	writing-mode: vertical-rl;
	color: currentColor;
	font-family: var(--magida-font-heading);
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.14em;
	line-height: 1;
}

.magida-go-to-top__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(5, 223, 254, 0.28);
	border-radius: var(--magida-radius-full);
	background: rgba(6, 7, 11, 0.72);
	color: var(--magida-cyan);
}

.magida-go-to-top__icon svg {
	width: 18px;
	height: 18px;
}

.magida-go-to-top:hover,
.magida-go-to-top:focus-visible {
	color: var(--magida-cyan);
	transform: translateY(-2px);
}

.magida-go-to-top:hover .magida-go-to-top__icon,
.magida-go-to-top:focus-visible .magida-go-to-top__icon {
	box-shadow: var(--magida-glow-soft);
}

@media (max-width: 768px) {
	.magida-go-to-top {
		right: 18px;
		bottom: 86px;
		min-height: 44px;
		padding: 0;
	}

	.magida-go-to-top__label {
		display: none;
	}

	.magida-go-to-top__icon {
		width: 44px;
		height: 44px;
		background: rgba(6, 7, 11, 0.82);
	}
}