/* ===== Archim 首页：右缘时间线 · 毛玻璃跟随背景 ===== */

/* ---- 主题变量（亮图默认，暗图由 JS 切换） ---- */
body {
	--rail-track: #eae5d9;
	--rail-a: #d9b878;
	--rail-b: #a3823f;
	--dot: #c9a35c;
	--veil: rgba(252, 251, 247, 0.62);
}
body[data-tlbg='dark'] {
	--rail-track: rgba(255, 255, 255, 0.3);
	--rail-a: #f0dcae;
	--rail-b: #c9a35c;
	--dot: #e6c987;
	--veil: rgba(18, 18, 22, 0.42);
}

/* ---- 毛玻璃跟随背景 ---- */
.tl-bg {
	position: fixed;
	inset: -60px;
	z-index: -2;
	background-size: cover;
	background-position: center;
	filter: blur(48px) saturate(1.15) brightness(1.04);
	opacity: 0;
	transition: opacity 1s ease;
}
.tl-bg.on { opacity: 1; }
.tl-veil {
	position: fixed;
	inset: 0;
	z-index: -1;
	background: var(--veil);
	transition: background 0.9s ease;
}
body.blog { background: #faf8f3; }

/* ---- 字体基调 ---- */
body, .entry-content, h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', 'Futura', 'Avenir Next', 'PingFang SC', 'Hiragino Sans GB', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif;
}

/* ---- 简约固定顶部栏 ---- */
header.wp-block-template-part {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: none;
	transition: background 0.9s ease;
}
body[data-tlbg='dark'] header.wp-block-template-part {
	background: rgba(20, 20, 24, 0.45);
}
body[data-tlbg='dark'] header.wp-block-template-part a,
body[data-tlbg='dark'] header.wp-block-template-part .wp-block-site-title {
	color: #f0ead9 !important;
}
header.wp-block-template-part .wp-block-group {
	padding-top: 0.55rem !important;
	padding-bottom: 0.55rem !important;
}
header.wp-block-template-part .wp-block-site-title {
	font-size: 0.95rem !important;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
header.wp-block-template-part .wp-block-site-tagline { display: none; }
header.wp-block-template-part .wp-block-navigation a {
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
}

/* ---- 页面骨架 ---- */
body.blog .archim-timeline-page { padding-top: 88px; }

.tl-intro, .tl-end { text-align: center; }
.tl-intro-line, .tl-end-line {
	font-family: 'Montserrat', 'PingFang SC', sans-serif;
	font-weight: 500;
	letter-spacing: 0.5em;
	text-transform: uppercase;
	color: #a49b87;
	font-size: 0.78rem;
	transition: color 0.9s ease;
}
body[data-tlbg='dark'] .tl-intro-line,
body[data-tlbg='dark'] .tl-end-line { color: rgba(240, 234, 217, 0.75); }
.tl-intro { margin-bottom: 7vh; }
.tl-end { margin: 9vh 0 5vh; }

/* ---- 时间线容器：线在右缘 ---- */
.wp-block-post-template.archim-timeline {
	--pad-right: clamp(72px, 11vw, 150px);
	--line-x: clamp(38px, 6vw, 74px);
	position: relative;
	display: block;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 var(--pad-right) 4rem clamp(20px, 4vw, 48px);
	list-style: none;
}

/* 轨道线：两端内收，起于首个圆点、止于末个圆点 */
.wp-block-post-template.archim-timeline::before {
	content: '';
	position: absolute;
	top: 16px; bottom: 3.5rem;
	right: var(--line-x);
	width: 1.5px;
	background: var(--rail-track);
	transition: background 0.9s ease;
}
/* 进度线：随滚动生长 */
.wp-block-post-template.archim-timeline::after {
	content: '';
	position: absolute;
	top: 16px; bottom: 3.5rem;
	right: var(--line-x);
	width: 1.5px;
	background: linear-gradient(var(--rail-a), var(--rail-b));
	box-shadow: 0 0 12px rgba(201, 163, 92, 0.45);
	transform: scaleY(0);
	transform-origin: top;
	transition: background 0.9s ease;
}
@supports (animation-timeline: scroll()) {
	.wp-block-post-template.archim-timeline::after {
		animation: tl-grow linear both;
		animation-timeline: scroll(root block);
	}
}
@keyframes tl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- 节点 ---- */
.wp-block-post-template.archim-timeline > li {
	position: relative;
	display: block;
	margin: 0 0 clamp(5rem, 13vh, 9rem);
	view-timeline-name: --item;
	view-timeline-axis: block;
}

/* 圆点：钉在右缘线上 */
.wp-block-post-template.archim-timeline > li::before {
	content: '';
	position: absolute;
	top: 10px;
	right: calc(var(--line-x) - var(--pad-right) - 5.25px);
	width: 12px; height: 12px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid var(--dot);
	z-index: 2;
	transition: border-color 0.9s ease;
}
@supports (animation-timeline: view()) {
	.wp-block-post-template.archim-timeline > li::before {
		animation: tl-dot linear both;
		animation-timeline: --item;
		animation-range: entry 10% entry 45%;
	}
}
@keyframes tl-dot {
	to { background: var(--dot); box-shadow: 0 0 0 6px rgba(201, 163, 92, 0.18), 0 0 14px rgba(201, 163, 92, 0.55); }
}

/* 日期 */
.tl-date {
	display: block;
	text-align: right;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: #a3934f;
	margin: 0 0 0.9rem;
	transition: color 0.9s ease;
}
body[data-tlbg='dark'] .tl-date { color: #e6c987; }

/* ---- 大卡片 ---- */
.tl-card {
	position: relative;
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 24px 70px rgba(30, 28, 20, 0.12);
	will-change: transform, opacity;
}

.tl-card-img {
	margin: 0;
	width: 100%;
	height: clamp(320px, 52vh, 560px);
	overflow: hidden;
}
.tl-card-img img {
	width: 100%;
	height: 118%;
	object-fit: cover;
	display: block;
	will-change: transform;
}

.tl-card-body { padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.6rem, 3.5vw, 2.6rem); }

.tl-card-cat {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	margin: 0 0 0.6rem;
}
.tl-card-cat a { color: #b08d4f; text-decoration: none; }

.tl-card-title {
	margin: 0 0 0.7rem;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
	font-weight: 600;
	line-height: 1.25;
}
.tl-card-title a { color: #141518; text-decoration: none; }
.tl-card-title a:hover { color: #a3823f; }

.tl-card-excerpt {
	margin: 0;
	font-size: 0.95rem;
	font-weight: 300;
	line-height: 1.85;
	color: #6b675e;
}
.tl-card-excerpt a { color: #a3823f; text-decoration: none; font-weight: 500; white-space: nowrap; }

/* ---- 滚动动效 ---- */
@supports (animation-timeline: --t) {
	.wp-block-post-template.archim-timeline > li .tl-card {
		animation: tl-focus linear both;
		animation-timeline: --item;
		animation-range: entry 0% exit 100%;
	}
	.tl-card-img img {
		animation: tl-parallax linear both;
		animation-timeline: --item;
		animation-range: entry 0% exit 100%;
	}
	.wp-block-post-template.archim-timeline > li .tl-date {
		animation: tl-date-in linear both;
		animation-timeline: --item;
		animation-range: entry 0% entry 35%;
	}
}
@keyframes tl-focus {
	0%   { opacity: 0;    transform: scale(0.9) translateY(70px); }
	28%  { opacity: 1;    transform: scale(1) translateY(0); }
	72%  { opacity: 1;    transform: scale(1); }
	100% { opacity: 0.25; transform: scale(0.88) translateY(-50px); }
}
@keyframes tl-parallax {
	from { transform: translateY(-7%) scale(1.04); }
	to   { transform: translateY(4%)  scale(1.12); }
}
@keyframes tl-date-in {
	from { opacity: 0; transform: translateX(18px); }
	to   { opacity: 1; transform: none; }
}

/* ---- 移动端 ---- */
@media (max-width: 720px) {
	.wp-block-post-template.archim-timeline {
		--pad-right: 52px;
		--line-x: 24px;
		padding-left: 14px;
	}
	.tl-card-img { height: 46vh; }
}