@charset "GBK";
/* 动效样式：进度变量由 motion.js 每帧写入；没有 html.motion 标记时保持完整静态页面。 */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); }
html { scroll-padding-top: 30px; }
/* Lenis 官方要求的根样式，平滑滚动时关闭浏览器自带 smooth */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.site-header { position: relative; z-index: 2; background: var(--paper); }
.hero-art { position: relative; }
.facet-visual { margin-top: auto; position: relative; aspect-ratio: 1; overflow: clip; border-radius: 4px 4px 0 0; background: var(--ink); }
.facet-visual img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.facet-visual::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg, transparent 0 3px, var(--deep) 3px 4px); transition: opacity .6s ease; }
.facet-card:hover .facet-visual::after { opacity: .22; }
.feature-art, .about-art, .closing-art { background: var(--ink); }
.button { position: relative; overflow: hidden; }
.button::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: repeating-linear-gradient(120deg, var(--accent) 0 3px, transparent 3px 9px); transform: translateX(-100%); transition: transform .35s ease; }
.button:hover::after, .button:focus-visible::after { transform: translateX(0); }
.toc nav a { position: relative; transition: color .3s ease; }
.toc nav a.is-current { color: var(--ink); }
.toc nav a.is-current::before { content: ""; position: absolute; left: -17px; top: .2em; bottom: .2em; width: 1px; background: var(--ink); }
/* 页尾默认普通流式；桌面由脚本切换为幕布揭开。 */
.grand-footer { position: relative; background: var(--deep); color: var(--paper); margin-top: 0; }
.footer-stage { position: relative; min-height: 600px; height: 100vh; height: 100svh; isolation: isolate; overflow: clip; }
.footer-scene { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.footer-stage::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 20%, #173f351a 42%, #173f35ed 90%); }
.footer-content { height: 100%; min-height: inherit; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 100px; }
.footer-motto { font: 13px/1.8 var(--mono); letter-spacing: .06em; margin-bottom: 15px; }
.footer-wordmark { align-self: flex-start; font: 200 clamp(160px, 30vw, 460px)/.82 var(--display); letter-spacing: -.01em; text-transform: uppercase; padding-bottom: .02em; color: var(--paper); }
.footer-wordmark:focus-visible { outline-color: var(--paper); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: .5px solid #e8eee855; padding-block: 24px 30px; margin-top: 28px; font-size: 11px; line-height: 1.8; }
.footer-bottom nav { display: flex; gap: 28px; }
.footer-bottom { font-family: var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.footer-bottom a:hover { text-decoration: underline; text-underline-offset: 5px; }
/* 标题拆行容器；脚本未运行时不会出现这些元素 */
.ln { display: block; overflow: hidden; padding: 0 .12em .14em; margin: 0 -.12em -.14em; }
.ln-i { display: block; }
.ch { display: inline-block; }

/* ---------------- 以下仅在 html.motion 下生效 ---------------- */

/* 视差图：框内放大，按 --py 上下位移；--ps 为放大倍数，需不小于 1 + 2 × data-parallax；放大会降低清晰度，故位移幅度取小 */
.motion [data-parallax] > img { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1.1)); will-change: transform; }
.motion .feature-art { --ps: 1.08; }
.motion .about-art { --ps: 1.08; }

/* 懒加载图片解码后淡入 */
.motion img[loading="lazy"] { opacity: 0; transition: opacity 1s ease; }
.motion img[loading="lazy"].is-loaded { opacity: 1; }

/* 通用显现：上浮淡入，--d 为错落延迟 */
.motion [data-reveal] { opacity: 0; transform: translate3d(0, 40px, 0); transition: opacity 1s ease var(--d, 0s), transform 1.3s var(--ease-out) var(--d, 0s); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
/* 图框显现：自下而上揭开，不位移 */
.motion [data-reveal="frame"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.5s var(--ease-io) var(--d, 0s); }
.motion [data-reveal="frame"].is-in { clip-path: inset(0 0 0 0); }
/* 精选卡片：底部收拢后展开 */
.motion .featured-post[data-reveal] { clip-path: inset(0 0 22% 0); transition: opacity 1s ease, transform 1.3s var(--ease-out), clip-path 1.4s var(--ease-io); }
.motion .featured-post[data-reveal].is-in { clip-path: inset(0 0 0 0); }

/* 标题逐行从遮罩下升起 */
.motion [data-split] .ln-i { transform: translate3d(0, 120%, 0); transition: transform 1.25s var(--ease-out) calc(var(--d, 0s) + .12s + var(--i) * .11s); }
.motion .is-in [data-split] .ln-i, .motion [data-split].is-in .ln-i { transform: none; }

/* 首屏入场：文字依次出现，插画自上而下揭开 */
.motion .hero[data-intro] .intro-label, .motion .hero[data-intro] .hero-description, .motion .hero[data-intro] .hero-actions, .motion .hero[data-intro] .hero-footnote, .motion .hero[data-intro] figcaption { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 1s ease var(--d), transform 1.2s var(--ease-out) var(--d); }
.motion .hero[data-intro] .intro-label { --d: .05s; }
.motion .hero[data-intro] h1 { --d: .05s; }
.motion .hero[data-intro] .hero-description { --d: .55s; }
.motion .hero[data-intro] .hero-actions { --d: .7s; }
.motion .hero[data-intro] .hero-footnote { --d: .85s; }
.motion .hero[data-intro] figcaption { --d: 1.3s; }
.motion .hero[data-intro].is-in .intro-label, .motion .hero[data-intro].is-in .hero-description, .motion .hero[data-intro].is-in .hero-actions, .motion .hero[data-intro].is-in .hero-footnote, .motion .hero[data-intro].is-in figcaption { opacity: 1; transform: none; }
.motion .hero[data-intro] .hero-art img { clip-path: inset(0 0 100% 0); transform: scale(1.06); transition: clip-path 1.8s var(--ease-io) .2s, transform 2.4s var(--ease-out) .2s; }
.motion .hero[data-intro].is-in .hero-art img { clip-path: inset(0 0 0 0); transform: none; }
/* 首屏离场：文字下沉、变淡、虚化；插画以较慢速度跟随，形成景深 */
/* 首屏裁切，插画下沉时滑入边界之下而不压住下一节 */
.motion .hero { overflow: clip; }
.motion .hero-copy { transform: translate3d(0, calc(var(--hero, 0) * 22vh), 0); opacity: calc(1 - .75 * var(--hero, 0)); }
.motion .hero-art { transform: translate3d(0, calc(var(--hero, 0) * 36vh), 0); }

/* 人物横幅：进入时由窄展开到满宽，图片同步回缩 */
.motion .closing-art { clip-path: inset(0 calc((1 - var(--widen, 1)) * 9%) round 6px 6px 0 0); --ps: calc(1.07 + (1 - var(--widen, 1)) * .14); }

/* 页尾揭幕：--f 从 0 到 1，大图回缩、品牌字逐字升起、细节最后出现 */
.motion .footer-stage { opacity: calc(.35 + .65 * var(--f, 1)); }
.motion .footer-scene { transform: translate3d(0, calc((1 - var(--f, 1)) * -6%), 0) scale(calc(1 + .16 * (1 - var(--f, 1)))); will-change: transform; }
.motion .footer-wordmark .ch { transform: translate3d(0, calc((1 - var(--f, 1)) * (40% + var(--i) * 24%)), 0); }
.motion .footer-motto, .motion .footer-bottom { opacity: clamp(0, (var(--f, 1) - .55) * 2.4, 1); }
/* 桌面幕布：正文盖在页尾之上滚走，页尾粘在视口底部 */
.curtain main { position: relative; z-index: 1; background: var(--paper); }
.curtain .grand-footer { position: sticky; bottom: 0; z-index: 0; }
.curtain .grand-footer.is-covered { visibility: hidden; }
.curtain .grand-footer:not(.is-near) .footer-scene { display: none; }

/* 模糊滤镜只给桌面，手机省去逐帧滤镜开销 */
@media (min-width: 900px) {
	.motion .hero-copy { filter: blur(calc(10px * var(--hero, 0))); }
	.motion .footer-scene { filter: blur(calc(12px * (1 - var(--f, 1)))); }
}

@media (max-width: 680px) {
	html { scroll-padding-top: 20px; }
	.site-header { height: 72px; }
	.footer-stage { min-height: 560px; height: 88svh; }
	.footer-scene { object-position: 54% center; }
	.footer-wordmark { font-size: 37vw; }
	.footer-motto { font-size: 12px; }
	.footer-bottom { flex-wrap: wrap; gap: 15px; padding-bottom: 24px; font-size: 10px; }
	.footer-bottom nav { order: -1; width: 100%; gap: 25px; }
	/* 手机缩短位移距离，首屏插画不再下沉 */
	.motion [data-reveal] { transform: translate3d(0, 24px, 0); }
	.motion .hero-art { transform: none; }
	.motion .hero-copy { transform: translate3d(0, calc(var(--hero, 0) * 10vh), 0); }
	.motion .closing-art { clip-path: inset(0 calc((1 - var(--widen, 1)) * 5%) round 6px 6px 0 0); }
}