/* =========================================================
   td-worlds 样式表
   token 唯一来源：personal-brand.md §4.1 + docs/design.md §3
   环境氛围参数：全量对齐 ppt/styles/xia（G19 定版 v11，方案 E mock 调优值）
   纪律：色值 / 字号 / 间距不得偏离图纸；间距只用 --sp-* 梯度
   ========================================================= */

:root {
  /* 视觉 token（design.md §3） */
  --bg-paper: linear-gradient(175deg, #f8f4eb 0%, #f0eadb 100%);
  --ink-1: #1c1917;
  --ink-2: #57534e;
  --ink-3: #8c8271;
  --cinnabar: #b91c1c;
  --moon: linear-gradient(160deg, #dcebf5 0%, #c3d6e4 100%);
  --paper-card: #fffdf8; /* 衍生 token，2026-09-12 随图纸过目认可 */

  /* 字体栈（design.md §4） */
  --font-title: "Songti SC", "STSong", SimSun, "Noto Serif SC", serif;
  --font-body: "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC", sans-serif;

  /* 字号四级（design.md §4） */
  --fs-xl: clamp(26px, 5.5vw, 72px); /* 首屏大字 */
  --fs-h2: 32px;                     /* 板块标题 */
  --fs-l: 24px;                      /* 卡片标题、小节标题 */
  --fs-m: 17px;                      /* 正文 */
  --fs-s: 14px;                      /* 注释、页脚 */

  /* 间距 8 倍数（design.md §4，禁止魔法数字） */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --sp-32: 128px;

  /* 版心（design.md §4） */
  --w-text: 720px;
  --w-wide: 1080px;

  /* 装饰缩放：min(宽/1280, 高/720)，main.js decorFit 写入精确值；
     此为无 JS 兜底（移动端 0.35，桌面 1） */
  --xia-s: 1;
}

@media (max-width: 767px) {
  :root { --xia-s: 0.35; }
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory; /* 一滚一页（对齐 stormzhang.ai 同款原生实现） */
}

body {
  background: var(--bg-paper);
  color: var(--ink-2);
  font-family: var(--font-body);
  font-size: var(--fs-m);
  line-height: 1.9;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }

a { color: var(--cinnabar); text-decoration: none; }

/* ===== 导航 ===== */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-6);
  background: rgba(248, 244, 235, 0.72); /* 宣纸底 #f8f4eb 同值加透明 */
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(140, 130, 113, 0.2); /* 墨三 20% */
}

.nav__brand {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: var(--fs-m);
  color: var(--ink-1);
}

.nav__links a {
  margin-left: var(--sp-6);
  font-size: var(--fs-s);
  color: var(--ink-2);
}

.nav__links a:hover { color: var(--cinnabar); }

/* ===== 进度点：当前页朱砂实心，其余墨三 45%，点击跳页（≤767 隐藏） ===== */

.dots {
  position: fixed;
  left: var(--sp-6);
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.dots__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(140, 130, 113, 0.45); /* 墨三 45% */
}

.dots__dot:hover { background: rgba(185, 28, 28, 0.4); }

.dots__dot.is-active { background: var(--cinnabar); }

/* ===== 主内容：推挤在固定氛围层之上（转场语义：背景不动，只动内容） ===== */

main,
.footer {
  position: relative;
  z-index: 1;
}

/* ===== 首屏（design.md §5） ===== */

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--sp-24) var(--sp-6);
}

/* 切页：每个板块 = 一页（原生 scroll-snap，滚轮一格必停一页） */

#hero,
#about,
#works,
#contact {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}

.hero__logo { height: 240px; width: auto; }

.hero__slogan {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: var(--fs-xl);
  line-height: 1.5;
  color: var(--ink-1);
}

.hero__identity {
  font-size: var(--fs-m);
  color: var(--ink-2);
}

.hero__arrow { padding: var(--sp-2); }

/* 404 回链（404.html 专用） */
.notfound__home {
  font-size: var(--fs-m);
  color: var(--cinnabar);
  border-bottom: 1px solid rgba(185, 28, 28, 0.4);
  padding-bottom: var(--sp-1);
}

.hero__arrow-chevron {
  display: block;
  width: 16px;
  height: 16px;
  border-right: 2px solid var(--cinnabar);
  border-bottom: 2px solid var(--cinnabar);
  transform: rotate(45deg);
}

/* ===== 环境氛围层（参数全量对齐 ppt/styles/xia G19 定版 v11）
   fixed 全站视口锚定——背景（纸纹/墨晕/月/山/祥云/涟漪）不动，内容推挤其上；
   层序：env(z0) < 花瓣(z0) < 正文(z1) < 导航(z10) ===== */

.env {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* 纸纹：fractalNoise 0.55 SVG tile，multiply 低透明（宣纸质感） */
.env__grain {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 300px 300px;
}

/* 圆月：520px 水彩月（三 stop，圆心偏 42%/40%），锚视口右上出血 + 90px 月光 */
.env__moon {
  position: absolute;
  top: calc(-190px * var(--xia-s));
  right: calc(43.2px * var(--xia-s));
  width: calc(520px * var(--xia-s));
  height: calc(520px * var(--xia-s));
  border-radius: 50%;
  background: radial-gradient(circle at 42% 40%, #dcebf5 0%, #cfdeea 45%, #c3d6e4 100%);
  box-shadow: 0 0 90px rgba(190, 214, 228, 0.75);
}

/* 月晕：月缘外 26px 细环，脉动扩散 */
.env__moon::after {
  content: '';
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1px solid rgba(147, 170, 192, 0.4);
}

/* 墨晕两团：墨（左下出血）+ 朱砂 6%（右下），blur 42px 极缓漂移 */
.env__bloom {
  position: absolute;
  border-radius: 50%;
  filter: blur(42px);
}

.env__bloom--a {
  left: calc(-140px * var(--xia-s));
  bottom: calc(-160px * var(--xia-s));
  width: calc(500px * var(--xia-s));
  height: calc(380px * var(--xia-s));
  background: radial-gradient(circle, rgba(28, 25, 23, 0.1), rgba(28, 25, 23, 0.035) 55%, transparent 72%);
}

.env__bloom--b {
  right: 4%;
  bottom: 4%;
  width: calc(280px * var(--xia-s));
  height: calc(240px * var(--xia-s));
  background: radial-gradient(circle, rgba(185, 28, 28, 0.06), transparent 70%);
}

/* 远山三层：tile SVG 山脊（墨 4% / 6.5% / 10%）平铺，
   400s 线性无缝视差横移（各层一周期恰移一个 tile 宽，速度天然分层） */
.env__hills {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(220px * var(--xia-s));
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 220' preserveAspectRatio='none'%3E%3Cpath d='M0 220 L0 150 Q150 110 300 140 Q450 168 600 120 Q750 76 900 118 Q1050 158 1200 128 Q1350 96 1500 130 Q1650 162 1800 138 Q1900 124 2000 150 L2000 220 Z' fill='rgba(28,25,23,0.04)'/%3E%3C/svg%3E") 0 100% / calc(2000px * var(--xia-s)) 100% repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2200 180' preserveAspectRatio='none'%3E%3Cpath d='M0 180 L0 120 Q180 70 360 104 Q540 136 720 92 Q900 50 1080 96 Q1260 140 1440 104 Q1620 70 1800 108 Q1980 142 2200 120 L2200 180 Z' fill='rgba(28,25,23,0.065)'/%3E%3C/svg%3E") 0 100% / calc(2200px * var(--xia-s)) 100% repeat-x,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1800 130' preserveAspectRatio='none'%3E%3Cpath d='M0 130 L0 92 Q220 56 440 84 Q660 110 880 70 Q1100 34 1320 76 Q1540 112 1800 92 L1800 130 Z' fill='rgba(28,25,23,0.1)'/%3E%3C/svg%3E") 0 100% / calc(1800px * var(--xia-s)) 100% repeat-x;
}

/* 祥云两朵：线描描画 + 极缓漂移（恒动层） */
.env__cloud { position: absolute; opacity: 0.85; }

.env__cloud svg { stroke: rgba(28, 25, 23, 0.48); fill: none; stroke-width: 1.4; }

.env__cloud path { stroke-dasharray: 100; }

.env__cloud--a { left: 6%; top: 18%; }
.env__cloud--b { right: -120px; top: 44%; opacity: 0.7; }

/* 墨滴涟漪：两位点事件层（扩散约 2s 后归于静），坐标避让文字区 */
.env__drop {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(28, 25, 23, 0.28);
}

.env__drop--a { left: 21%; top: 72%; }
.env__drop--b { left: 62%; top: 26%; }

.env__drop::before,
.env__drop::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px solid rgba(28, 25, 23, 0.26);
  opacity: 0;
}

/* 落红花瓣画布（渲染逻辑见 assets/js/main.js），fixed 全视口（PPT 同款） */
.petals {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ===== 板块（design.md §4 / §5）：一页一屏，内容垂直居中 ===== */

.section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding: var(--sp-32) var(--sp-6);
}

.section__inner { width: 100%; max-width: var(--w-text); margin: 0 auto; }

.section__inner--wide { max-width: var(--w-wide); }

.section__title {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: var(--fs-h2);
  color: var(--ink-1);
  text-align: center;
  margin-bottom: var(--sp-12);
}

/* 关于我：狂句开篇 + 造 / 看两界 + 落款（bio.md 段落版全录） */

.about__lead {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: var(--fs-l);
  line-height: 1.8;
  color: var(--ink-1);
  margin-bottom: var(--sp-8);
}

.about__p { margin-bottom: var(--sp-6); }

.about__motto {
  color: var(--cinnabar); /* 内容线口号，朱砂唯一强调 */
  margin-bottom: var(--sp-6);
}

.about__sign {
  font-size: var(--fs-s);
  color: var(--ink-3);
  text-align: right;
  margin-top: var(--sp-8);
}

/* 作品集三栏：宣纸白卡 + 墨三描边 + 圆角 8px；占位弱化（墨三、无链接） */

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.card {
  background: var(--paper-card);
  border: 1px solid rgba(140, 130, 113, 0.2); /* 墨三 20% */
  border-radius: 8px;
  padding: var(--sp-8);
  min-height: var(--sp-24);
}

.card__title {
  font-family: var(--font-title);
  font-weight: 900;
  font-size: var(--fs-l);
  color: var(--ink-1);
  margin-bottom: var(--sp-4);
}

.card__pending {
  font-size: var(--fs-s);
  color: var(--ink-3);
}

/* 页脚：闲章落款 + slogan + ©（图纸 §5）；作为末页吸附点（对齐文档底部） */

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: var(--sp-16) var(--sp-6) var(--sp-12);
  border-top: 1px solid rgba(140, 130, 113, 0.2);
  scroll-snap-align: end;
}

.footer__seal { height: 64px; width: auto; margin: 0 auto var(--sp-4); }

.footer__slogan,
.footer__copy {
  font-size: var(--fs-s);
  color: var(--ink-3);
}

.footer__copy { margin-top: var(--sp-2); }

/* ===== 动效（design.md §6；reduced-motion 全禁，花瓣呈静态一帧） ===== */

@media (prefers-reduced-motion: no-preference) {
  /* 首屏入场编排（墨迹晕开）：LOGO → slogan 逐字（delay 由 main.js 按字序写入）→ 身份 → 箭头；
     无 JS 时不加 .is-intro，直接呈现终态 */
  .is-intro .hero__logo { animation: ink-in 1.2s ease both; }
  .is-intro .hero__slogan .ch { opacity: 0; animation: ink-in 0.7s ease forwards; }
  .is-intro .hero__identity { opacity: 0; animation: ink-in 0.9s ease 1.6s forwards; }
  .is-intro .hero__arrow { opacity: 0; animation: ink-in 0.9s ease 1.95s forwards; }

  /* 切页转场（转场语义：背景不动，内容晕开进页）：
     data-reveal 元素由 main.js 加 .reveal 并观察，首次入视口加 .is-revealed；
     无 JS / reduced-motion 不加类，直接呈现终态 */
  .reveal:not(.is-revealed) { opacity: 0; }
  .section__inner.reveal.is-revealed { animation: ink-in 0.9s ease both; }
  .works__grid.is-revealed .card { animation: ink-in 0.8s ease both; }
  .works__grid.is-revealed .card:nth-child(2) { animation-delay: 90ms; }
  .works__grid.is-revealed .card:nth-child(3) { animation-delay: 180ms; }

  /* 闲章盖印（design.md §6-2）：首次入视口 0.3s 缩放 1.06→1 + 淡入，一次性 */
  .reveal-seal:not(.is-stamped) { opacity: 0; }
  .reveal-seal.is-stamped { animation: seal-stamp 0.35s ease-in both; }

  /* 氛围层：月呼吸 + 月晕脉动 */
  .env__moon { animation: moon-breathe 12s ease-in-out infinite alternate; }
  .env__moon::after { animation: moon-halo 9s ease-out infinite; }

  /* 氛围层：墨晕漂移（同一 keyframe，b 团反向） */
  .env__bloom--a { animation: bloom-drift 46s ease-in-out infinite alternate; }
  .env__bloom--b { animation: bloom-drift 40s ease-in-out infinite alternate-reverse; }

  /* 氛围层：远山无缝视差 */
  .env__hills { animation: hills-parallax 400s linear infinite; }

  /* 氛围层：祥云描画 + 漂移 */
  .env__cloud { animation: cloud-drift 100s linear infinite; }
  .env__cloud--b { animation: cloud-drift 130s linear infinite reverse; }
  .env__cloud path { animation: cloud-ink 14s ease-in-out infinite; }
  .env__cloud--b path:nth-child(2) { animation-delay: -5s; }

  /* 氛围层：墨滴涟漪（b 点 13s/4s 错峰，a 点 ::after 延后半程） */
  .env__drop::before { animation: drop-ripple 9s ease-out infinite; }
  .env__drop::after { animation: drop-ripple 9s ease-out infinite; animation-delay: 4.5s; }
  .env__drop--b::before,
  .env__drop--b::after { animation-duration: 13s; animation-delay: 4s; }
}

/* 卡片 hover（design.md §6-3）：仅悬停设备（触屏不粘 hover）+ 非减弱动态 */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card { transition: transform 0.2s ease, border-color 0.2s ease; }
  .card:hover { border-color: rgba(185, 28, 28, 0.4); transform: translateY(-2px); }
}

/* reduced-motion：平滑滚动一并关闭（吸附跳转变瞬时，无动画） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@keyframes ink-in {
  from { opacity: 0; filter: blur(9px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0); transform: none; }
}

@keyframes seal-stamp {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes moon-breathe {
  from { transform: scale(1);    opacity: 0.92; }
  to   { transform: scale(1.035); opacity: 1; }
}

@keyframes moon-halo {
  from { transform: scale(0.96); opacity: 0.7; }
  to   { transform: scale(1.08); opacity: 0; }
}

@keyframes bloom-drift { to { transform: translate(150px, -60px) scale(1.14); } }

@keyframes hills-parallax {
  from { background-position: 0 100%, 0 100%, 0 100%; }
  to   { background-position: calc(-2000px * var(--xia-s)) 100%, calc(-2200px * var(--xia-s)) 100%, calc(-1800px * var(--xia-s)) 100%; }
}

@keyframes cloud-drift {
  from { transform: translateX(-60px); }
  to   { transform: translateX(180px); }
}

@keyframes cloud-ink {
  0%         { stroke-dashoffset: 100; opacity: 0; }
  10%        { stroke-dashoffset: 100; opacity: 1; }
  42%, 88%   { stroke-dashoffset: 0;   opacity: 1; }
  96%, 100%  { stroke-dashoffset: 0;   opacity: 0; }
}

@keyframes drop-ripple {
  from { width: 5px;   height: 5px;   margin: -2.5px 0 0 -2.5px;   opacity: 0.75; }
  to   { width: 220px; height: 220px; margin: -110px 0 0 -110px; opacity: 0; }
}

/* ===== 断点（design.md §7） ===== */

@media (max-width: 1023px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  /* 移动端降级：关闭逐页吸附，自由滚动（对齐 stormzhang.ai 降级策略） */
  html { scroll-snap-type: none; }
  #hero, #about, #works, #contact { scroll-snap-align: none; scroll-snap-stop: normal; }
  .section { min-height: auto; }
  .footer { scroll-snap-align: none; }
  .works__grid { grid-template-columns: 1fr; }
  .hero__logo { height: 160px; }
  .nav__links a { margin-left: var(--sp-4); }
  .dots { display: none; }
}