/* ============ Tokens（沿用 haoqi.design 的体系：双主题 4 级灰度 + 单一荧光绿点缀） ============ */
:root {
  color-scheme: light;
  --label: 0, 0, 0;
  --label-d: 54, 54, 48;
  --bg-deep: 251, 250, 244;
  --l1: rgba(var(--label), 1);
  --l2: rgba(var(--label-d), .6);
  --l3: rgba(var(--label-d), .32);
  --l4: rgba(var(--label-d), .18);
  --line: rgba(var(--label-d), .1);
  --b1: rgb(var(--bg-deep));
  --be: #efede7;
  --accent: #c0fe04;
  --ease-66: cubic-bezier(.66, 0, .01, 1);
  --ease-out-expo: cubic-bezier(.22, 1, .36, 1);
  --font-sans: "TikTok Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Space Mono", "SF Mono", "PingFang SC", monospace;
  --pad-x: clamp(1rem, 4vw, 3.5rem);
  --pad-y: clamp(4.5rem, 9vh, 6rem);
}
html.dark {
  color-scheme: dark;
  --label: 255, 255, 255;
  --label-d: 230, 232, 232;
  --bg-deep: 15, 17, 17;
  --l4: rgba(var(--label-d), .16);
  --line: rgba(var(--label-d), .08);
  --be: #191b1b;
}

/* ============ Base ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
/* 不启用全局平滑滚动：sticky 隧道段 + 惯性平滑会在解除钉住的衔接处顿挫（卡半屏）；
   锚点跳转改由 JS 单独做平滑（见 home.js initChrome） */
body {
  background: var(--b1);
  color: var(--l1);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .3s ease, color .3s ease;
  overflow-x: hidden;
}
::selection { background: var(--accent); color: #000; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px dotted var(--l1); outline-offset: 2px; }

/* 超宽大写显示字（TikTok Sans wdth 125） */
.display {
  font-weight: 800;
  font-stretch: 125%;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.01em;
}

/* 等宽 UI 文本 */
.mono, .chrome, .hero-note, .hero-intro, .sections-eyebrow,
.tag, .note, .footer-links { font-family: var(--font-mono); }

/* ============ 文字 reveal（默认隐藏，JS 加 .is-in 后按 stagger 淡入上浮） ============ */
html.js .rv {
  opacity: 0;
  transform: translateY(.55em);
  transition: opacity .7s ease, transform .9s var(--ease-out-expo);
}
html.js .is-in .rv { opacity: 1; transform: none; }

/* .scr：字符乱码定格 reveal（仅 ASCII 标签用）。
   不做位移淡入，显隐由 JS 在乱码首帧接管，避免定格前闪出最终文本 */
html.js .rv.scr { transform: none; transition: opacity .2s ease; }
html.js .is-in .rv.scr { opacity: 0; }

/* ============ 载入进度条 ============ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--b1);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .45s cubic-bezier(.25, 1, .5, 1), visibility 0s linear .45s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-track {
  width: 140px; height: 6px; border-radius: 999px;
  background: var(--l3); overflow: hidden;
}
.loader-bar {
  height: 100%; width: 0; border-radius: 999px;
  background: var(--l1);
  transition: width .72s var(--ease-out-expo);
  will-change: width;
}
html:not(.js) .loader { display: none; }

/* ============ 背景点阵 ============ */
.field {
  position: fixed; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* ============ 顶层动效层（掉落元素 + 鼠标尾迹，盖在内容上、header 之下） ============ */
.fx {
  position: fixed; inset: 0; z-index: 40;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}

/* ============ 固定页头 / 页脚栏 ============ */
.chrome {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(.5rem, 1.5vh, 1.25rem) var(--pad-x);
  pointer-events: none;
  font-size: .9375rem;
  text-transform: uppercase;
}
.chrome-row { display: flex; justify-content: space-between; align-items: center; }
.chrome a, .chrome button { pointer-events: auto; }
.chrome-nav { display: flex; gap: .75rem; align-items: center; }
.logo {
  font-family: var(--font-sans);
  font-weight: 800; font-stretch: 125%;
}
.logo-suffix { color: var(--l3); font-weight: 600; }
.chrome-bottom { color: var(--l2); font-size: .8125rem; }
.coords { display: none; }

/* 虚线框 hover（复刻 haoqi 的导航交互） */
.dot-link {
  position: relative; display: inline-block; padding: .5rem;
}
.dot-link::before {
  content: ""; position: absolute; inset: 0;
  border: 2px dotted transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}
@media (hover: hover) {
  .dot-link:hover::before { border-color: var(--l1); }
}
.dot-link:active::before { border-color: var(--l1); }

/* ============ Hero ============ */
.hero {
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--pad-y) var(--pad-x) clamp(3.5rem, 8vh, 5.5rem);
}
.hero-cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .5rem 1rem;
  padding-top: clamp(1.5rem, 4vh, 3rem);
  font-size: .9375rem;
}
.hero-kicker {
  grid-column: 1 / span 3;
  font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  line-height: 1.25;
}
.hero-note { grid-column: 5 / span 3; color: var(--l2); }
.hero-intro { grid-column: 9 / span 4; color: var(--l2); }
.hero-display {
  display: flex; flex-direction: column;
  font-size: min(7.2svw, 7.5rem);
}
.hero-display .rv:nth-child(2) { transition-delay: .07s; }
.hero-display .rv:nth-child(3) { transition-delay: .14s; }

/* ============ 签名 + 陈述 ============ */
.statement {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem 1rem;
  padding: var(--pad-y) var(--pad-x);
}
.sign-cell { grid-column: 1 / span 3; position: relative; }
.sign {
  width: 100%; max-width: 300px;
  overflow: visible;
}
.sign-path {
  stroke: var(--accent);
  fill: none;
  stroke-linecap: round;
  opacity: 0;
}
.sign.is-drawing .sign-path {
  animation:
    sign-show 0s linear var(--path-delay) forwards,
    sign-draw var(--path-dur) cubic-bezier(.65, 0, .35, 1) var(--path-delay) forwards;
}
@keyframes sign-draw { to { stroke-dashoffset: 0; } }
@keyframes sign-show { to { opacity: 1; } }
.statement-body {
  grid-column: 5 / span 8;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.statement-p {
  font-size: clamp(1.375rem, 4.2svw, 4rem);
  line-height: 1.15;
  text-wrap: balance;
}
.statement-p.is-l2 { color: var(--l2); }
.u {
  color: var(--l1);
  text-decoration: underline;
  text-underline-offset: .08em;
  text-decoration-color: var(--l3);
  transition: text-decoration-color .15s ease;
}
@media (hover: hover) { .u:hover { text-decoration-color: var(--l1); } }

/* ============ 分区索引 ============ */
.sections { padding: var(--pad-y) var(--pad-x); }
.sections-eyebrow {
  display: block;
  color: var(--l3); font-size: .8125rem;
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 1.5rem;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3.5rem 1rem;
}
.tile a { display: block; padding: .5rem; position: relative; }
.tile a::before {
  content: ""; position: absolute; inset: 0;
  border: 2px dotted transparent;
  pointer-events: none;
  transition: border-color .2s ease;
}
@media (hover: hover) { .tile a:hover::before { border-color: var(--l1); } }
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--be);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: background-color .3s ease;
}
.tag {
  position: absolute; top: 0; right: 0; z-index: 1;
  background: var(--accent); color: #000;
  font-size: .75rem; text-transform: uppercase;
  padding: 0 .25rem;
}
.glyph {
  font-weight: 900; font-stretch: 125%;
  font-size: 52%;
  line-height: 1;
  color: var(--l4);
  transition: color .3s ease, transform .5s var(--ease-out-expo);
}
.thumb { font-size: min(28vw, 340px); } /* glyph 相对容器缩放的基准 */
@media (hover: hover) {
  .tile a:hover .glyph { color: var(--accent); transform: scale(1.04); }
}
.meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .75rem;
  margin-top: .75rem;
  font-size: .8125rem; text-transform: uppercase;
}
.name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.note { color: var(--l3); white-space: nowrap; flex-shrink: 0; }

/* 错落排布（12 列） */
.t-personal { grid-column: 5 / span 8; }
.t-work     { grid-column: 1 / span 6; }
.t-study    { grid-column: 8 / span 5; }
.t-invest   { grid-column: 3 / span 4; }
.t-personal .thumb { font-size: min(44vw, 560px); }

/* ============ 大字过场（钉住滚动） ============ */
.interlude {
  height: 200vh;
}
.interlude-pin {
  position: sticky; top: 0; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
}
.interlude-lines {
  display: flex; flex-direction: column; align-items: center;
  font-size: min(7.2svw, 8rem);
  text-align: center;
}
.interlude-lines .rv:nth-child(2) { transition-delay: .12s; }
.interlude-lines .rv:nth-child(3) { transition-delay: .24s; }

/* ============ 页脚 ============ */
.footer {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--pad-y) var(--pad-x);
}
.footer-big {
  display: flex; flex-direction: column; gap: .5rem;
  font-size: min(7.2svw, 7.5rem);
}
.fb-row {
  display: flex; justify-content: space-between;
  width: min(100%, 18ch);
  margin: 0 auto;
}
.fb-row .fb-right:only-child { margin-left: auto; }
.footer-big .rv:nth-child(2) { transition-delay: .07s; }
.footer-links {
  position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 6vh, 4rem);
  padding: 0 var(--pad-x);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  font-size: .8125rem; text-transform: uppercase;
}
.footer-links-group { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ============ 响应式 ============ */
@media (max-width: 1023px) {
  .chrome-nav a[href="#sections"] { display: none; }
  .hero-kicker { grid-column: 1 / span 12; }
  .hero-note { grid-column: 1 / span 12; }
  .hero-intro { grid-column: 1 / span 12; }
  .hero-display { font-size: 9svw; }
  .sign-cell { grid-column: 1 / span 6; }
  .statement-body { grid-column: 1 / span 12; }
  .statement-p { font-size: clamp(1.375rem, 5.6svw, 3rem); }
  .t-personal { grid-column: 1 / span 12; }
  .t-work     { grid-column: 1 / span 12; }
  .t-study    { grid-column: 1 / span 6; }
  .t-invest   { grid-column: 7 / span 6; }
  .t-personal .thumb, .thumb { font-size: min(38vw, 420px); }
  .interlude-lines { font-size: 11svw; }
  .footer-big { font-size: 10.5svw; }
  .footer-links { flex-direction: column; align-items: flex-start; gap: .25rem; }
}

/* ============ 减动效 ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .rv { opacity: 1; transform: none; transition: none; }
  .sign-path, .sign.is-drawing .sign-path {
    animation: none; opacity: 1; stroke-dashoffset: 0 !important;
  }
  .loader { display: none; }
  .interlude { height: auto; min-height: 90vh; }
  .interlude-pin { position: static; height: auto; }
}