/*!
 * WellMade Axis Core - Scroll To Top
 * A still, decorative back-to-top button: frame + fill + static outline (+soft
 * glow) + mark, with an entrance, an optional hover lift, an optional one-turn
 * hover spin, and a click nudge. No scroll-linked animation.
 * Colors via CSS vars + currentColor (dark mode inherited).
 * Inline per button: --wma-stt-size, --wma-stt-size-m, --wma-stt-offset,
 * --wma-stt-color, --wma-stt-glow, --wma-stt-glow-blur, --wma-stt-smooth,
 * --wma-stt-pad, --wma-stt-radius.
 */

.wma-stt {
	position: fixed;
	z-index: 9990;
	width: var(--wma-stt-size, 64px);
	height: var(--wma-stt-size, 64px);
	padding: 0;
	border: none;
	background: transparent;
	color: var(--wma-stt-color, currentColor);
	cursor: pointer;
	box-sizing: border-box;
	/* Entrance: hidden until .is-visible */
	opacity: 0;
	transform: translateY(14px) scale(0.85);
	pointer-events: none;
	transition:
		opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
	-webkit-tap-highlight-color: transparent;
}
.wma-stt.is-visible {
	opacity: 1 !important;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}

/* Shield against theme/GP generic button styles (button:hover etc.) that would
   paint a background and recolor our button. Force transparent bg and our own
   color in every state. */
.wma-stt,
.wma-stt:hover,
.wma-stt:focus,
.wma-stt:active,
.wma-stt:focus-visible {
	background: transparent !important;
	background-color: transparent !important;
	color: var(--wma-stt-color, currentColor) !important;
	box-shadow: none;
	text-decoration: none;
}

/* Placement */
.wma-stt--bottom-right { right: var(--wma-stt-offset, 24px); bottom: var(--wma-stt-offset, 24px); }
.wma-stt--bottom-left  { left: var(--wma-stt-offset, 24px);  bottom: var(--wma-stt-offset, 24px); }

.wma-stt:focus-visible { outline: 2px solid var(--wma-stt-color, currentColor); outline-offset: 3px; border-radius: 50%; }
.wma-stt:active { transform: translateY(0) scale(0.92); }

/* ----- Layers share the box ----- */
.wma-stt__frame,
.wma-stt__outline,
.wma-stt__mark,
.wma-stt__arrow {
	position: absolute;
	inset: 0;
	display: block;
	box-sizing: border-box;
}

/* ----- FRAME ----- */
.wma-stt__frame {
	border-radius: var(--wma-stt-radius, 18%);
	overflow: hidden;
}
.wma-stt--fill-solid .wma-stt__frame { background: var(--wma-stt-color, currentColor); }

/* ----- OUTLINE (static, steady border) ----- */
.wma-stt__outline { overflow: visible; }
.wma-stt__outline-line { stroke-dashoffset: 0; }

/* ----- SOFT GLOW (fixed, one clean shadow on the outline) ----- */
.wma-stt--glow .wma-stt__outline-line {
	filter: drop-shadow(0 0 var(--wma-stt-glow-blur, 4px) var(--wma-stt-glow, currentColor));
}

/* ----- MARK ----- */
.wma-stt__mark {
	padding: var(--wma-stt-pad, 22%);
	transform-origin: 50% 50%;
	transition: transform var(--wma-stt-smooth, 0.2s) linear;
}
.wma-stt__mark > svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* emoji mark: center it, size relative to the button */
.wma-stt__mark--emoji {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6em;
	line-height: 1;
	font-style: normal;
}

/* Hover spin: the mark does one elegant turn on hover, then rests pointing up.
   Pure CSS, no scroll involvement. */
.wma-stt--behavior-hover .wma-stt__mark {
	transition: transform 0.6s cubic-bezier(0.34, 1.1, 0.5, 1);
}
.wma-stt--behavior-hover.is-visible:hover .wma-stt__mark {
	transform: rotate(360deg);
}

/* ----- ARROW OVERLAY ----- */
.wma-stt__arrow {
	padding: 0;
	pointer-events: none;
	transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ----- HOVER LIFT (opt-in): the whole button lifts slightly with a soft
   shadow. Applies to every combination, so frame, outline, mark and arrow
   always move together. ----- */
.wma-stt--hover.is-visible {
	transition:
		opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.3s ease;
}
.wma-stt--hover.is-visible:hover {
	transform: translateY(-3px);
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
}

/* ----- CLICK NUDGE (script toggles .is-nudging) ----- */
.wma-stt.is-nudging .wma-stt__arrow {
	transform: translateY(-8px);
	transition: transform 0.15s ease-out;
}

/* ----- MOBILE ----- */
@media (max-width: 768px) {
	.wma-stt { width: var(--wma-stt-size-m, 52px); height: var(--wma-stt-size-m, 52px); }
}

/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce) {
	.wma-stt,
	.wma-stt__mark,
	.wma-stt__arrow {
		transition: opacity 0.2s linear !important;
		animation: none !important;
	}
	.wma-stt { transform: none !important; }
	.wma-stt.is-visible { transform: none !important; }
	.wma-stt--behavior-hover.is-visible:hover .wma-stt__mark { transform: none !important; }
	.wma-stt--hover.is-visible:hover { transform: none !important; filter: none !important; }
}