/* ============================================================
   CODE 主题 —— 城市背景与首页 UI
   全站加载（首页之外每一页都有城市）。三档模式互不污染：
     body.is-home           首页，完整交互
     body.city-mode-archive 栏目/分类落地页，遮罩轻，色彩透
     body.city-mode-quiet   单篇/独立页/404，遮罩重，安静阅读
   ============================================================ */

body.is-home {
	height: 100vh;
	overflow: hidden;
}

body.is-home .site {
	height: 100vh;
	overflow: hidden;
}

/* 首页没有独立页头，导航收进 UI 层 */
body.is-home .site-header,
body.is-home .site-footer {
	display: none;
}

body.is-home .site-main {
	position: relative;
	height: 100vh;
	padding: 0;
	overflow: hidden;
}

/* --- 城市画布 ---
   fixed 而不是 absolute：内页要滚动，城市得钉在视口上当背景。
   放在 <body> 最外层，不参与 .site 的层叠上下文。 */
#webgl-container {
	position: fixed;
	inset: 0;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.8s var(--ease);
}

#webgl-container.is-ready {
	opacity: 1;
}

#webgl-container canvas {
	display: block;
	width: 100%;
	height: 100%;
}

/* 内容层永远在城市之上 */
.site {
	position: relative;
	z-index: 1;
}

/* ============================================================
   内页安静档
   城市还在，但它退到玻璃后面 —— 读者在读字的时候，
   背景不该有任何东西在抢注意力。
   ============================================================ */
body.city-mode-quiet::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;               /* 与画布同层，但 DOM 在后 → 盖在画布上 */
	pointer-events: none;
	/* 只在上下两端压暗（顶住固定页头、底住页脚），
	   中间留亮，让城市真的看得见。
	   中间值走过了 0.34 → 0.22 → 0.17 三档：
	   0.34 那个是"页面等于没有背景"，现在这档是"能读出来但不抢戏"。 */
	background: linear-gradient(
		180deg,
		rgba(14, 14, 15, 0.88) 0%,
		rgba(14, 14, 15, 0.17) 18%,
		rgba(14, 14, 15, 0.17) 82%,
		rgba(14, 14, 15, 0.92) 100%
	);
}

/* 内页页头 / 页脚原本是实底，这里改成半透明，让城市透一点上来 */
body.city-mode-quiet .site-header {
	background: rgba(14, 14, 15, 0.45);
}

body.city-mode-quiet .site-footer {
	background: transparent;
}

/* ============================================================
   栏目落地页（展示型）
   大封面、少文字，所以遮罩比阅读页轻得多 —— 让城市和
   光标灯的随机色彩真的透上来。只在上下两端压暗顶住页头页脚。
   ============================================================ */
body.city-mode-archive::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(14, 14, 15, 0.82) 0%,
		rgba(14, 14, 15, 0.18) 16%,
		rgba(14, 14, 15, 0.24) 84%,
		rgba(14, 14, 15, 0.88) 100%
	);
}

body.city-mode-archive .site-header {
	background: rgba(14, 14, 15, 0.40);
}

body.city-mode-archive .site-footer {
	background: transparent;
}

/* 卡片和归档大字直接压在城市上，给一点极轻的垫底保证可读 */
body.city-mode-archive .page-head__desc {
	text-shadow: 0 1px 12px rgba(14, 14, 15, 0.85);
}

/* ============================================================
   UI 层
   ============================================================ */
.home-ui {
	position: absolute;
	inset: 0;
	z-index: 10;
	pointer-events: none;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--pad);
}

/* --- 巨型标识 --- */
.home-giant {
	font-family: var(--font-sans);
	font-size: clamp(56px, 11vw, 208px);
	font-weight: 900;
	line-height: 0.85;
	letter-spacing: -0.06em;
	color: #ffffff;
	mix-blend-mode: difference;
	transition: transform 0.4s var(--ease);
	will-change: transform;
}

.home-giant__line {
	display: block;
	/* 换字时淡出淡入。字体和字号一律不动，只做透明度过渡 ——
	   要的是"闪了一下身份"，不是"换了一行字"。时长与 JS 的
	   GIANT_SWAP_MS 对齐。 */
	transition: opacity 0.12s var(--ease);
}

.home-giant.is-swapping .home-giant__line {
	opacity: 0;
}

/* --- 右上：导航 --- */
.home-controls {
	position: absolute;
	top: var(--pad);
	right: var(--pad);
	width: min(230px, 42vw);
	pointer-events: auto;

	/* 平时几乎隐形；大字换身份时整块"醒"过来，
	   否则光晕亮在一个 28% 透明度的容器里等于没亮。 */
	opacity: calc(0.28 + var(--nav-wake, 0) * 0.68);
	transition: opacity 0.14s var(--ease);
}

.home-controls:hover,
.home-controls:focus-within {
	opacity: 1;
}

.home-nav {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.home-nav__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-nav__list li {
	display: block;
	margin: 0;
}

.home-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	width: 100%;
	padding: 10px 15px;

	background: rgba(14, 14, 15, 0.35);
	border: 1px solid rgba(255, 255, 255, 0.28);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);

	color: #ffffff;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	cursor: pointer;

	transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease);

	/* 光晕：由 JS 写的这两个变量驱动。
	   --glow 是 0–1 的亮度包络（激发快、消散慢），
	   --glow-hue 是每次激发/悬停重掷的随机色相。 */
	--glow: 0;
	--glow-hue: 200;
	position: relative;
	box-shadow: 0 0 calc(36px * var(--glow))
		hsl(var(--glow-hue), 95%, 62%, calc(var(--glow) * 0.9));
}

/* 被点亮时内侧的晕染。放在 ::before 上，
   自然层级在文字之下，不用碰 z-index。 */
.home-nav__link::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: hsl(var(--glow-hue), 92%, 58%);
	opacity: calc(var(--glow) * 0.20);
}

.home-nav__link:hover,
.home-nav__link:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: #000000;
}

.home-nav__link--btn {
	font-family: var(--font-sans);
}

/* 箭头用伪元素画。
   菜单项现在由后台「外观 → 菜单」输出，模板里没有 span 可挂，
   所以样式必须写在 ::after 上才不会丢。 */
.home-nav__link::after {
	content: '↗';
	font-size: 12px;
	opacity: 0.55;
	transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.home-nav__link:hover::after,
.home-nav__link:focus-visible::after {
	opacity: 1;
	transform: translate(2px, -2px);
}

.home-nav__link--btn::after {
	content: '↻';
}

.home-nav__link--btn:hover::after,
.home-nav__link--btn:focus-visible::after {
	transform: rotate(-180deg);
}

/* --- 底部 --- */
.home-bottom {
	display: flex;
	justify-content: flex-start;
	align-items: flex-end;
	gap: 24px;
}

.home-title {
	color: #ffffff;
	max-width: 340px;
}

.home-title h1 {
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.02em;
	margin: 0 0 10px;
	line-height: 1.1;
}

.home-title p {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.home-concept {
	display: block;
	margin-top: 8px;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: none;
	color: rgba(255, 255, 255, 0.4);
}

/* --- 鼠标提示 --- */
.home-hint {
	position: absolute;
	left: 50%;
	bottom: calc(var(--pad) + 2px);
	transform: translateX(-50%);

	display: flex;
	align-items: center;
	gap: 10px;

	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.35);

	transition: opacity 0.6s var(--ease);
}

.home-hint.is-hidden {
	opacity: 0;
}

.home-hint__dash {
	display: inline-block;
	width: 26px;
	height: 1px;
	background: currentColor;
}

/* ============================================================
   响应式
   ============================================================ */
@media (max-width: 900px) {
	.home-controls {
		width: min(190px, 46vw);
		opacity: 0.75;
	}

	.home-title h1 { font-size: 19px; }
	.home-title { max-width: 240px; }
}

@media (max-width: 600px) {
	.home-giant {
		font-size: clamp(48px, 17vw, 96px);
	}

	.home-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}

	.home-hint {
		display: none;
	}

	.home-controls {
		width: min(170px, 52vw);
	}
}

/* 触屏设备：没有 hover，导航保持可见 */
@media (hover: none) {
	.home-controls {
		opacity: 0.9;
	}
}

/* 用户要求减弱动效时，不放大字位移 */
@media (prefers-reduced-motion: reduce) {
	.home-giant {
		transform: none !important;
	}
}