/* =========================================================
   方案③ 视觉规范 · 作品集设计系统 (Next.js)
   粉底 + 灰粉行动色 + 酒红亮点 ｜ 浅/深双模式 ｜ 全对比度过 WCAG AA
   ========================================================= */

:root {                      /* 浅色 */
  --bg: #FBF6F7;            /* 页面底色：粉白（方案③ spec） */
  --bg-soft: #F4ECF0;       /* 区块交替底 */
  --surface: #FFF9FB;        /* 卡片 / 表面 */
  --surface-2: #F4ECF0;      /* 标签 / 淡底 */
  --text: #5A474E;           /* 正文：柔暖墨 */
  --text-soft: #796771;      /* 次要文字 */
  --text-mute: #9C8890;      /* 极次要文字 */
  --border: #F1DEE4;         /* 描边 / 分割线（装饰） */
  --border-strong: #E7CED8;

  /* —— 角色变量（方案③ 合规分配：酒红只做亮点） —— */
  --c-title: var(--text);        /* 大标题：柔暖墨 */
  --c-slash: var(--action);      /* 斜杠：灰粉装饰 */
  --c-head: var(--text-soft);    /* 小标题文字：次要墨（AA 4.92） */
  --c-cta: var(--text);          /* 底部大字：柔暖墨 */
  --c-btn-hover: #9C637D;        /* 主按钮 hover：柔雾玫瑰 */
  --c-pill-fg: var(--text);      /* 药丸文字：柔暖墨 */
  --c-pill-dot: var(--action);   /* 药丸点：灰粉 */
  --c-link: var(--wine);         /* 链接：酒红 */
  --c-metric: var(--wine);       /* 量化数据：酒红亮点 */
  --dark-bg: #1E1519;            /* section 级深色底 */
  --dark-text: #F3E7EA;          /* section 级深色文字 */
  /* CONTACT 底色：近黑 → 柔暖墨，172° 近纵向渐变（v3.8.3 过渡柔化）
     · 前 33% 纯近黑；33%→69% 过渡（区间 36%），按 smoothstep 铺 5 个缓动色标——
       深色端缓起步、中段匀速、墨色端缓收尾，中段不再出现突兀亮带
     · 69% 这个到位点是算出来的：172° 下底边最左端落在渐变轴 69.8%，墨色必须在它之前到位，
       底边才处处等于页脚 --foot-bg、接缝零色差
     · 想调深浅改第二个 #1E1519 的 20%（更深上调、更墨下调），其余色标按同一比例平移即可 */
  --contact-bg: linear-gradient(172deg,
    #1E1519 0%, #1E1519 20%,
    #22181C 27.4%, #2F2328 37.2%, #3C2E33 44.5%, #4D3C43 54.3%, #56444B 61.7%,
    #5A474E 69%);
  --contact-link: #EE7E92;       /* 邮箱色：v-grad 酒红 #E0657E 提亮一档。偏墨档下过渡提前，邮箱落点底色变浅，
                                  原酒红只有 3.70:1 不达 AA；提亮后 4.69:1 过 AA，肉眼几乎无差别 */

  --action: #B98AA0;         /* 行动色：灰粉 */
  --action-ink: #FFFFFF;     /* 行动色实底上的文字 */
  --wine: #7B2D3A;           /* 亮点色：酒红（高亮词 / 关键数据 / 链接 hover） */
  --btn-hover: #9C637D;      /* 主按钮 hover 实色翻转（柔雾玫瑰） */
  --btn-hover-mist: var(--btn-hover); /* 别名，跟随主值 */
  --foot-bg: #5A474E;        /* 页脚：柔暖墨 */
  --foot-line: #6E5A61;      /* 页脚顶部分界线：比 --foot-bg 亮一档（用户选定 ② 实色线） */

  --accent: #B98AA0;         /* 别名：行动色（灰粉） */
  --accent-2: #7B2D3A;       /* 别名：酒红 */
  --accent-soft: color-mix(in srgb, #B98AA0 22%, transparent);
  --accent-grad: linear-gradient(120deg, #B98AA0 0%, #7B2D3A 100%);
  --accent-grad-soft: linear-gradient(120deg, rgba(185,138,160,.16), rgba(123,45,58,.16));

  --shadow-sm: 0 6px 22px rgba(120,80,100,.10);
  --shadow-md: 0 14px 38px rgba(120,80,100,.14);
  --shadow-lg: 0 26px 64px rgba(120,80,100,.18);

  --r-sm: 10px;              /* 按钮圆角（规范 radius-btn:10px） */
  --r: 16px;                 /* 卡片圆角（规范 radius-card:14–16px） */
  --r-lg: 16px;
  --r-xl: 22px;

  /* —— 背景呼吸光斑（v3.11 方案②「底色呼吸」）——
     三团光全部取自本规范色板，不引入色板外的颜色（规范：调色板不分裂）。
     每个 rgba 的 alpha 是按「峰值色差 ≈10/255」反推的：色本身越深，alpha 给得越低，
     这样三团光的视觉重量一致，不会出现某一团特别显眼。 */
  --au1: rgba(185,138,160,.37);   /* 行动色 灰粉 #B98AA0 */
  --au2: rgba(156,99,125,.27);    /* 主按钮 hover 轻雾玫瑰 #9C637D */
  --au3: rgba(241,222,228,.95);   /* 描边粉 #F1DEE4（最淡，只贡献暖调） */
  --au-op: .25;                   /* 总强度：叠在背景上约 5–6% 色差（v3.11.1 用户反馈偏淡，上调一档） */
  --au-noise: .075;               /* 去条带抖动噪点强度（强度上调后同步加强，压住色带） */

  --maxw: 1140px;
  --nav-h: 68px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

[data-theme='dark'] {        /* 深色 */
  --bg: #1E1519;
  --bg-soft: #241A1F;
  --surface: #271C21;
  --surface-2: #322530;
  --text: #F3E7EA;
  --text-soft: #B49CA4;
  --text-mute: #8E7882;
  --border: #3A2B32;
  --border-strong: #4A3942;

  --dark-bg: #160E12;            /* 深色模式下深色区再压深一档 */
  --dark-text: #F3E7EA;
  --contact-bg: linear-gradient(172deg,
    #160E12 0%, #160E12 20%,
    #1A1116 27.4%, #291E23 37.2%, #382B30 44.5%, #4B3B41 54.3%, #56444A 61.7%,
    #5A474E 69%);
  --contact-link: #EE7E92;   /* 同浅色：深色模式底色更黑，对比度更高 */

  /* 呼吸光斑（深色取同一角色的深色档：行动灰粉 / 柔雾玫瑰 / 酒红亮点） */
  --au1: rgba(206,156,176,.28);   /* 行动色 灰粉 #CE9CB0 */
  --au2: rgba(168,92,126,.30);    /* hover 标准玫瑰 #A85C7E */
  --au3: rgba(224,101,126,.22);   /* 亮点 酒红 #E0657E（仅作极淡氛围，非文字亮点） */
  --au-op: .25;
  --au-noise: .09;

  --action: #CE9CB0;
  --action-ink: #1E1519;
  --wine: #E0657E;           /* 酒红提亮保持可见度 */
  --btn-hover: #9C637D;
  --btn-hover-mist: var(--btn-hover); /* 别名，跟随主值 */
  --foot-bg: #5A474E;        /* 页脚：柔暖墨，与联系区渐变的末端完全同色（接缝消失） */

  --accent: #CE9CB0;
  --accent-2: #E0657E;
  --accent-soft: color-mix(in srgb, #CE9CB0 22%, transparent);
  --accent-grad: linear-gradient(120deg, #CE9CB0 0%, #E0657E 100%);
  --accent-grad-soft: linear-gradient(120deg, rgba(206,156,176,.16), rgba(224,101,126,.16));

  --shadow-sm: 0 6px 22px rgba(0,0,0,.40);
  --shadow-md: 0 14px 38px rgba(0,0,0,.45);
  --shadow-lg: 0 26px 64px rgba(0,0,0,.55);
}

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

/* 底色移到 html：呼吸光斑层用 z-index:-1 沉在 body 内容之下、html 底色之上，
   这样不用给任何内容加 z-index，不会干扰 sticky nav 等既有层级。 */
html { scroll-behavior: smooth; overflow-x: hidden; -webkit-text-size-adjust: 100%;
       background: var(--bg); transition: background .45s var(--ease); }

body {
  font-family: var(--font);
  background: transparent;
  color: var(--text);
  line-height: 1.62;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .45s var(--ease), color .45s var(--ease);
}

a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft); color: var(--wine); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- 通用排版 ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--action);
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--action) 22%, transparent);
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--action);
  box-shadow: 0 0 0 0 var(--action); animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--action) 55%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.section { padding: 56px 0; }
.section.soft { background: var(--bg-soft); }
.section-head { max-width: 660px; margin-bottom: 36px; }
.section-head .tag {
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--action);
}
.section-head h2 {
  font-size: clamp(21px, 2.6vw, 27px); line-height: 1.25; letter-spacing: -.01em;
  margin: 10px 0 0; font-weight: 800;
}
.section-head p { margin-top: 12px; color: var(--text-soft); font-size: 15px; }

.grad-text { color: var(--wine); }   /* 高亮词用酒红单色（规范：酒红只做亮点） */

/* ---------- 按钮（方案 B · 线框 Outline） ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 10px; font-weight: 600; font-size: 15px;
  cursor: pointer; border: 1.5px solid transparent; background: transparent;
  transition: transform .25s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
/* 主按钮：透明底 + 柔暖墨字 + 1.5px 灰粉描边；hover 实色翻转 + 白字 */
.btn-primary { color: var(--text); border-color: var(--action); }
.btn-primary:hover { background: var(--c-btn-hover); color: #fff; border-color: var(--c-btn-hover); transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* 副按钮：透明底 + 1px 描边；hover 描边转灰粉 + 12% 淡底 */
.btn-ghost { color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); transform: translateY(-3px); }

/* ---------- 导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* 品牌字标：全大写与右侧导航保持同一语言，略收字号 + 放字距，读作 wordmark 而非人名 */
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; letter-spacing: .08em; }
.brand sup { font-size: 8px; color: var(--text-mute); margin-left: 2px; }
/* 品牌字标 N2：/ 斜杠（灰粉）+ SL（实心墨）+ 爱心角标（酒红） */
.logo-mark { height: 25px; width: auto; flex: none; display: block; }
.logo-mark text { font-family: var(--font); }
.logo-mark .lg-slash { fill: var(--c-slash); }
.logo-mark .lg-sl { fill: var(--c-title); }
.logo-mark .lg-heart { fill: var(--wine); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  padding: 9px 14px; border-radius: 9px; color: var(--text-soft);
  font-size: 13px; font-weight: 600; letter-spacing: .06em;
  transition: color .2s, background .2s;
}
.nav-links a .sl { color: var(--c-slash); margin-right: 4px; font-weight: 800; }
.nav-links a:hover, .nav-links a.active { color: var(--text); background: var(--surface-2); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer;
  display: grid; place-items: center; transition: transform .2s var(--ease), border-color .2s, color .2s;
}
.icon-btn:hover { transform: translateY(-2px); border-color: var(--action); color: var(--action); }
.btn-cv {
  padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--text);
  border: 1.5px solid var(--action); transition: transform .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn-cv:hover { background: var(--btn-hover); color: #fff; border-color: var(--btn-hover); transform: translateY(-2px); }
.nav-toggle { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 72px 0 48px; overflow: hidden; }
.hero-bg {
  position: absolute; inset: -30% -10% auto -10%; height: 720px; z-index: 0;
  background:
    radial-gradient(40% 46% at 16% 22%, rgba(185,138,160,.30), transparent 70%),
    radial-gradient(40% 44% at 84% 12%, rgba(123,45,58,.18), transparent 70%),
    radial-gradient(46% 54% at 62% 80%, rgba(185,138,160,.20), transparent 70%);
  filter: blur(12px);
  animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-26px,0) scale(1.05); } }
.hero .container { position: relative; z-index: 1; }
.hero h1 {
  font-size: clamp(27px, 4.6vw, 40px); line-height: 1.3; letter-spacing: -.01em;
  margin: 22px 0 0; font-weight: 800;
}
.hero .lede { margin: 18px 0 0; max-width: 600px; font-size: clamp(14px, 1.8vw, 16px); color: var(--text-soft); }
.hero-cta { margin-top: 32px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-meta { margin-top: 48px; display: flex; gap: 12px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-radius: 12px; background: var(--surface); border: 1px solid var(--border);
  font-size: 14px; color: var(--text-soft); box-shadow: var(--shadow-sm);
}
.chip b { color: var(--text); font-weight: 700; }

/* ---------- 关于 ---------- */
.about-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 44px; align-items: start; }
.about-text p { color: var(--text-soft); margin-bottom: 14px; font-size: 14.5px; }
.about-text .hl { color: var(--wine); font-weight: 600; }
.fact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 26px; box-shadow: var(--shadow-sm); position: sticky; top: calc(var(--nav-h) + 20px);
}
.fact-card h4 { font-size: 14px; margin-bottom: 16px; color: var(--text-mute); font-weight: 600; letter-spacing: .03em; }
.fact-list { list-style: none; display: grid; gap: 13px; }
.fact-list li { display: flex; gap: 12px; align-items: baseline; font-size: 14.5px; }
.fact-list .k { color: var(--action); font-weight: 700; min-width: 64px; }

/* ---------- 能力 ---------- */
.skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.skill-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--action) 35%, var(--border)); }
.skill-card .ico {
  width: 48px; height: 48px; border-radius: 13px; background: var(--accent-soft);
  color: var(--action); display: grid; place-items: center; margin-bottom: 18px;
}
.skill-card h3 { font-size: 17px; margin-bottom: 8px; letter-spacing: -.01em; }
.skill-card p { color: var(--text-soft); font-size: 14px; margin-bottom: 16px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-size: 12px; padding: 4px 12px; border-radius: 999px; font-weight: 700;
  background: color-mix(in srgb, var(--action) 22%, transparent); color: var(--text); border: none;
}

/* ---------- 数据带 ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat-box {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 28px 24px; box-shadow: var(--shadow-sm);
}
.stat-box b {
  display: block; font-size: clamp(30px, 4vw, 40px); font-weight: 800; letter-spacing: -.03em;
  line-height: 1; color: var(--wine);
}
.stat-box span { color: var(--text-mute); font-size: 14px; margin-top: 8px; display: block; }

/* ---------- 时间线 ---------- */
.timeline { margin-top: 8px; border-left: 2px solid var(--border); padding-left: 28px; display: grid; gap: 28px; }
.tl-item { position: relative; }
.tl-item::before {
  content: ''; position: absolute; left: -37px; top: 5px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--action); box-shadow: 0 0 0 4px var(--accent-soft);
}
.tl-item .when { font-size: 13px; color: var(--action); font-weight: 700; }
.tl-item h4 { font-size: 16px; margin: 5px 0 2px; letter-spacing: -.01em; }
.tl-item .org { color: var(--text-mute); font-size: 14px; margin-bottom: 7px; }
.tl-item p { color: var(--text-soft); font-size: 14.5px; }

/* ---------- 精选作品 ---------- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.feat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s;
}
.feat-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feat-thumb { height: 156px; display: grid; place-items: center; color: #fff; font-size: 30px; font-weight: 800; letter-spacing: .04em; position: relative; overflow: hidden; }
.feat-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22)); }
.feat-body { padding: 20px 22px 24px; }
.feat-body h3 { font-size: 16px; margin-bottom: 7px; letter-spacing: -.01em; }
.feat-body p { color: var(--text-soft); font-size: 14px; }
.feat-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.feat-foot .more { color: var(--wine); font-weight: 600; font-size: 14px; }
.feat-foot .cat { font-size: 12px; color: var(--text-mute); }

/* ---------- 作品页 ---------- */
.page-hero { padding: 48px 0 24px; position: relative; }
.page-hero .crumb { color: var(--text-mute); font-size: 13px; margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(25px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.page-hero p { color: var(--text-soft); margin-top: 14px; max-width: 620px; font-size: 15px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 34px 0 38px; }
.filter-btn {
  padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-soft); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: all .2s var(--ease);
}
.filter-btn:hover { border-color: var(--action); color: var(--text); }
.filter-btn.active { background: var(--wine); color: #fff; border-color: transparent; box-shadow: var(--shadow-sm); }

.works-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.work-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s, border-color .35s;
}
.work-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--action) 30%, var(--border)); }
.work-thumb { height: 200px; position: relative; display: grid; place-items: center; color: #fff; overflow: hidden; }
.work-thumb .glyph { font-size: 32px; font-weight: 800; letter-spacing: .06em; position: relative; z-index: 1; text-shadow: 0 6px 22px rgba(0,0,0,.28); }
.work-thumb::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 18% 8%, rgba(255,255,255,.3), transparent 55%); }
.work-thumb .badge {
  position: absolute; top: 15px; left: 15px; z-index: 2; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.32); color: #fff;
  backdrop-filter: blur(4px);
}
.work-body { padding: 24px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.work-body .role { color: var(--action); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.work-body h3 { font-size: 18px; margin: 7px 0 9px; letter-spacing: -.015em; }
.work-body p { color: var(--text-soft); font-size: 14.5px; flex: 1; }
.work-tags { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.work-tags .t { font-size: 12px; padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--action) 22%, transparent); color: var(--text); font-weight: 600; }
.work-metrics { display: flex; gap: 20px; padding: 15px 0; border-top: 1px dashed var(--border); margin-bottom: 16px; }
.work-metrics .m b { display: block; font-size: 18px; letter-spacing: -.01em; color: var(--wine); }
.work-metrics .m span { font-size: 12px; color: var(--text-mute); }
.work-link { display: inline-flex; align-items: center; gap: 7px; color: var(--wine); font-weight: 700; font-size: 14.5px; }
.work-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.feat-foot .more:hover { text-decoration: underline; text-underline-offset: 3px; }
.work-link .arrow { transition: transform .25s var(--ease); }
.work-card:hover .work-link .arrow { transform: translate(3px, -3px); }

/* ---------- 联系 ---------- */
.contact-wrap {
  background: var(--accent-grad-soft); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 56px 40px; text-align: center; box-shadow: var(--shadow-md);
}
.contact-wrap h2 { font-size: clamp(22px, 3vw, 30px); font-weight: 800; letter-spacing: -.02em; }
.contact-wrap p { color: var(--text-soft); margin: 12px auto 24px; max-width: 520px; font-size: 15px; }
.contact-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.social-row { display: flex; gap: 12px; justify-content: center; margin-top: 28px; }
.social-row a {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--text-soft); transition: transform .2s var(--ease), color .2s, border-color .2s;
}
.social-row a:hover { transform: translateY(-3px); color: var(--wine); border-color: var(--wine); }

/* ---------- 页脚 ---------- */
footer { border-top: 1px solid var(--border); padding: 32px 0; color: var(--text-mute); font-size: 14px; }
footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

/* ---------- 进入动画 ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: ensure-show 1.1s var(--ease) forwards; }
  .reveal.in { animation: none; }
}
@keyframes ensure-show {
  0% { opacity: 0; transform: translateY(26px); }
  18% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 980px) {
  .about-grid { grid-template-columns: 1fr; }
  .fact-card { position: static; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0; flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 18px; gap: 4px;
    transform: translateY(-120%); transition: transform .3s var(--ease); box-shadow: var(--shadow-md); z-index: 99;
    visibility: hidden;
  }
  .nav-links.open { transform: none; visibility: visible; }
  .nav-links a { padding: 12px 14px; }
  .nav-toggle { display: grid; }
  .skills-grid, .feat-grid, .works-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: 1fr 1fr; }
  .section { padding: 40px 0; }
  .hero { padding: 56px 0 40px; }
  .contact-wrap { padding: 40px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* =========================================================
   P4 排版层（首页）· 描边大字 / 斜杠 / 深色区 / 水印
   层次靠排版，不靠卡片浮出 —— 配色仍为方案③ 合规分配
   ========================================================= */

/* 斜杠小标题 */
.slash {
  display: flex; align-items: center; gap: 0;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-head);
}
.slash .sl { color: var(--c-slash); margin-right: 4px; font-weight: 800; }

/* 描边空心大字 + wipe 揭示 */
.outline {
  font-size: clamp(46px, 10vw, 104px); font-weight: 800; line-height: 1;
  letter-spacing: -.03em; margin: 0;
  animation: wipe 1.2s var(--ease) both;
}
.outline .o1 { color: transparent; -webkit-text-stroke: 2.5px var(--c-title); }
.outline .o2 { color: var(--c-title); }
/* 备选方案 C（暂不启用，保留待用）：空心段描边转灰粉。
   需要启用时，把首页 h1 的 class 从 "outline" 改成 "outline alt" 即可，无需改其他代码。 */
.outline.alt .o1 { -webkit-text-stroke-color: var(--action); }
@keyframes wipe {
  0%   { clip-path: inset(0 100% 0 0); opacity: 0; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* 状态药丸 */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--action) 22%, transparent); color: var(--c-pill-fg);
  white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-pill-dot); animation: pillpulse 2.2s infinite; }
@keyframes pillpulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-pill-dot) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Hero */
.p4-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--border); }
.p4-hero .outline { margin-top: 20px; }
.p4-sub { margin-top: 22px; font-size: clamp(14px, 1.7vw, 16px); color: var(--text-soft); max-width: 620px; }
.p4-sub .hl { color: var(--wine); font-weight: 700; }
.p4-btns { display: flex; gap: 12px; margin-top: 30px; flex-wrap: wrap; }

/* Hero 两栏：左文案 + 右插画。
   插画是透明底细线稿（连通域抠图，黑轮廓线包住了所有内部白色，可放心透明），
   浅色模式直接融入暖白背景；深色模式浅色块自然浮出，像贴纸。
   flex 布局 + 文案块收缩宽度，让插画紧贴大字 E 的右侧（用户指定），而非贴屏幕右缘。 */
.hero-grid { display: flex; align-items: center; gap: 60px; }   /* 60px：插画比「贴 E」时右移 40px，构图更居中于容器 */
.hero-copy { flex: 0 1 auto; min-width: 0; }
.hero-copy .p4-sub { max-width: 560px; }
/* 桌面端固定断行点，避免「……运营。」被折成孤字行；移动端恢复自然换行 */
.br-d { display: inline; }
@media (max-width: 880px) { .br-d { display: none; } }
.hero-art { flex: 0 0 auto; }
.hero-art img {
  display: block; height: clamp(360px, 42vw, 560px); width: auto;
}
/* 有插画时大字提回一档，E 尽量宽，与插画贴合成一组 */
.p4-hero:has(.hero-art) .outline { font-size: clamp(42px, 8.4vw, 100px); }
@media (max-width: 880px) {
  .hero-grid { flex-direction: column; align-items: center; gap: 26px; }
  .hero-art { order: 2; }
  .hero-art img { height: clamp(220px, 52vw, 320px); }
  .hero-copy .p4-sub { max-width: 620px; }
}

/* 通用区块：留白比早期版本大一档（42→56px），分区靠间距 + 头部标题 */
.p4-sec { padding: 56px 0 60px; border-top: 1px solid var(--border); position: relative; overflow: hidden; }
.p4-sec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
/* 区块头标题比 hero/联系区的 slash 小标大一档（12→16px）：字号可在 14–18 间微调 */
.p4-sec-head .slash { font-size: 16px; letter-spacing: .11em; }
/* 备选（当前未启用）：区块大标题版式。需要时在 .p4-sec-head 里加 <h2 class="p4-sec-title">标题</h2> */
.p4-sec-title {
  font-size: clamp(28px, 4.4vw, 46px); font-weight: 800; line-height: 1.04;
  letter-spacing: -.02em; margin: 8px 0 0; color: var(--c-title);
}
.p4-hint { font-size: 12.5px; color: var(--text-mute); letter-spacing: .02em; }
.p4-all {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--c-link);
}
.p4-all:hover { text-decoration: underline; text-underline-offset: 3px; }
.p4-pill {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 4px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--action) 14%, transparent);
  color: var(--text); border: 1px solid color-mix(in srgb, var(--action) 30%, transparent);
  white-space: nowrap;
}
/* WORK 工作区 · 方案 B 渐变扫光下划线 Tab：标签 12px，选中文字与下划线同为 #9C637D */
.tabline { display:flex; align-items:baseline; gap:40px; margin:8px 0 26px; border-bottom:1px solid var(--border); }
.tabline .t-btn {
  position:relative; border:0; background:none; cursor:pointer; font:inherit;
  font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em; line-height:1.2;
  color:var(--text-mute); padding:0 0 14px; transition:color .3s var(--ease);
}
.tabline .t-btn.active { color:#9C637D; }
.tabline .t-btn::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; border-radius:3px;
  background:#9C637D;
  box-shadow:0 2px 10px rgba(156,99,125,.4);
  transform:scaleX(0); transform-origin:left; opacity:0;
  transition:transform .4s cubic-bezier(.22,1,.36,1), opacity .3s;
}
.tabline .t-btn.active::after { transform:scaleX(1); opacity:1; }
.tabline .t-btn:not(.active):hover { color:var(--text-soft); }
/* 工作区卡片：两列大卡片（2 行），其余走「全部作品」 */
.work-tab-sec .p4-cards { grid-template-columns:repeat(2,1fr); gap:22px; }
.work-tab-sec .p4-card { padding:26px 26px 22px; }
.work-tab-sec .p4-card h3 { font-size:19px; }
.work-tab-sec .p4-card p { font-size:14px; line-height:1.55; }
.work-panels .tab-panel { display:none; }
.work-panels .tab-panel.active { display:block; animation:tabfade .42s var(--ease); }
@keyframes tabfade { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* AI PRODUCT MANAGER 区：与 Selected Work 同层级平行，渐变浅粉底区别于两者（非 Experience 平铺底、无水印） */
.pm-sec {
  background:
    radial-gradient(110% 90% at 82% -20%, color-mix(in srgb, var(--action) 9%, transparent), transparent 58%),
    linear-gradient(180deg, var(--bg-soft), color-mix(in srgb, var(--bg-soft) 55%, var(--bg)));
}
.pm-sec .p4-cards { position: relative; z-index: 1; }
/* 链接箭头：统一细线 + hover 朝右上推出（与 ↗ 语义一致） */
.arw { display: inline-flex; transition: transform .25s var(--ease); }
.p4-all:hover .arw, a:hover > .arw { transform: translate(3px, -3px); }
.arw-l { display: inline-flex; transition: transform .25s var(--ease); }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--wine); font-weight: 600; }
.back-link:hover .arw-l { transform: translateX(-4px); }
/* Hero 主按钮的右上字符箭头 ↗（用户指定）：hover 时朝右上方推出
   注：字符箭头在不同字体下字形/基线会有差异，这里用 line-height:1 + 微上调把它压回视觉中线 */
.btn .a {
  display: inline-flex; align-items: center; line-height: 1;
  font-size: 15px; transform: translateY(-1px);
  transition: transform .25s var(--ease);
}
.btn:hover .a { transform: translate(3px, -4px); }
/* 右上箭头（↗ SVG 版，备用）：hover 朝右上方推出，与「前往另一页」的方向语义一致 */
.arw-up { display: inline-flex; transition: transform .25s var(--ease); }
.btn:hover .arw-up, a:hover > .arw-up { transform: translate(3px, -3px); }
/* 锚点跳转：避开吸顶导航（--nav-h 68px），再留 12px 呼吸 */
#experience, #contact { scroll-margin-top: calc(var(--nav-h) + 12px); }

/* 作品三卡 */
.p4-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.p4-card {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 20px 18px;
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
  animation: stagger .55s var(--ease) both; animation-delay: calc(var(--i) * .12s + .15s);
}
.p4-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(120,80,100,.12); border-color: color-mix(in srgb, var(--action) 40%, var(--border)); }
.p4-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.p4-tags span { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--action) 22%, transparent); color: var(--text); }
.p4-card h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.01em; }
.p4-card p { font-size: 13.5px; color: var(--text-soft); margin: 0 0 14px; }
.p4-metric { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-soft); }
.p4-metric b { color: var(--c-metric); font-weight: 800; }
/* 首页卡片底部双按钮：右对齐、不占满整行，查看项目详情更宽且在右 */
.p4-card-actions { display: flex; gap: 10px; margin-top: auto; padding-top: 16px; flex-wrap: wrap; justify-content: flex-end; }
.btn-detail, .btn-site { flex: 0 0 auto; justify-content: center; font-size: 13.5px; padding: 10px 16px; border-radius: 9px; }
.btn-detail { padding: 10px 20px; } /* 比查看网站略宽 */
.btn-detail .arrow { transition: transform .25s var(--ease); }
.btn-detail:hover .arrow { transform: translate(3px, -3px); }
.btn-site:disabled { opacity: .5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn-site:disabled:hover { border-color: var(--border); background: transparent; }
@keyframes stagger { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 深色经历区 */
.dark-sec {
  background: var(--dark-bg); color: var(--dark-text);
  --action: #CE9CB0; --wine: #E0657E;      /* section 级切深色变量 */
  --c-slash: #CE9CB0; --c-link: #E0657E; --c-metric: #CE9CB0;
  padding: 64px 0 68px; position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
}
.dark-sec .slash { color: color-mix(in srgb, var(--dark-text) 78%, transparent); }
.dark-sec .slash .sl { color: var(--action); }
.dark-sec .p4-hint { color: color-mix(in srgb, var(--dark-text) 52%, transparent); }
.dark-sec .watermark {
  position: absolute; top: 20px; left: 0; right: 0; text-align: center;
  font-size: clamp(56px, 10vw, 108px); font-weight: 800; letter-spacing: .04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 2px color-mix(in srgb, var(--dark-text) 12%, transparent);
  user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden;
}
.p4-rows { display: flex; flex-direction: column; position: relative; z-index: 1; border-top: 1px solid color-mix(in srgb, var(--dark-text) 14%, transparent); }
.p4-acc { border-bottom: 1px solid color-mix(in srgb, var(--dark-text) 12%, transparent); }
/* 行 = 按钮：整行可点，展开/收起 */
.p4-row {
  display: flex; align-items: center; gap: 18px; padding: 20px 10px;
  width: 100%; text-align: left; background: transparent; border: 0;
  font: inherit; color: var(--dark-text); cursor: pointer;
  transition: background .28s var(--ease), padding-left .28s var(--ease);
  animation: stagger .55s var(--ease) both; animation-delay: calc(var(--i) * .12s + .15s);
}
.p4-row:hover { background: color-mix(in srgb, var(--action) 16%, transparent); padding-left: 20px; }
/* 展开态不留底色：hover 底色只属于 hover，鼠标移开后即使内容处于展开状态也不留色块/阴影 */
.p4-row .n { font-size: 13px; font-weight: 800; min-width: 100px; color: var(--action); font-variant-numeric: tabular-nums; }
.p4-row .t { font-size: 17px; font-weight: 700; flex: 1; }
.p4-row .o { font-size: 13.5px; opacity: .78; }
.p4-row .a { display: grid; place-items: center; color: var(--action); transition: transform .32s var(--ease); }
.p4-acc.open .p4-row .a { transform: rotate(180deg); color: var(--wine); }
.p4-row:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; border-radius: 8px; }

/* 展开面板 */
.p4-panel { overflow: hidden; transition: height .38s var(--ease), opacity .3s var(--ease); }
/* 面板顶部留白与「行与行之间」的节奏对齐（行内边距 20px + 18px ≈ 38px） */
.p4-panel-in { padding: 18px 10px 28px; }
.p4-panel-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.p4-panel-tags span {
  font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--action) 18%, transparent); color: var(--dark-text);
}
.p4-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; }
.p4-points li {
  position: relative; padding-left: 18px; font-size: 14px; line-height: 1.78;
  color: color-mix(in srgb, var(--dark-text) 86%, transparent);
}
.p4-points li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 2px; background: var(--action);
}
.p4-panel-metric { margin-top: 18px; gap: 22px; }

@media (max-width: 720px) {
  .p4-row { flex-wrap: wrap; gap: 6px 14px; }
  .p4-row .t { flex: 1 1 auto; }
  .p4-row .o { flex: 1 0 100%; padding-left: 0; }
}

/* 底部 CONTACT */
.p4-foot {
  padding: 56px 0 40px; border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, var(--bg));
  position: relative; overflow: hidden;
}
/* 主文案与 SOPHIE LIN 描边字并排：大字放在「想聊点东西？欢迎发邮件」右侧 */
.p4-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.p4-foot-cta {
  font-size: clamp(26px, 4.5vw, 44px); font-weight: 800; line-height: 1.12;
  margin: 16px 0 0; letter-spacing: -.02em; color: var(--c-cta); position: relative; z-index: 1;
}
.p4-mail {
  display: inline-block; font-size: 15px; font-weight: 700; color: var(--c-link);
  text-decoration: underline; text-underline-offset: 4px; position: relative; z-index: 1;
  margin-top: 18px;
}
.p4-wm {
  font-size: clamp(48px, 9vw, 120px); font-weight: 800; letter-spacing: -.02em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 14%, transparent);
  user-select: none; pointer-events: none;
  /* 方案 A：沉到联系区右下角、位于文字之下（背景字） */
  position: absolute; right: 16px; bottom: 6px; z-index: 0; margin: 0;
  white-space: nowrap; overflow: hidden;
}
/* 联系区内容压在水印之上，保证可读与可点 */
.p4-foot .slash { position: relative; z-index: 1; }

/* ---------- 02 经历区：浅色 + 换档底色（--bg-soft）----------
   深色重音移到 CONTACT 后，这里靠「色调差」而不是「深浅差」来分段，粉白体系的轻盈感不丢 */
.exp-sec {
  background: var(--bg-soft); color: var(--text);
  padding: 56px 0 60px; position: relative; overflow: hidden;
  border-top: 1px solid var(--border);
}
.exp-sec .watermark {
  position: absolute; top: 20px; left: 0; right: 0; text-align: center;
  font-size: clamp(56px, 10vw, 108px); font-weight: 800; letter-spacing: .04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--text) 13%, transparent);
  user-select: none; pointer-events: none; white-space: nowrap; overflow: hidden;
}
/* 浅底上的行 / 面板：原深色区专用色改回浅色体系 */
.exp-sec .p4-row { color: var(--text); }
.exp-sec .p4-row:hover { background: color-mix(in srgb, var(--action) 8%, transparent); }
.exp-sec .p4-rows, .exp-sec .p4-acc { border-color: var(--border); }
.exp-sec .p4-panel-tags span { color: var(--text); background: color-mix(in srgb, var(--action) 22%, transparent); }
.exp-sec .p4-points li { color: var(--text-soft); }
.exp-sec .p4-hint { color: var(--text-mute); }

/* ---------- 03 联系区：全页唯一的深色块（收尾压在邮箱上） ----------
   底色用「近黑 → 柔暖墨」渐变（172°），底部整条边正好落在页脚的 --foot-bg，接缝零色差 */
.dark-sec.p4-foot { background: var(--contact-bg); border-top: 0; padding: 64px 0 52px; }
.dark-sec.p4-foot .slash { color: color-mix(in srgb, var(--dark-text) 78%, transparent); }
.dark-sec.p4-foot .slash .sl { color: var(--action); }
.dark-sec.p4-foot .p4-foot-cta { color: var(--dark-text); }
.dark-sec.p4-foot .p4-mail { color: var(--contact-link); transition: color .2s var(--ease); }
.dark-sec.p4-foot .p4-mail:hover { color: #FFFFFF; }
/* CONTACT 小标题字号与上方 SELECTED WORK / EXPERIENCE 一致 */
.dark-sec.p4-foot .slash { font-size: 16px; letter-spacing: .11em; }
/* 水印描边 22%（用户选定的 v-grad 原版数值） */
.dark-sec.p4-foot .p4-wm { -webkit-text-stroke: 2px color-mix(in srgb, var(--dark-text) 22%, transparent); }

/* ---------- 页脚：柔暖墨（--foot-bg），与联系区渐变末端同色，视觉上一整块到底 ----------
   顶部 1px 实色分界线（--foot-line，比页脚亮一档）：正面承认「这里换区了」，
   但底色仍与渐变末端同色，是「刻在一整块上的刻度」，不是两块拼接 */
footer.foot-ink {
  background: var(--foot-bg); border-top: 1px solid var(--foot-line);
  padding: 22px 0 26px;
  color: color-mix(in srgb, var(--dark-text) 80%, transparent);
}
footer.foot-ink a { color: color-mix(in srgb, var(--dark-text) 92%, transparent); }
footer.foot-ink a:hover { color: #fff; }

/* P4 响应式 */
@media (max-width: 980px) {
  .p4-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .p4-cards { grid-template-columns: 1fr; }
  .work-tab-sec .p4-cards { grid-template-columns: 1fr; gap:16px; }
  .work-tab-sec .p4-card { padding:20px 18px 18px; }
  .tabline { gap:26px; }
  .p4-hero { padding: 44px 0 38px; }
  .p4-sec { padding: 34px 0; }
  .p4-pill { font-size: 10px; padding: 3px 10px; }
  .dark-sec { padding: 40px 0; }
  .p4-row { flex-wrap: wrap; gap: 6px 14px; }
  .p4-row .n { flex: 1 1 100%; min-width: 0; }
  .p4-row .t { flex: 1 1 100%; }
  .p4-row .o { flex: 1 1 auto; }
  .p4-row .a { margin-left: auto; }
  .p4-wm {
    position: relative; z-index: 1; right: auto; bottom: auto;
    font-size: 48px; text-align: left; white-space: normal; margin-top: 14px;
  }
  .p4-mail { margin-top: 28px; }
  .nav-links .sl { display: none; }
  .nav-pill { display: none; }
  .p4-foot-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================================
   背景呼吸感 · 方案②「底色呼吸」（v3.11）
   三团极淡光斑沉在内容之下，只在透明背景区（Hero / 作品区）透出，
   EXPERIENCE 之后的不透明底色区不受影响 —— 上呼吸、下沉稳。
   颜色全部取自视觉规范色板，不引入色板外颜色。
   ========================================================= */

/* 呼吸层：fixed + z-index:-1，画在 html 底色之上、body 内容之下；
   不拦点击（pointer-events:none），对无障碍只读器隐藏（aria-hidden）。 */
.aura { position: fixed; inset: -12%; z-index: -1; pointer-events: none; }

.aura i {
  position: absolute; display: block; border-radius: 50%;
  /* 单点硬停靠的 radial-gradient 在大面积低透明度下会被 8bit 量化出一圈圈同心线（色带）。
     这里铺 5 段缓出色标把落差摊平，再叠 blur 二次羽化。 */
  background: radial-gradient(circle at center,
    var(--c) 0%,
    color-mix(in srgb, var(--c) 68%, transparent) 22%,
    color-mix(in srgb, var(--c) 40%, transparent) 40%,
    color-mix(in srgb, var(--c) 18%, transparent) 56%,
    color-mix(in srgb, var(--c)  6%, transparent) 68%,
    transparent 74%);
  filter: blur(34px);
  opacity: calc(var(--au-op) * 1.5);
}
.aura i:nth-child(1) { --c: var(--au1); width: 72vw; height: 72vw; left: -16vw; top: -22vw; animation: au1 14s ease-in-out infinite alternate; }
.aura i:nth-child(2) { --c: var(--au2); width: 58vw; height: 58vw; right: -14vw; top: 22vh; animation: au2 19s ease-in-out infinite alternate; }
.aura i:nth-child(3) { --c: var(--au3); width: 80vw; height: 80vw; left: 14vw; bottom: -34vw; animation: au3 24s ease-in-out infinite alternate; }
@keyframes au1 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(9vw,7vh,0) scale(1.16); } }
@keyframes au2 { from { transform: translate3d(0,0,0) scale(1.14); } to { transform: translate3d(-10vw,9vh,0) scale(.96); } }
@keyframes au3 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(-8vw,-8vh,0) scale(1.2); } }

/* 抖动（dither）层：一层极细的静止噪点，把量化台阶打碎成随机颗粒。
   这是消除大面积渐变色带最有效的通用做法；噪点本身静止，不参与呼吸动画。 */
.aura::before {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 150px 150px;
  opacity: var(--au-noise);
  mix-blend-mode: soft-light;
}

/* 无障碍：系统开启「减弱动态效果」时静止（WCAG 规范要求，不是 bug） */
@media (prefers-reduced-motion: reduce) {
  .aura i { animation: none !important; }
}

/* 移动端降级：三团 34px 模糊的大光斑在低端机上会掉帧，
   减到两团、模糊降到 22px、周期拉长，观感几乎不变但开销减半。 */
@media (max-width: 768px) {
  .aura i:nth-child(3) { display: none; }
  .aura i { filter: blur(22px); }
  .aura i:nth-child(1) { animation-duration: 20s; }
  .aura i:nth-child(2) { animation-duration: 26s; }
}