/* ============================================================
   《划亮》 kesixu.com — 设计宪法见 ../AGENTS.md
   世界观：一间黑屋子，唯一光源是访客划亮的火柴。
   基线（无 JS / reduced-motion / JS 异常）：整页静态、完整可读；
   无 JS 时灯保持暗色可读，JS 基线路径会补 .lit 点亮。
   .fx 作用域：仅在 JS + 允许动效时才进入"待点亮"态。
   ============================================================ */

:root {
  --ink:   #0d0b09;
  --ember: #b33a1e;
  --flame: #ff6b35;
  --amber: #ffa94d;
  --gold:  #ffd28a;
  --paper: #f2ece1;
  --smoke: #8a8378;
  --smoke-dim: #6f695f;
  --char:  #2a2019;            /* 未点燃的引信/物件色 */
  --gutter: clamp(24px, 7vw, 52px);
  --display: "LXGW WenKai", "Noto Serif SC", "Songti SC", serif;
  --echo-font: "EB Garamond", Georgia, "Times New Roman", serif;
  --body-font: "Segoe UI", -apple-system, "Helvetica Neue",
               "PingFang SC", "HarmonyOS Sans SC", "MiSans",
               "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

@font-face {
  font-family: "LXGW WenKai";
  src: url("/fonts/wenkai-subset.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/garamond-italic-subset.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--ink);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  background:
    radial-gradient(120% 90% at 50% 0%, #14100c 0%, var(--ink) 55%),
    var(--ink);
  color: var(--paper);
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.9;
  overflow-x: hidden;
}

/* 2% 级微噪点：打散近黑渐变与大半径辉光的 8-bit 色带（自托管 data URI，零请求） */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  opacity: .03;
  mix-blend-mode: overlay;
  background: url("data:image/png;base64,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") repeat;
}

::selection { background: rgba(255, 169, 77, .28); color: var(--paper); }

a { color: inherit; text-decoration: none; }
a:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 4px;
  border-radius: 2px;
}

/* 中文小注：雅文在上，小注在下（或作诗余小字）。Garamond 只留给人名 .latin */
.echo {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  color: var(--smoke);
  letter-spacing: .18em;
}

/* ------------------------------------------------------------
   章零 + 章一 · hero
   ------------------------------------------------------------ */

#hero {
  position: relative;
  height: 100vh;   /* svh 兜底：老内核丢弃 svh 时不至于塌成 0 高 */
  height: 100svh;
  overflow: hidden;
}

#flame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.whisper {
  position: absolute;
  top: 18vh;
  top: 18svh;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(19px, 5vw, 26px);
  letter-spacing: .22em;
  color: var(--smoke);
}
.whisper .echo { margin-top: 1em; font-size: .6em; letter-spacing: .34em; text-indent: .34em; }

.hero-name {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: 0 24px;
}

.hero-name h1 {
  writing-mode: vertical-rl;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(92px, 23vw, 176px);
  line-height: 1.06;
  letter-spacing: .1em;
  color: var(--paper);
  text-shadow:
    0 0 24px rgba(255, 169, 77, .38),
    0 0 90px rgba(255, 107, 53, .18);
}

/* 横屏矮视口：竖排列装不下会折列倒序（斯可徐），改横排是叙事成立的降级 */
@media (orientation: landscape) and (max-height: 500px) {
  .hero-name h1 {
    writing-mode: horizontal-tb;
    font-size: clamp(48px, 16vh, 92px);
    letter-spacing: .14em;
  }
  .hero-name { gap: 10px; }
}

.hero-name .latin {
  font-family: var(--echo-font);
  font-style: italic;
  font-size: clamp(17px, 4.4vw, 22px);
  letter-spacing: .34em;
  text-indent: .34em;      /* 视觉居中补偿 */
  color: var(--amber);
}

.hero-name .tagline {
  font-family: var(--display);
  font-size: clamp(15px, 4vw, 18px);
  letter-spacing: .08em;
  line-height: 2.1;
  color: var(--smoke);
  max-width: 30em;
}

.hero-name .echo { font-size: clamp(12px, 3.2vw, 14px); }

.scroll-hint {
  position: absolute;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--smoke);
  text-align: center;
}
.scroll-hint::before {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 0 auto 14px;
  background: linear-gradient(to bottom, transparent, var(--amber));
}

/* ------------------------------------------------------------
   引信（贯穿 #story 的光线）
   ------------------------------------------------------------ */

#story {
  position: relative;
  max-width: 780px;
  margin-inline: auto;
  padding: 4vh 22px 10vh calc(var(--gutter) + 26px);
}

#fuse {
  position: absolute;
  /* 向上多出 90px：起笔藏进上一幕，线像"从 hero 烧下来" */
  top: -90px;
  left: 0;
  width: calc(var(--gutter) + 20px);
  height: calc(100% + 90px);
  overflow: visible;
  pointer-events: none;
}
#fuseBase { stroke: var(--char); stroke-width: 1.5; }
#fuseLit  { stroke-width: 1.5; filter: drop-shadow(0 0 6px rgba(255, 169, 77, .65)); }

#fuseHead {
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow:
    0 0 10px 3px rgba(255, 210, 138, .9),
    0 0 34px 12px rgba(255, 107, 53, .35);
  pointer-events: none;
  opacity: 0;
}

/* ------------------------------------------------------------
   章二 · 自述
   ------------------------------------------------------------ */

.chapter { position: relative; }

#about { padding: 16vh 0 10vh; }

#about .line {
  font-family: var(--display);
  font-size: clamp(20px, 5.8vw, 36px);
  text-wrap: balance;
  font-weight: 500;
  line-height: 1.85;
  letter-spacing: .04em;
  color: var(--paper);
  margin-bottom: 11vh;
}

#about .line.strong { color: var(--gold); }

#about .echo { font-size: clamp(14px, 3.6vw, 17px); margin-top: -6vh; }

/* ------------------------------------------------------------
   章三 · 七盏灯
   ------------------------------------------------------------ */

#lamps { padding: 8vh 0 6vh; }

#lamps h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px, 9vw, 54px);
  letter-spacing: .14em;
  color: var(--paper);
}

.chapter-sub {
  font-family: var(--display);
  font-size: clamp(15px, 4vw, 18px);
  color: var(--smoke);
  letter-spacing: .1em;
  margin: 3.5vh 0 4vh;
}

/* ── 三盏主灯 ── */
.hero-lamps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3vw, 24px);
  margin-bottom: 6vh;
}

@media (min-width: 600px) {
  .hero-lamps {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.hero-lamp {
  position: relative;
  display: block;
  padding: 3.5vh 0 3.5vh clamp(18px, 4vw, 28px);
  border: 1px solid rgba(255, 169, 77, .18);
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color .6s ease, background .6s ease;
}
.hero-lamp:hover,
.hero-lamp:focus-visible {
  border-color: var(--amber);
  background: rgba(255, 169, 77, .06);
}
.hero-lamp:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.hero-dot {
  position: absolute;
  left: -10px;
  top: calc(3.5vh + 1em);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--char);
  transition: background 1s ease, box-shadow 1.2s ease;
}
.hero-lamp.lit .hero-dot {
  background: var(--gold);
  box-shadow:
    0 0 8px 2px rgba(255, 210, 138, .85),
    0 0 26px 9px rgba(255, 107, 53, .3);
}

.hero-lamp h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 7vw, 34px);
  color: var(--paper);
  margin: 0 0 .6em;
}

.hero-lamp h3 .ext {
  font-family: var(--body-font);
  font-size: .6em;
  color: var(--amber);
  margin-left: .3em;
  vertical-align: super;
}
.hero-lamp:hover h3 .ext { color: var(--gold); }

.hero-lamp .lamp-desc {
  font-family: var(--body-font);
  font-size: clamp(14px, 3.8vw, 16px);
  color: var(--smoke);
  line-height: 1.65;
}

/* ── 其余灯火 ── */
.rest-label {
  font-family: var(--display);
  font-size: clamp(13px, 3.4vw, 15px);
  color: var(--smoke-dim);
  letter-spacing: .15em;
  margin-bottom: 2.5vh;
}

.rest-lamps {
  list-style: none;
  padding: 0;
}
.rest-lamps li {
  font-size: clamp(13px, 3.2vw, 14.5px);
  color: var(--smoke);
  line-height: 1.9;
}
.rest-lamps li strong {
  font-family: var(--display);
  font-weight: 500;
  color: var(--paper);
  margin-right: .4em;
}
.rest-lamps a {
  color: var(--amber);
  text-decoration: none;
}
.rest-lamps a:hover { text-decoration: underline; }

/* ── 手机堆叠 ── */
@media (max-width: 540px) {
  .hero-lamps { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   章四 · 星图
   ------------------------------------------------------------ */

#sky {
  min-height: 120vh;
  min-height: 120svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6vh;
  padding: 14vh 24px;
  text-align: center;
  overflow: hidden;
}

#dipper {
  width: min(86vw, 560px);
  height: auto;
}

#dipperLines line {
  stroke: #8a7a5e;
  stroke-width: .6;
  opacity: .4;
}

#dipperStars circle {
  fill: var(--gold);
}
#dipperStars .star text {
  font-family: var(--display);
  font-size: 12px;
  fill: var(--smoke);
  letter-spacing: .08em;
}
#dipperStars .bright circle {
  filter: drop-shadow(0 0 4px rgba(255, 210, 138, .9));
}
#dipperStars .flare {
  stroke: var(--gold);
  stroke-width: .5;
  opacity: .55;
}

#skyField circle { fill: var(--paper); }

.sky-line {
  font-family: var(--display);
  font-size: clamp(22px, 6vw, 34px);
  letter-spacing: .08em;
  color: var(--paper);
  text-wrap: balance;
}

#sky .echo { font-size: clamp(13px, 3.4vw, 16px); margin-top: -3vh; letter-spacing: .4em; text-indent: .4em; }

#ember .echo { font-size: clamp(13px, 3.5vw, 15px); letter-spacing: .22em; }

/* ------------------------------------------------------------
   章五 · 灯留着
   ------------------------------------------------------------ */

#ember {
  min-height: 92vh;
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4.5vh;
  text-align: center;
  padding: 10vh 24px calc(8vh + env(safe-area-inset-bottom));
}

.ember-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px 3px rgba(255, 210, 138, .8);
}
/* 呼吸光晕走伪元素，只动 opacity/transform（宪法纪律） */
.ember-dot::after {
  content: "";
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
              rgba(255, 210, 138, .38),
              rgba(255, 107, 53, .14) 55%, transparent);
  opacity: .7;
}

.keep {
  font-family: var(--display);
  font-size: clamp(26px, 7vw, 40px);
  letter-spacing: .1em;
  color: var(--paper);
}

.reach {
  display: flex;
  flex-direction: column;
  gap: 2.2vh;
  font-size: 15.5px;
  letter-spacing: .12em;
}
.reach a {
  color: var(--amber);
  border-bottom: 1px solid rgba(255, 169, 77, .35);
  padding-bottom: 3px;
  transition: color .4s ease, border-color .4s ease;
}
.reach a:hover { color: var(--gold); border-color: rgba(255, 210, 138, .7); }
.reach .mail i { font-style: normal; opacity: .75; }

.fine {
  font-size: 12.5px;
  line-height: 2.2;
  color: var(--smoke);
  letter-spacing: .1em;
}

.copyright {
  font-size: 12.5px;
  color: var(--smoke);
  letter-spacing: .1em;
  margin-top: -1vh;
}

/* ------------------------------------------------------------
   动效作用域 .fx —— 仅 JS + 允许动效时进入"待点亮"态。
   所有初始隐藏只允许写在这里；基线永远完整可读。
   ------------------------------------------------------------ */

.fx #heroName { opacity: 0; }
.fx #about .line,
.fx #about .echo { opacity: 0; transform: translateY(28px); }
.fx #lamps h2,
.fx .chapter-sub { opacity: 0; transform: translateY(24px); }
.fx .hero-lamp,
.fx .rest-label,
.fx .rest-lamps li { opacity: 0; transform: translateY(30px); }
.fx .sky-line,
.fx #sky .echo { opacity: 0; }
.fx #dipperStars .star { opacity: 0; }
.fx #dipperLines line { opacity: 0; }
.fx #ember > * { opacity: 0; transform: translateY(20px); }
.fx #fuseHead { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* 呼吸放在内层 span：外层透明度归 GSAP 管，两者相乘互不打架 */
  .scroll-hint span { display: inline-block; animation: hint-pulse 2.8s ease-in-out infinite; }
  .ember-dot::after { animation: ember-breathe 4.4s ease-in-out infinite; }
  .hero-lamp.lit .hero-dot::after { animation: dot-spark 1.1s ease-out 1; }
  @keyframes dot-spark {
    0%   { opacity: .95; transform: scale(.4); }
    100% { opacity: 0;   transform: scale(2.8); }
  }
  @keyframes hint-pulse {
    0%, 100% { opacity: .55; transform: translateY(0); }
    50%      { opacity: 1;   transform: translateY(6px); }
  }
  @keyframes ember-breathe {
    0%, 100% { opacity: .5; transform: scale(.88); }
    50%      { opacity: 1;  transform: scale(1.12); }
  }
}

/* 打印：给一个体面的静态版本 */
@media print {
  body { background: #fff; color: #111; }
  #flame, #fuse, #fuseHead, .scroll-hint { display: none; }
}

/* ── 主灯 Logo ── */
.hero-logo {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  margin-bottom: .6em;
  filter: grayscale(30%) brightness(.9);
  transition: filter .6s ease;
}
.hero-lamp:hover .hero-logo,
.hero-lamp:focus-visible .hero-logo {
  filter: grayscale(0%) brightness(1.1);
}

/* ── 向下箭头 ── */
.scroll-arrow {
  position: absolute;
  bottom: clamp(30px, 7vh, 50px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--amber);
  font-size: clamp(18px, 4vw, 24px);
  animation: arrow-bounce 1.6s ease-in-out infinite;
  opacity: .7;
}
@keyframes arrow-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(8px); }
}
.reduced .scroll-arrow { animation: none; }