/* ==========================================================================
   次元小窝 · 回到顶部按钮（css/backToTop.css）
   只有 index.html 引这一份。
   ⚠️ 这份原来是照抄别处的一段：Element 蓝 #409eff + 黑色阴影 + 白字，
      和全站令牌完全不是一套（连 :root 都没有）。现已收编：
      颜色/圆角/阴影/缓动全部走 index.css 的 §0 设计令牌，别再写死数值。
   层级：30 —— 压在正文之上、移动端侧栏(50)和上传弹窗(100)之下。
   目录：1 按钮本体  2 显示/隐藏
   ========================================================================== */


/* ---------- 1. 按钮本体 ---------- */
#backToTop{
	position: fixed;
	right: 30px;
	bottom: 60px;
	z-index: 30;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--r-full);
	display: grid;
	place-items: center;

	/* ⚠️ 浅蓝底必须配深色字（--blue-400 上写白字只有 1.9:1，基本看不清） */
	background-color: var(--blue-400);
	color: var(--ink-900);
	font-family: inherit;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	box-shadow: var(--sh-2);
}


/* ---------- 2. 显示 / 隐藏 ---------- */
/* 默认藏起来。⚠️ 藏的时候额外用 scale(0.8) 缩一下，
   出现时才像从底下"弹"出来（只改 translateY 是平移，没有 Q 弹感）。 */
#backToTop{
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px) scale(0.8);
	/* ⚠️ visibility 不能跟着插值：写成「0s + 延迟」。不这么写的话，
	   淡出还没走完元素就被 display 级地藏掉了，看不到收缩过程。 */
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease-q),
		background-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		visibility 0s linear var(--dur);
}

#backToTop.show{
	opacity: 1;
	visibility: visible;
	transform: translateY(0) scale(1);
	/* 出现要立刻可见，所以 visibility 的延迟归零 */
	transition:
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease-q),
		background-color var(--dur-fast) var(--ease),
		box-shadow var(--dur-fast) var(--ease),
		visibility 0s;
}

#backToTop:hover{
	background-color: var(--blue-500);
	box-shadow: var(--sh-3);
}

/* 按压：⚠️ 这条必须排在 .show 后面 —— 同优先级靠后者覆盖，
   否则按住时 .show 的 scale(1) 会把它顶掉，按下去没反应。 */
#backToTop:active{
	transform: translateY(0) scale(0.88);
	transition: transform var(--dur-press) var(--ease);
}