/* 首页封面以下的两节产品：觅才引擎、觅见（2026-10-13，按封面风格重做）。
   每节先是一张满屏真实照片（CC0，来源见 assets/img/photos.txt），标题写在照片上方留白处；
   后面接产品内容：觅才引擎是真实截图切换，觅见是【分步演示】（组件在 v2/components/sticky-steps/）。
   标题统一用黑体 CL Sans，左边距和顶栏、封面标题对齐。 */

:root{--gutter:clamp(24px,5.8vw,112px);--brand:#2660EF;--brand-ink:#1D4FD0;--ink-0:#0E1726;--ink-1:#2B3445;--ink-2b:#4A5468;--mute:#6B7486;--hair:#E3E6EC}

/* 章节大图 */
.chap{position:relative;height:88vh;min-height:620px;max-height:1000px;overflow:hidden;background:#E9E8E4}
.chap-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.chap-shade{position:absolute;inset:0}
.chap-in{position:absolute;left:var(--gutter);top:clamp(64px,10vh,120px);max-width:min(720px,48vw);color:var(--ink-0)}
.chap-eyebrow{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;letter-spacing:.24em;color:var(--brand)}
.chap-eyebrow img{width:26px;height:26px}
.chap h2{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(52px,5vw,96px);line-height:1.1;letter-spacing:.04em;margin-top:20px;color:var(--ink-0)}
.chap-slogan{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(22px,2vw,36px);line-height:1.35;margin-top:18px;color:var(--ink-1);letter-spacing:.02em}
.chap-desc{font-size:clamp(16px,1.1vw,20px);line-height:1.8;margin-top:16px;color:var(--ink-2b);max-width:34em}
.chap-links{display:flex;flex-wrap:wrap;gap:8px 30px;margin-top:26px;font-size:17px;font-weight:500}
.chap-links a{color:var(--brand-ink);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px}
.chap-links a:hover{border-bottom-color:currentColor}

.chap-micai .chap-img{object-position:50% 46%}
.chap-micai .chap-shade{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.86) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 64%),
  linear-gradient(90deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 50%)}
.chap-mijian .chap-img{object-position:50% 40%}
.chap-mijian .chap-shade{background:linear-gradient(180deg,rgba(250,250,248,.92) 0%,rgba(250,250,248,.72) 26%,rgba(250,250,248,.2) 44%,rgba(250,250,248,0) 56%),
  linear-gradient(90deg,rgba(250,250,248,.5) 0%,rgba(250,250,248,0) 46%)}

/* 觅才引擎：左边四项，右边真实截图 */
.mc{background:#fff;padding:clamp(72px,9vw,128px) var(--gutter)}
.mc-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr);gap:clamp(32px,4.5vw,80px);align-items:center}
.mc-list{border-top:1px solid var(--hair)}
.mc-list li{border-bottom:1px solid var(--hair)}
.mc-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:4px 12px;width:100%;padding:22px 0}
.mc-list .n{font-family:"CL Sans",var(--sys);font-weight:700;font-size:15px;color:var(--mute);padding-top:8px;letter-spacing:.06em}
.mc-list b{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(20px,1.6vw,28px);line-height:1.35;color:var(--mute);transition:color .25s}
.mc-list p{grid-column:2;font-size:16px;line-height:1.75;color:var(--ink-2b);max-height:0;overflow:hidden;opacity:0;transition:max-height .4s ease,opacity .3s ease,margin .3s}
.mc-list li.on .n{color:var(--brand)}
.mc-list li.on b{color:var(--ink-0)}
.mc-list li.on p{max-height:8em;opacity:1;margin-top:8px}
.mc-list button:hover b{color:var(--ink-1)}
.mc-list button:focus-visible{outline:2px solid var(--brand);outline-offset:4px}
.mc-view{position:relative;aspect-ratio:16/10.4;background:linear-gradient(160deg,#EEF2FB 0%,#F5F5F3 70%);overflow:hidden}
.mc-view figure{position:absolute;inset:0;margin:0;display:grid;place-items:center;padding:clamp(20px,3vw,48px);opacity:0;transition:opacity .45s ease}
.mc-view figure.on{opacity:1}
.mc-view figure img{max-height:100%;width:auto;max-width:100%;object-fit:contain;box-shadow:0 34px 70px -30px rgba(14,23,38,.38)}
.mc-view figure.ph img{height:100%;box-shadow:none;filter:drop-shadow(0 30px 40px rgba(14,23,38,.25))}
.mc-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(64px,7vw,104px);border-top:1px solid var(--ink-0)}
.mc-roles div{padding:26px 32px 0 0}
.mc-roles div+div{padding-left:32px;border-left:1px solid var(--hair)}
.mc-roles span{font-size:13px;letter-spacing:.2em;color:var(--mute)}
.mc-roles b{display:block;font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(19px,1.4vw,24px);line-height:1.4;margin-top:10px;color:var(--ink-0)}
.mc-roles p{font-size:15.5px;line-height:1.75;color:var(--ink-2b);margin-top:8px}

/* 觅见：【分步演示】截图模式，换成首页的黑体和品牌蓝；右边的界面是 assets/img/mijian-ui/ 里的截图 */
.mj-flow{background:#F6F6F4;padding-inline:var(--gutter);overflow-x:clip; /* 右边截图伸出屏幕，这里裁掉（clip 不影响钉住） */
  --top:69px;--blue:#2660EF;--blue-deep:#4A5468;--display:var(--sys);--ss-bleed:var(--gutter)}
.mj-flow .ss-pin{padding-block:clamp(36px,6vh,72px) 48px}
.mj-flow .ss-l h2{font-family:"CL Sans",var(--sys);font-weight:700;letter-spacing:.02em;color:var(--ink-0)}
.mj-flow .ss-l .sub{color:var(--ink-2b)}
.mj-flow .ss-n{font-family:"CL Sans",var(--sys);font-weight:700;letter-spacing:-.02em}
.mj-flow .ss-step h3,.mj-flow .ss-cap h3{font-family:"CL Sans",var(--sys);font-weight:700;color:var(--ink-0)}
.mj-flow .ss-note{color:var(--mute)}

@media (max-width:900px){
  .chap-in{max-width:none;right:var(--gutter)}
  .mc-grid{grid-template-columns:minmax(0,1fr)}
  .mc-roles{grid-template-columns:minmax(0,1fr)}
  .mc-roles div,.mc-roles div+div{padding:20px 0;border-left:0}
  .mc-roles div+div{border-top:1px solid var(--hair)}
  .mj-flow{padding-block:72px}
}

/* ===== 封面之后的滚动叙事（2026-10-13 用户方案） ===== */
/* ① 品牌宣言：大字、偏左，随滚动轻微上移淡入（JS 写 opacity/transform，没有 JS 时直接显示） */
.statement{background:#FAFAF7;padding:clamp(140px,22vh,260px) var(--gutter) clamp(120px,18vh,220px)}
.st-h{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(44px,6vw,112px);line-height:1.16;letter-spacing:.02em;color:#142235;max-width:12em}
.st-h em{font-style:normal;color:var(--brand)}
.st-sub{margin-top:clamp(24px,3.4vh,44px);font-size:clamp(18px,1.5vw,26px);line-height:1.7;color:#4A5468;max-width:28em}

/* ②③④ 面向教授与学生：钉住，图片从居中的圆角窗口向四周扩展到满屏，停留一段后释放。
   JS 只写 --tx/--ty/--r/--s/--to/--veil 几个变量，进度和滚动距离一一对应，上滚会收回。 */
.xp{position:relative;height:340vh;background:#FAFAF7}
.xp-pin{position:sticky;top:0;height:100vh;overflow:hidden}
.xp-frame{position:absolute;inset:0;clip-path:inset(var(--ty,18vh) var(--tx,17vw) round var(--r,28px));will-change:clip-path}
.xp-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;transform:translateY(var(--iy,0vh)) scale(var(--s,1.08));transform-origin:50% 42%;will-change:transform}
.xp-veil{position:absolute;inset:0;opacity:var(--veil,1);background:linear-gradient(90deg,rgba(250,250,247,.86) 0%,rgba(250,250,247,.5) 30%,rgba(250,250,247,0) 54%)}
.xp-tag{position:absolute;right:calc(var(--tx,17vw) + 16px);bottom:calc(var(--ty,18vh) + 14px);font-size:12px;letter-spacing:.04em;color:#fff;background:rgba(20,34,53,.55);padding:3px 10px;border-radius:999px}
.xp-copy{position:absolute;left:var(--gutter);top:50%;width:min(46rem,calc(100vw - 2 * var(--gutter)));transform:translateY(-50%);opacity:var(--to,1);z-index:2;pointer-events:none}
.xp-title{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(56px,7.4vw,140px);line-height:1.06;letter-spacing:.03em;color:#142235}
.xp-sub{margin-top:24px;font-size:clamp(17px,1.3vw,22px);line-height:1.7;color:#2B3445;max-width:27em}
@media (prefers-reduced-motion:reduce){
  .xp{height:auto}
  .xp-pin{position:relative;height:auto;aspect-ratio:16/9;max-height:100vh}
  .xp-frame{clip-path:none}
  .xp-img{transform:none}
}

/* ===== 觅才引擎：品牌页 → 走进屏幕（2026-10-13 用户方案，学腾讯官网产品展示区） =====
   整段钉住，JS 按滚动进度写变量：--b 品牌名、--t 文案、--l 链接、--o 文字整体（退场）、--v 白色蒙层；
   推镜头直接写 .mcb-cam 的 transform（原图像素坐标系，transform-origin 0 0）。 */
.mcb{position:relative;height:560vh;background:#F5F6F8}
.mcb-pin{position:sticky;top:0;height:100vh;overflow:hidden;background:#F5F6F8}
.mcb-cam{position:absolute;left:0;top:0;width:1672px;height:941px;transform-origin:0 0;will-change:transform}
.mcb-img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.mcb-ui{position:absolute;left:0;top:0;width:1954px;height:1218px;max-width:none;transform-origin:0 0;filter:brightness(.985) contrast(.97);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.mcb-shade{position:absolute;inset:0;opacity:var(--v,1);
  background:linear-gradient(90deg,rgba(248,248,246,.94) 0%,rgba(248,248,246,.86) 46%,rgba(248,248,246,.45) 64%,rgba(248,248,246,0) 82%)}
.mcb-tag{position:absolute;right:16px;bottom:14px;font-size:12px;color:#fff;background:rgba(20,34,53,.5);padding:3px 10px;border-radius:999px;z-index:3}
.mcb-brand{position:absolute;top:calc(69px + clamp(22px,4.6vh,52px));right:var(--gutter);display:flex;align-items:center;gap:10px;z-index:3;
  padding:8px 16px 8px 9px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(15px,1.1vw,19px);letter-spacing:.06em;color:#142235;
  opacity:calc(var(--b,1) * var(--o,1));filter:blur(calc((1 - var(--b,1)) * 8px))}
.mcb-brand img{width:clamp(26px,2vw,34px);height:auto}
.mcb-copy{position:absolute;left:var(--gutter);top:52%;max-width:min(1500px,calc(100% - 2 * var(--gutter)));z-index:3;
  transform:translateY(calc(-50% + (1 - var(--t,1)) * 20vh - (1 - var(--o,1)) * 8vh));
  opacity:calc(var(--t,1) * var(--o,1));filter:blur(calc((1 - var(--t,1)) * 8px))}
.mcb-lead{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(20px,1.7vw,32px);color:#142235}
.mcb-h{font-family:"CL Sans",var(--sys);font-weight:700;font-size:clamp(28px,3.2vw,62px);line-height:1.32;letter-spacing:.02em;color:#142235;margin-top:clamp(18px,2.6vh,32px)}
.mcb-link{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(28px,4.4vh,52px);font-size:clamp(16px,1.15vw,20px);font-weight:500;color:var(--brand-ink);text-decoration:none;
  opacity:var(--l,1);transform:translateY(calc((1 - var(--l,1)) * 24px));border-bottom:1px solid transparent;padding-bottom:2px}
.mcb.link-off .mcb-link{visibility:hidden}
.mcb-link span{transition:transform .25s ease}
.mcb-link:hover,.mcb-link:focus-visible{border-bottom-color:currentColor}
.mcb-link:hover span,.mcb-link:focus-visible span{transform:translateX(5px)}
.mcb-link:focus-visible{outline:2px solid var(--brand);outline-offset:6px}
@media (max-width:760px){
  .mcb-copy{transform:translateY(calc(-50% + (1 - var(--t,1)) * 10vh - (1 - var(--o,1)) * 5vh))}
  .mcb-shade{background:linear-gradient(0deg,rgba(248,248,246,.94) 0%,rgba(248,248,246,.8) 60%,rgba(248,248,246,.4) 100%)}
}
/* 减少动态效果：不钉住、不推镜头，品牌页直接以最终状态显示 */
@media (prefers-reduced-motion:reduce){.mcb{height:auto}.mcb-pin{position:relative}}

/* ===== 觅才引擎流程动效（右侧舞台） ===== */
.mc-list .mc-bar{grid-column:2;display:block;height:2px;margin-top:14px;background:var(--hair);overflow:hidden;opacity:0;transition:opacity .3s}
.mc-list li.on .mc-bar{opacity:1}
.mc-list .mc-bar i{display:block;height:100%;width:0;background:var(--brand)}
.mf-scene{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(14px) scale(.985);transition:opacity .6s ease,transform .6s ease;pointer-events:none}
.mf-scene.on{opacity:1;transform:none;pointer-events:auto}
.mf-scr{position:relative;width:88%;aspect-ratio:var(--ar);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(14,23,38,.35),0 0 0 1px rgba(14,23,38,.06)}
.mf-scr>img:first-child{display:block;width:100%;height:100%;max-width:none}
.mf-spot{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:calc(var(--w)*1%);height:calc(var(--h)*1%);border:2px solid var(--brand);border-radius:10px;
  box-shadow:0 0 0 4px rgba(38,96,239,.14),0 0 0 200vmax rgba(246,247,250,.58);opacity:0;transform:scale(1.03);transition:opacity .45s ease,transform .45s ease;pointer-events:none}
.mf-cap{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:#142235;color:#fff;font-size:clamp(11px,.85vw,14px);line-height:1.4;padding:7px 13px;border-radius:999px;box-shadow:0 10px 24px -10px rgba(14,23,38,.5);
  opacity:0;transform:translateY(6px);transition:opacity .45s ease .12s,transform .45s ease .12s;pointer-events:none;z-index:3}
.mf-cap::before{content:"";width:6px;height:6px;border-radius:50%;background:#6FA0FF;flex:none}
.mf-cap.r{transform:translate(-100%,6px)}
.mf-scene[data-p="1"] .ph1,.mf-scene[data-p="2"] .ph2{opacity:1;transform:none}
.mf-scene[data-p="1"] .mf-cap.r.ph1,.mf-scene[data-p="2"] .mf-cap.r.ph2{transform:translateX(-100%)}
/* 第 1 步：PDF 简历和解析结果先浮出来，结果卡片再缩小飞进李思远那一行 */
.mf-paper,.mf-fields{position:absolute;max-width:none;height:auto;opacity:0;filter:drop-shadow(0 18px 30px rgba(14,23,38,.18));transition:left .9s cubic-bezier(.2,.7,.2,1),top .9s cubic-bezier(.2,.7,.2,1),width .9s cubic-bezier(.2,.7,.2,1),opacity .5s ease,transform .5s ease}
.mf-paper{left:56%;top:9%;width:12.5%;transform:translateY(10px)}
.mf-fields{left:72%;top:5%;width:17%;transform:translateY(10px)}
.mf-scene.on[data-p="0"] .mf-paper,.mf-scene.on[data-p="0"] .mf-fields{opacity:1;transform:none}
.mf-scene[data-p="1"] .mf-paper,.mf-scene[data-p="2"] .mf-paper{opacity:0;transform:translateX(-24px)}
.mf-scene[data-p="1"] .mf-fields,.mf-scene[data-p="2"] .mf-fields{left:21%;top:47%;width:3%;opacity:0}
/* 第 2 步：AI 面试官的小球一直在「呼吸」 */
.mf-orb{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:12%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.mf-scene.on .mf-orb{animation:mfpulse 2.4s ease-out infinite}
@keyframes mfpulse{0%{box-shadow:0 0 0 0 rgba(12,150,252,.32)}100%{box-shadow:0 0 0 2.4vw rgba(12,150,252,0)}}
/* 第 4 步：报告退到后面，手机从右边滑进来 */
.mf-last .mf-scr.mf-bg{opacity:.4;transform:scale(.95) translateX(-7%);filter:saturate(.7);transition:opacity .6s,transform .6s}
.mf-phone{position:absolute;right:8%;top:5%;height:90%;aspect-ratio:600/1286;opacity:0;transform:translateY(34px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.mf-phone img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 30px 40px rgba(14,23,38,.28))}
.mf-last[data-p="1"] .mf-phone,.mf-last[data-p="2"] .mf-phone{opacity:1;transform:none}
.mf-phone .mf-ring{box-shadow:0 0 0 4px rgba(38,96,239,.18),0 12px 30px -10px rgba(38,96,239,.55)}
/* 控件 */
.mf-ctrl{position:absolute;left:16px;bottom:12px;display:flex;align-items:center;gap:12px;font-size:12px;color:var(--mute);z-index:4}
.mf-play{font:inherit;font-size:12px;color:var(--ink-1);background:rgba(255,255,255,.85);border:1px solid var(--hair);border-radius:999px;padding:4px 12px;cursor:pointer}
.mf-play:hover{border-color:var(--ink-2b)}
.mf-play:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mf-scene,.mf-spot,.mf-cap,.mf-paper,.mf-fields,.mf-phone{transition:none}.mf-scene.on .mf-orb{animation:none}.mc-list .mc-bar{display:none}}