/* ===== 首页 hero ===== */
.hero {
	position: relative;
	background: var(--c-surface);
	border-bottom: 1px solid var(--c-border);
	padding: 40px 0 32px;
	text-align: center;
}

/* 首页 hero 顶到固定导航之下。
   main.css 原本给 #content 留了 var(--nav-h) 的顶部空间，这里取消掉，
   让 wallpaper 一直铺到页面最顶端、被导航盖住，导航的毛玻璃才有东西可模糊。
   导航仍然是 fixed，所以 hero 文字必须自己让出这段高度，否则会被压在导航下面。 */
#content.has-hero {
	padding-top: 0;
}

#content.has-hero .hero {
	padding-top: calc(var(--nav-h) + 40px);
}

/* hero 与首页正文之间留出呼吸空间。
   间距加在 .home-wrap 容器上，而不是 .stat-bar 上：
   统计条和右侧名片是同一行的两列，间距只加给统计条的话，
   名片不会跟着下移，会直接顶到 hero 的底边上。
   选择器限定 .hero + .home-wrap：只有首页的正文紧跟 hero，
   归档等页面顶部本来就有标题，再加间距会多出一段空白。 */
.hero + .home-wrap {
	padding-top: 40px;
}

/* 背景图层：图片自身比 hero 高 18%，通过 background-position 从下往上循环平移，
   溢出部分由 .hero 的 overflow:hidden 裁掉，视觉上是「由下往上流动」。
   background-attachment/position 是唯一不触发重排的做法，别用 transform 移动 img。 */
.hero-has-bg {
	overflow: hidden;
}

.hero-bg {
	position: absolute;
	left: 0;
	right: 0;
	/* 底边对齐 hero 底边并向下延伸，保证上移时有内容可露出来 */
	top: -18%;
	bottom: 0;
	background-repeat: repeat-x;
	background-size: cover;
	background-position: center bottom;
	pointer-events: none;
	/* 淡入淡出的目标值走变量，透明度仍然由 _config.yml 的 hero.opacity 决定；
	   动画里读 var() 就能既保住配置值，又不被关键帧写死。 */
	opacity: var(--hero-opacity, .32);
	animation:
		hero-flow var(--hero-speed, 28s) linear infinite,
		hero-fade var(--hero-speed, 28s) linear infinite;
	will-change: background-position, opacity;
}

/* 两个 .hero-bg 副本上下拼接，位移 -50% 时首尾无缝衔接，形成无缝循环。
   高度各为 hero 的 59%，拼起来正好 118% > 所需的 118% 覆盖。 */
.hero-bg::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 100%;
	background: inherit;
	background-position: center bottom;
}

@keyframes hero-flow {
	from {
		background-position: center bottom;
	}
	to {
		background-position: center top;
	}
}

/* 图片流到顶之后必须先淡出、回到底部再淡入：
   background-position 从 top 跳回 bottom 是同一帧内完成的，直接循环会看到一次
   「啪」地闪回。把归位那一帧压在 opacity:0 上就看不见了，循环也就接得上。
   两段渐变各自带缓动 —— 整段 linear 会让首尾的透明度变化慢得像掉帧。
   首尾都取 0，循环点两侧才连续。 */
@keyframes hero-fade {
	0% {
		opacity: 0;
		animation-timing-function: ease-out;
	}
	10% {
		opacity: var(--hero-opacity, .32);
		animation-timing-function: linear;
	}
	82% {
		opacity: var(--hero-opacity, .32);
		animation-timing-function: ease-in;
	}
	100% {
		opacity: 0;
	}
}

/* 图片之上盖一层渐浓的遮罩：文字区域亮度被压低以保证对比度。
   顶部必须完全透明 —— hero 现在顶到导航之下，顶部整段被导航盖住，
   若这里还给不透明的底色，导航的毛玻璃就只会糊到一层纯色，白做。
   遮罩色值走 --c-hero-veil：浅色下是白纱，暗色下是黑纱。 */
.hero-has-bg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--c-hero-veil);
	pointer-events: none;
}

.hero-has-bg .wrap {
	position: relative;
}

/* 尊重系统「减少动态效果」设置 */
@media (prefers-reduced-motion: reduce) {
	.hero-bg {
		animation: none;
	}
}

.hero-sub {
	font-size: 12px;
	color: var(--c-muted);
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.hero-saying {
	font-size: 24px;
	color: var(--c-title);
	font-weight: 600;
	line-height: 1.5;
}

.hero-author {
	margin-top: 10px;
	font-size: 13px;
	color: var(--c-faint);
}

/* ===== 首页两栏 ===== */
/* 与 .post-wrap 同一套写法：右栏固定 236px 宽 + sticky，
   主栏 flex:1 吃掉剩余空间。不用 grid 是因为文章页已经是 flex，
   两页保持同一种写法，改断点时只需要改一处经验值。 */
.home-wrap {
	display: flex;
	align-items: flex-start;
	gap: 24px;
}

.home-main {
	flex: 1;
	min-width: 0;
}

/* 首页侧栏不吃文章页那套 40% 配额（那边是为了给目录让位）。
   这里只约束「不高于视口」，否则卡片底部会滑出视口且永远够不到。 */
.home-side {
	width: 236px;
	flex-shrink: 0;
	position: sticky;
	top: calc(var(--nav-h) + 20px);
	max-height: calc(100vh - var(--nav-h) - 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ===== 区块标题 ===== */
/* 标题 + 右侧「更多」并成一行。原来「更多」是文章列表下方独占
   一行的居中按钮，改成贴在标题行里之后，滚动时它一直在视线高度上，
   不必滚到列表末尾才找得到。 */
.section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
}

.section-head:first-child {
	margin-top: 0;
}

.section-title {
	font-size: 16px;
	margin: 4px 0 16px;
	padding-left: 10px;
	border-left: 3px solid var(--c-primary);
	line-height: 1.2;
}

/* 在 .section-head 里，标题的下边距改由 flex 容器的 gap 承担，
   否则标题会和「更多」一起被 16px 的外边距推离基线。 */
.section-head .section-title {
	margin: 0 0 16px;
}

.section-more {
	flex-shrink: 0;
	margin-bottom: 16px;
	font-size: 13px;
	color: var(--c-muted);
	white-space: nowrap;
	transition: color .15s ease;
}

.section-more:hover {
	color: var(--c-primary);
}

.section-more i {
	margin-left: 2px;
	transition: transform .15s ease;
}

.section-more:hover i {
	transform: translateX(2px);
}

/* ===== 首页内容块 ===== */
/* 标签云 / 归档速览共用的白底描边容器。
   视觉节奏上给的是同一套「1px 描边 + 16px 内边距」，
   和 .post-item 卡片一致，滚动时横线能对齐。 */
.home-block {
	margin-top: 40px;
}

/* ===== 归档速览 ===== */
/* 竖向时间轴：一条 1px 竖线 + 每个年份一个方点。
   年份用等宽字体（--font-mono），月份与篇数并排靠右，
   一眼能看出「哪年文章多」，不用点进归档页。 */
.home-archive {
	position: relative;
	padding: 4px 20px 20px;
	background: var(--c-surface);
	border: 1px solid var(--c-border);
}

/* 竖线画在容器上，不画在每个年份上。
   left 是相对容器的 padding box，也就是「边框内侧 1px」再往右算：
   20(padding-left) + 4.5(9px 方点的一半) = 24.5 是方点圆心，
   减去边框那 1px，写 23px。
   这两个数字要一起改 —— 只改一个，圆点就会偏出线外。 */
.home-archive::before {
	content: "";
	position: absolute;
	left: 23px;
	top: 30px;
	bottom: 26px;
	width: 1px;
	background: var(--c-border);
}

.home-archive-year {
	position: relative;
	margin-top: 22px;
	padding-left: 26px;
}

/* 顶部留白就是视觉上的「起点」，所以线不从最上面开始画。 */
.home-archive-year::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 9px;
	height: 9px;
	background: var(--c-bg);
	border: 2px solid var(--c-primary);
}

.home-archive-year-link {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--font-mono);
	font-size: 17px;
	font-weight: 600;
	color: var(--c-title);
	transition: color .15s ease;
}

.home-archive-year-link:hover {
	color: var(--c-primary);
}

.home-archive-count {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 400;
	color: var(--c-faint);
}

.home-archive-months {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

/* 月份做成「淡底 + 描边」的小块，hover 反色。
   不用纯文字链接，是因为一年可能有 12 个月，纯文字行会拉得很长。 */
.home-archive-months a {
	display: inline-flex;
	align-items: baseline;
	gap: 5px;
	padding: 3px 9px;
	font-size: 12px;
	color: var(--c-muted);
	background: var(--c-bg);
	border: 1px solid var(--c-border);
	transition: all .15s ease;
}

.home-archive-months a:hover {
	color: #fff;
	background: var(--c-primary);
	border-color: var(--c-primary);
}

.home-archive-months a:hover em {
	color: rgba(255, 255, 255, .75);
}

.home-archive-months em {
	font-family: var(--font-mono);
	font-style: normal;
	font-size: 11px;
	color: var(--c-faint);
}

/* ===== 响应式 ===== */
@media screen and (max-width: 900px) {
	/* 900px 而不是 768px：主栏内容最窄到 560px 才舒服，
	   768~900px 之间挤下 236px 右栏后主栏只剩 500px 出头，
	   摘要会折成四行，不如直接并回单栏。 */
	.home-wrap {
		display: block;
	}

	/* 单栏时右栏挪到文章列表之后而不是直接删掉：
	   名片里的「随便看看 / 了解更多」是内容导航，
	   整块丢掉等于首页少了一处入口。 */
	.home-side {
		width: 100%;
		position: static;
		max-height: none;
		overflow: visible;
		margin-top: 40px;
	}
}

@media screen and (max-width: 768px) {
	.hero {
		padding: 28px 0 22px;
	}

	.hero-saying {
		font-size: 18px;
	}

	.hero-sub {
		font-size: 11px;
		letter-spacing: .08em;
	}

	.home-archive {
		padding: 4px 14px 16px;
	}

	/* padding 从 20 收到 14，竖线和方点要跟着一起收，否则会错开 6px。 */
	.home-archive::before {
		left: 17px;
	}

	.home-archive-year {
		padding-left: 26px;
	}

	.section-head {
		gap: 10px;
	}
}