/* ============================================================
   神秘复苏 · 首页专属样式 — 英雄区 / 滚动叙事 / 章节视差
   ============================================================ */

/* ---------- 英雄区 ---------- */
.hero{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden;padding:calc(var(--nav-h) + 30px) 28px 130px;isolation:isolate}
.hero-bg,.hero-mid,.hero-content{will-change:transform}
.hero-bg,.hero-mid{position:absolute;inset:0;transform:translate3d(var(--px,0px),var(--py,0px),0)}
.hero-mid{inset:auto 0 0 0;height:34%}
.hero-content{position:relative;z-index:2;text-align:center;max-width:780px;transform:translate3d(var(--px,0px),var(--py,0px),0)}

.hero-fog{position:absolute;left:-18%;right:-18%;height:44%;bottom:-9%;pointer-events:none;opacity:.62;filter:blur(46px)}
.hero-fog-a{background:radial-gradient(50% 60% at 30% 58%,rgba(176,30,40,.24),transparent 70%);animation:fogDrift 13s ease-in-out infinite alternate}
.hero-fog-b{background:radial-gradient(46% 56% at 70% 55%,rgba(150,40,50,.13),transparent 70%);bottom:-15%;animation:fogDrift 17s ease-in-out infinite alternate-reverse}
@keyframes fogDrift{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}

.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(234,231,225,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(234,231,225,.05) 1px,transparent 1px);background-size:84px 84px;opacity:.4;-webkit-mask-image:radial-gradient(85% 75% at 50% 36%,#000 18%,transparent 80%);mask-image:radial-gradient(85% 75% at 50% 36%,#000 18%,transparent 80%)}
.hero-bg::before{content:"";position:absolute;inset:0;background:radial-gradient(72% 55% at 50% -8%,rgba(176,30,40,.16),transparent 70%);pointer-events:none}

/* ---------- 血色崩坏眼 ---------- */
.hero-eye{
  position:absolute;top:8%;right:12%;z-index:3;width:clamp(150px,21vw,280px);pointer-events:none;opacity:.94;
  filter:drop-shadow(0 0 46px rgba(176,30,40,.42)) drop-shadow(2px 0 0 rgba(224,52,63,.35)) drop-shadow(-2px 0 0 rgba(5,1,2,.7));
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  animation:eyeGlitch 7.5s steps(1,end) infinite;
  will-change:transform,filter;
}
.hero-eye svg{width:100%;height:auto;overflow:visible}
.eye-core{transform-box:fill-box;transform-origin:center;transform:translate(calc(var(--ex,0)*15px),calc(var(--ey,0)*9px));transition:transform .16s ease-out}
.eye-shake{transform-box:fill-box;transform-origin:center;animation:eyeShake 2.3s ease-in-out infinite}
.pupil{transform-box:fill-box;transform-origin:center;transform:translate(calc(var(--ex,0)*9px),calc(var(--ey,0)*6px));transition:transform .16s ease-out}
.vein{animation:veinPulse 3.8s ease-in-out infinite;animation-delay:var(--vd,0s)}
.tear-drop{animation:tearFall 4.6s ease-in infinite;animation-delay:var(--td,0s)}
@keyframes eyeGlitch{
  0%,90%,94%,97%,100%{transform:translate3d(var(--px,0px),var(--py,0px),0)}
  91%{transform:translate3d(calc(var(--px,0px) - 7px),var(--py,0px),0) skewX(5deg)}
  92%{transform:translate3d(calc(var(--px,0px) + 5px),var(--py,0px),0) scaleY(1.02)}
  93%{transform:translate3d(var(--px,0px),calc(var(--py,0px) - 4px),0) skewX(-4deg);filter:drop-shadow(0 0 56px rgba(176,30,40,.6)) drop-shadow(5px 0 0 rgba(224,52,63,.5)) drop-shadow(-5px 0 0 rgba(5,1,2,.85))}
  95%{transform:translate3d(calc(var(--px,0px) - 3px),var(--py,0px),0) skewY(2deg)}
  98%{filter:drop-shadow(0 0 64px rgba(176,30,40,.58))}
}
@keyframes eyeShake{
  0%,100%{transform:translate(0,0)}
  12%{transform:translate(1.3px,-.9px)}
  26%{transform:translate(-1.1px,1.2px)}
  41%{transform:translate(.9px,.7px)}
  57%{transform:translate(-1.4px,-.7px)}
  73%{transform:translate(.7px,-1.1px)}
  88%{transform:translate(-.6px,.9px)}
}
@keyframes veinPulse{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes tearFall{
  0%{opacity:0;transform:translate(0,-2px)}
  10%{opacity:.9}
  60%{opacity:.65}
  100%{opacity:0;transform:translate(5px,42px)}
}

.hero-skyline{position:absolute;left:0;right:0;bottom:0}
.hero-skyline svg{width:100%;height:clamp(150px,32vh,300px)}
.hero-skyline path{fill:#060609}
.hero-skyline.near path{fill:#0a0a0f}

.hero-over{font-family:var(--font-mono);font-size:12px;letter-spacing:.5em;color:var(--blood-hi);margin:0 0 28px;text-transform:uppercase}
.hero-title{font-family:var(--font-serif);font-size:clamp(62px,12.5vw,146px);font-weight:900;letter-spacing:.09em;line-height:1.02;margin:0;color:var(--ink);text-shadow:0 0 70px rgba(224,52,63,.2),0 6px 34px rgba(0,0,0,.65)}
.hero-en{font-family:var(--font-mono);font-size:13px;letter-spacing:.6em;color:var(--ink-dim);margin:24px 0 0;text-indent:.6em;white-space:nowrap}
.hero-sub{font-size:16px;line-height:2.1;color:var(--ink-dim);margin:36px auto 0;max-width:540px}
.hero-actions{display:flex;gap:16px;justify-content:center;margin-top:44px;flex-wrap:wrap}

.hero-corners{position:absolute;inset:0;z-index:3;pointer-events:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--ink-faint)}
.hero-corners .c-live{position:absolute;top:calc(var(--nav-h) + 30px);right:36px;display:flex;align-items:center;gap:10px;color:var(--blood-hi);border:1px solid rgba(176,30,40,.35);padding:8px 12px}
.hero-corners .c-live i{width:6px;height:6px;border-radius:50%;background:var(--blood-hi);animation:blink 1.6s ease-in-out infinite}
.hero-corners .c-corner{position:absolute;bottom:32px}
.hero-corners .c-left{left:36px}
.hero-corners .c-right{right:36px;text-align:right}

.hero-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;text-decoration:none;font-family:var(--font-mono);font-size:11px;letter-spacing:.42em;color:var(--ink-faint);transition:color .3s}
.hero-scroll:hover{color:var(--ink)}
.hero-scroll-line{width:1px;height:54px;background:var(--line-2);position:relative;overflow:hidden}
.hero-scroll-line::after{content:"";position:absolute;left:0;top:-40%;width:100%;height:40%;background:var(--blood-hi);animation:scrollDrop 1.9s var(--ease-in-out) infinite}
@keyframes scrollDrop{to{top:110%}}

/* ---------- 滚动叙事章节 ---------- */
.chapter{position:relative;height:240vh}
.chapter-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;background:var(--bg-0)}
.chapter-pin::before{content:"";position:absolute;inset:0;background:radial-gradient(95% 72% at 50% 30%,var(--tint,rgba(176,30,40,.07)),transparent 76%);pointer-events:none}

/* 章节配色变体 */
.ch-dark{--tint:rgba(234,231,225,.035);--mcolor:rgba(234,231,225,.26);--fog-a:rgba(176,30,40,.13);--fog-b:rgba(139,152,163,.09);--snum:-150px;--sen:-80px;--sfog:160px;--smark:-250px}
.ch-blood{--tint:rgba(176,30,40,.1);--mcolor:rgba(224,52,63,.55);--fog-a:rgba(176,30,40,.2);--fog-b:rgba(139,152,163,.08);--snum:-170px;--sen:-90px;--sfog:180px;--smark:-280px}
.ch-ghost{--tint:rgba(116,216,201,.06);--mcolor:rgba(116,216,201,.6);--fog-a:rgba(116,216,201,.1);--fog-b:rgba(176,30,40,.13);--snum:-160px;--sen:-85px;--sfog:170px;--smark:-265px}
.ch-amber{--tint:rgba(216,196,103,.06);--mcolor:rgba(216,196,103,.55);--fog-a:rgba(216,196,103,.09);--fog-b:rgba(176,30,40,.13);--snum:-150px;--sen:-80px;--sfog:160px;--smark:-250px}

.ch-num{position:absolute;left:50%;top:45%;z-index:0;transform:translate(-50%,-50%) translateY(calc(var(--p,0)*var(--snum,-150px)));font-family:var(--font-serif);font-size:clamp(150px,30vw,330px);font-weight:900;line-height:1;letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px rgba(234,231,225,.085);user-select:none;pointer-events:none;will-change:transform}
.ch-num-en{position:absolute;left:50%;top:23%;z-index:0;transform:translateX(-50%) translateY(calc(var(--p,0)*var(--sen,-80px)));font-family:var(--font-mono);font-size:11px;letter-spacing:.62em;color:var(--ink-faint);opacity:.75;white-space:nowrap;text-indent:.62em;will-change:transform}
.ch-fog{position:absolute;left:-15%;right:-15%;height:42%;bottom:-10%;z-index:1;filter:blur(44px);pointer-events:none;opacity:.5;transform:translateY(calc(var(--p,0)*var(--sfog,160px)));will-change:transform}
.ch-fog-a{background:radial-gradient(46% 60% at 32% 55%,var(--fog-a,rgba(176,30,40,.16)),transparent 70%)}
.ch-fog-b{background:radial-gradient(42% 56% at 68% 50%,var(--fog-b,rgba(139,152,163,.1)),transparent 70%);bottom:-16%}
.ch-marker{position:absolute;right:9%;top:50%;z-index:1;transform:translateY(calc(-50% + var(--p,0)*var(--smark,-250px)));font-family:var(--font-serif);font-size:clamp(60px,10vw,122px);color:transparent;-webkit-text-stroke:1.5px var(--mcolor,rgba(224,52,63,.45));opacity:.9;pointer-events:none;will-change:transform}
.ch-marker.pulse{animation:pulseM 2.6s ease-in-out infinite}
@keyframes pulseM{0%,100%{opacity:.3}50%{opacity:1}}

.ch-content{position:relative;z-index:2;max-width:640px;text-align:center;padding:0 28px;opacity:0;transform:translateY(34px);filter:blur(9px);transition:opacity .9s var(--ease-out) .12s,transform .9s var(--ease-out) .12s,filter .9s var(--ease-out) .12s}
.chapter.is-on .ch-content{opacity:1;transform:none;filter:none}
.ch-kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.44em;color:var(--blood-hi);margin:0 0 22px}
.ch-title{font-family:var(--font-serif);font-size:clamp(34px,5.4vw,58px);font-weight:900;letter-spacing:.1em;line-height:1.18;color:var(--ink);margin:0 0 26px;text-shadow:0 0 36px rgba(224,52,63,.16)}
.chapter.seen .ch-title{animation:titleIn 1.1s var(--ease-out) both}
@keyframes titleIn{0%{opacity:0;transform:translateY(22px);filter:blur(13px)}100%{opacity:1;transform:none;filter:none}}
.ch-body{font-size:16px;line-height:2.05;color:var(--ink-dim);margin:0 auto;max-width:540px}
.ch-note{margin:28px 0 0;font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;color:var(--ink-faint)}
.ch-cta{display:flex;gap:14px;justify-content:center;margin-top:38px;flex-wrap:wrap}

/* ---------- 章节导航导轨 ---------- */
.rail{position:fixed;right:28px;top:50%;transform:translateY(-50%);z-index:60;display:flex;flex-direction:column;gap:14px}
.rail a{position:relative;width:28px;height:28px;display:grid;place-items:center;font-family:var(--font-mono);font-size:10px;color:var(--ink-faint);text-decoration:none;transition:color .3s}
.rail a::before{content:"";position:absolute;width:7px;height:7px;border:1px solid var(--ink-faint);border-radius:50%;transition:background .3s,border-color .3s,box-shadow .3s}
.rail a.is-on{color:var(--blood-hi)}
.rail a.is-on::before{background:var(--blood-hi);border-color:var(--blood-hi);box-shadow:0 0 10px rgba(224,52,63,.85)}

/* ---------- 档案预览 ---------- */
.preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.preview-card{display:flex;flex-direction:column;gap:12px;padding:26px 24px;min-height:200px;text-decoration:none;background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--lv,var(--steel));border-radius:var(--r-md);transition:border-color .35s,box-shadow .35s,transform .35s var(--ease-out)}
.preview-card:hover{border-color:var(--line-2);box-shadow:0 18px 40px rgba(0,0,0,.45)}
.preview-card .case-desc{font-size:13px;line-height:1.95;color:var(--ink-dim);margin:0;flex:1}
.preview-card .go{margin-top:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.3em;color:var(--blood-hi);display:flex;align-items:center;gap:8px}
.preview-card .go .arr{transition:transform .35s var(--ease-out)}
.preview-card:hover .go .arr{transform:translateX(6px)}
.preview-more{text-align:center;margin-top:52px}

/* ---------- 粒子层 ---------- */
#fx{position:fixed;inset:0;z-index:3;pointer-events:none}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .rail{display:none}
}
@media (max-width:760px){
  .hero-corners .c-right,.hero-corners .c-live{display:none}
  .hero-corners .c-left{bottom:104px;left:28px}
  .hero-title{letter-spacing:.05em}
  .hero-en{letter-spacing:.4em;text-indent:.4em}
  .preview-grid{grid-template-columns:1fr}
  .ch-marker{right:2%;opacity:.55;font-size:clamp(46px,13vw,72px)}
  .ch-num{font-size:clamp(110px,42vw,180px)}
  .ch-num-en{top:19%}
}

/* 动效降级（style.css 已含全局兜底，这里显式停用首页专属动画） */
@media (prefers-reduced-motion:reduce){
  .hero-fog,.hero-scroll-line::after,.ch-fog,.ch-marker.pulse{animation:none!important}
  .hero-eye{animation:none!important;filter:drop-shadow(0 0 46px rgba(176,30,40,.42))!important}
  .eye-shake,.vein,.tear-drop{animation:none!important}
  .vein{opacity:.6}
  .ch-content{opacity:1!important;transform:none!important;filter:none!important}
  .chapter.seen .ch-title{animation:none!important}
  #fx{display:none!important}
}