/* 网页正文：身份 / 关于我 / 工作经历 三屏
   设计方向：暗黑游戏质感 + 高对比衬线排版的电影海报感。

   字体分工（都是本地自托管，见 fonts.css）：
     中文大标题   霞鹜文楷裁剪版（Han Serif Web），楷骨舒展，大字号有味道
     英文装饰标题 Playfair Display，高对比衬线，和中文宋体同一气质
     英文小标签   Inter，细而克制，和大衬线形成对比
   注意：字体在 files 里按 --font-* 变量引用，改这里就够。 */

:root{
  --font-display-cn:'Han Serif Web','思源宋体 CN','Source Han Serif SC','Noto Serif SC',serif;
  --font-display-en:'Playfair Display','Times New Roman',serif;
  --font-ui:'Inter','Noto Sans SC','思源黑体 CN',sans-serif;
}

.screen-layer{position:absolute;inset:0;z-index:4;pointer-events:none}
.screen{
  position:absolute;
  pointer-events:auto;
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s linear,transform .7s var(--ease-out);
  container-type:inline-size;
}
.screen.is-active{opacity:1;transform:translateY(0)}

/* ---- 共用的排版零件 ---- */

/* 编号 + 中文小标签 + 细线：三屏统一，形成系统感 */
.screen-eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 16px;
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.26em;
  color:var(--accent);
}
.screen-eyebrow:after{
  content:'';
  height:1px;
  flex:1;
  min-width:26px;
  max-width:88px;
  background:linear-gradient(90deg,rgba(217,223,114,.55),rgba(217,223,114,0));
}
.screen-index{color:rgba(217,223,114,.55);font-variant-numeric:tabular-nums}

/* 英文装饰大标题：只用做气势，不承载信息 */
.screen-en{
  margin:0 0 10px;
  font-family:var(--font-display-en);
  font-weight:700;
  font-size:clamp(26px,7.6cqw,58px);
  line-height:1;
  letter-spacing:.01em;
  color:rgba(236,234,228,.92);
  text-shadow:0 2px 30px rgba(5,5,6,.9);
}

/* 中文主标题 */
.screen-title{
  margin:0 0 16px;
  font-family:var(--font-display-cn);
  font-weight:400;
  font-size:clamp(20px,6.4cqw,40px);
  line-height:1.42;
  letter-spacing:.04em;
  color:var(--text-primary);
  text-shadow:0 2px 26px rgba(5,5,6,.92);
  overflow-wrap:break-word;
}

.screen-lead{
  margin:0;
  font-family:var(--font-ui);
  font-size:13px;
  line-height:1.95;
  letter-spacing:.06em;
  color:var(--text-secondary);
  text-shadow:0 2px 18px rgba(5,5,6,.85);
}

/* ================= 文案底衬 =================
   这三张是满构图插画，亮部到处都是（能量光效、行星环、浮空城），
   不存在"干净的留白区"可以塞文字。所以反过来做：**给文案划一块稳定的暗区**，
   让画面来配合它。实测第 1 屏文字区 90 分位亮度到过 191，靠浅压暗根本压不住。

   两层叠：
   1) 全局轻压暗——把所有亮部整体拉下来，解决第 3 屏横跨整幅的情况
   2) 左右分区压暗——对应文案所在的半边，保证正文对比充足
   （叠层来自 ui.js 注入的 .readability-layer，指针事件已关闭） */

.hero{
  /* 这一组值决定了"画面亮度"与"文字可读"的平衡，改动前先读 README「文案底衬」。
     实测：左侧压暗 0.86 时文字区亮度 32（能读但画面被压死）；
     0.34 时 148（画面好看但正文糊）。0.62 是取中值。 */
  --scrim-base:.08;
  --scrim-side:.62;
  --scrim-side-2:0;
  /* 把混合模式关在 hero 内部，不影响页面上其它元素 */
  isolation:isolate;
}

/* 第 3 屏人物在左、文字在右：左边完全不压，只压右边文字那一列 */
.hero[data-screen="3"]{--scrim-side:0;--scrim-side-2:.58}

.readability-layer{position:absolute;inset:0;z-index:3;pointer-events:none}

.readability-layer .scrim-base{
  position:absolute;
  inset:0;
  background:rgba(5,5,6,var(--scrim-base));
}
.readability-layer .scrim-left{
  position:absolute;
  inset:0;
  opacity:var(--scrim-side);
  background:linear-gradient(90deg,
    rgba(3,4,5,.92) 0%,
    rgba(3,4,5,.78) 30%,
    rgba(3,4,5,.42) 52%,
    rgba(3,4,5,.12) 74%,
    rgba(3,4,5,0) 100%);
}
.readability-layer .scrim-right{
  position:absolute;
  inset:0;
  opacity:var(--scrim-side-2);
  background:linear-gradient(270deg,
    rgba(3,4,5,.92) 0%,
    rgba(3,4,5,.78) 30%,
    rgba(3,4,5,.42) 52%,
    rgba(3,4,5,.12) 74%,
    rgba(3,4,5,0) 100%);
}
/* 底部：页脚与 HUD 需要干净底，但别压到画面主体 */
.readability-layer .scrim-bottom{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(5,5,6,0) 62%,
    rgba(5,5,6,.42) 80%,
    rgba(5,5,6,.72) 100%);
}

/* 文字与画面的关系分两层处理，这是实测出来的结论：
   - 大字（姓名、装饰英文标题）用 difference（差值）：浅色字在亮背景变暗、暗背景变亮，
     自动保持对比，划过人物时会翻转，观感就是"被人物前后关系切开"，而不是贴纸。
   - 正文（段落、公司名、经历）**不能**用差值：细字会出现"有的字变黑有的字变白"，
     看起来像渲染故障。正文改用普通浅色 + 文字阴影，读得清优先。*/
.screen-name,
.screen-en,
.screen-title{
  mix-blend-mode:difference;
  color:#EDEBE4;
  text-shadow:none;
}
.screen-body,
.screen-lead,
.screen-company,
.screen .exp-company,
.screen .exp-role,
.screen .exp-date,
.screen .exp-points,
.screen .exp-en{
  color:rgba(238,236,229,.92);
  text-shadow:0 1px 10px rgba(2,3,4,.95),0 2px 26px rgba(2,3,4,.8);
}
/* 编号与小标签保持品牌色 */
.screen .screen-eyebrow{color:var(--accent);text-shadow:0 1px 10px rgba(2,3,4,.9)}
.screen .exp-en{color:rgba(217,223,114,.75)}
.screen .exp-role{color:var(--accent)}


.screen[data-screen="1"]{
  left:var(--gutter);
  bottom:clamp(96px,13vh,142px);
  /* 给大字留出更宽的容器，允许压到人物身上 */
  width:min(48vw,660px);
}
/* 姓名做成整屏最大的字，压住画面 */
.screen-name{
  margin:0 0 0;
  font-family:var(--font-display-cn);
  font-weight:400;
  font-size:clamp(84px,34cqw,250px);
  line-height:.94;
  letter-spacing:.03em;
}
/* 作品集：中号，和姓名形成第二层 */
.screen-sub{
  margin:0 0 26px;
  font-family:var(--font-display-cn);
  font-size:clamp(26px,10cqw,64px);
  line-height:1.15;
  letter-spacing:.32em;
}
/* 关于我：小字，和编号排在同一行 */
.screen[data-screen="1"] .screen-eyebrow{margin-bottom:20px}

/* 三个方向：用细线分隔，像刻度 */
.screen-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  margin:0;
  font-family:var(--font-ui);
  font-size:12px;
  letter-spacing:.2em;
  color:rgba(236,234,228,.7);
}
.screen-tags span{
  padding:0 14px;
  border-left:1px solid rgba(217,223,114,.28);
}
.screen-tags span:first-child{padding-left:0;border-left:0}

/* ================= 第 2 屏：关于我 ================= */
.screen[data-screen="2"]{
  left:var(--gutter);
  top:clamp(146px,21vh,216px);
  /* 收窄到左半边：正文右端伸进画面亮区就会糊，宁可多折两行 */
  width:min(31vw,420px);
}
.screen-body{
  margin:0 0 16px;
  font-family:var(--font-ui);
  font-size:14px;
  line-height:2.05;
  letter-spacing:.04em;
  color:rgba(236,234,228,.82);
  text-shadow:0 2px 20px rgba(5,5,6,.9);
}
.screen-body:last-child{margin-bottom:0}
/* 第二段（AI 能力）稍微弱一点，形成主次 */
.screen-body.is-muted{color:var(--text-secondary)}

/* ================= 第 3 屏：工作经历 =================
   第 3 张画面人物站在左侧，右边大片是空的 —— 所以这一屏整体放右侧，
   并且**不带左侧压暗**，让左边的画面完整露出来。 */
.screen[data-screen="3"]{
  left:auto;
  right:var(--gutter);
  top:clamp(120px,16vh,180px);
  width:min(58vw,880px);
  text-align:right;
}
.screen[data-screen="3"] .screen-en{font-size:clamp(24px,4.6cqw,46px)}
.screen[data-screen="3"] .screen-eyebrow{
  margin-bottom:22px;
  flex-direction:row-reverse;
}
.screen[data-screen="3"] .screen-eyebrow:after{
  background:linear-gradient(270deg,rgba(217,223,114,.55),rgba(217,223,114,0));
}

/* 三家公司并排：桌面水平三列，像年鉴 */
.exp-list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.2vw,44px);
  margin:0;
  text-align:left;
}
.exp-item{padding-top:14px;border-top:1px solid rgba(236,234,228,.22)}
.exp-head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  margin-bottom:12px;
}
.exp-company{
  margin:0;
  font-family:var(--font-display-cn);
  font-size:clamp(15px,2.1cqw,19px);
  line-height:1.4;
  letter-spacing:.03em;
  color:var(--text-primary);
}
.exp-role{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.16em;
  color:var(--accent);
}
.exp-date{
  font-family:var(--font-ui);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--text-secondary);
  font-variant-numeric:tabular-nums;
  margin-left:auto;
}
.exp-points{
  margin:0;
  padding:0;
  list-style:none;
  font-family:var(--font-ui);
  font-size:11.5px;
  line-height:1.95;
  letter-spacing:.02em;
  color:var(--text-secondary);
}
.exp-points li{position:relative;padding-left:12px;margin-bottom:4px}
.exp-points li:before{
  content:'';
  position:absolute;
  left:0;
  top:.85em;
  width:4px;
  height:1px;
  background:rgba(217,223,114,.6);
}
/* 每家公司的英文装饰行 */
.exp-en{
  margin:12px 0 0;
  font-family:var(--font-display-en);
  font-size:10px;
  letter-spacing:.18em;
  color:rgba(217,223,114,.62);
}

/* ================= 结束面板 ================= */
.intro-panel{
  position:absolute;
  left:var(--gutter);
  bottom:clamp(112px,16vh,166px);
  width:min(36vw,470px);
  z-index:4;
  container-type:inline-size;
}
.intro-panel[hidden]{display:none}
.intro-panel:not([hidden]){animation:panel-in .9s var(--ease-out) both}
@keyframes panel-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
.intro-lead{
  font-family:var(--font-display-cn);
  font-size:clamp(20px,5.6cqw,32px);
  line-height:1.62;
  letter-spacing:.03em;
  margin:0 0 20px;
  color:var(--text-primary);
  text-shadow:0 2px 30px rgba(5,5,6,.92);
}
.intro-copy{
  font-family:var(--font-ui);
  font-size:13px;
  line-height:2;
  color:var(--text-secondary);
  margin:0 0 26px;
  text-shadow:0 2px 20px rgba(5,5,6,.85);
}
.intro-enter{min-width:180px}
/* 结束面板出现时，第 3 屏的文案退场，避免叠在一起 */
.panel-showing .screen{opacity:0;pointer-events:none}

/* ================= 自适应 ================= */

/* 矮屏：只限宽度不限高度会让文案顶到底部 HUD，这里整体上移并收字号 */
@media(min-width:1101px) and (max-height:820px){
  .screen[data-screen="1"]{bottom:158px}
  .screen[data-screen="2"]{top:132px}
  .screen[data-screen="3"]{top:118px}
  .intro-panel{bottom:158px}
  .screen-name{font-size:clamp(48px,17cqw,116px)}
  .screen-sub{font-size:clamp(18px,5.6cqw,34px)}
  .screen-en{font-size:clamp(22px,6.4cqw,46px)}
  .screen-title{font-size:clamp(18px,5.6cqw,32px)}
  .exp-points{font-size:11px;line-height:1.85}
}

/* 窄屏：三屏位置统一改成贴底，避免几套版式互相打架 */
@media(max-width:1100px){
  .screen[data-screen="1"],
  .screen[data-screen="2"],
  .screen[data-screen="3"]{
    left:var(--gutter);
    right:var(--gutter);
    top:auto;
    bottom:clamp(104px,15vh,142px);
    width:auto;
  }
  .screen-name{font-size:clamp(46px,13vw,86px)}
  .screen-sub{font-size:clamp(18px,5vw,30px);letter-spacing:.28em;margin-bottom:18px}
  .screen-en{font-size:clamp(22px,6vw,38px)}
  .screen-title{font-size:clamp(19px,5vw,28px)}
  .exp-list{grid-template-columns:1fr;gap:16px}
  .exp-item{padding-top:12px}
  .exp-points{display:none}   /* 窄屏只留公司与岗位，细节看 PDF 简历 */
  .intro-panel{left:var(--gutter);right:var(--gutter);width:auto}
  .hero::before{width:100%}
  .hero::after{display:none}
}

@media(max-width:700px){
  .screen-eyebrow{font-size:9px;margin-bottom:14px}
  .screen-name{font-size:clamp(42px,15vw,72px)}
  .screen-body{font-size:13px;line-height:1.95}
  .screen-lead{font-size:12px}
  .screen-tags{font-size:11px;letter-spacing:.16em}
  .exp-company{font-size:14px}
  .intro-lead{font-size:19px}
  .intro-copy{font-size:12.5px}
  /* 窄屏文案压在画面下部，底衬改成从上到下压暗 */
  .hero::before{
    background:linear-gradient(180deg,
      rgba(5,5,6,0) 30%,
      rgba(5,5,6,.6) 58%,
      rgba(5,5,6,.93) 100%);
  }
}

@media(prefers-reduced-motion:reduce){
  .screen{transition:none;transform:none}
  .intro-panel:not([hidden]){animation:none}
}