/* ============================================================
   DINO·VERSE 恐龙纪元 — 深蓝科技风
   ============================================================ */
:root{
  --bg0:#02081a;
  --bg1:#04102b;
  --ink:#e9f2ff;
  --dim:#8ba6cf;
  --line:rgba(127,215,255,.14);

  --triad:#ffb15c;   /* 三叠纪 */
  --jura:#3ee6a0;    /* 侏罗纪 */
  --cret:#4dc6ff;    /* 白垩纪 */
  --ext:#ff5d7d;     /* 大灭绝 */
  --wzl:#ffd166;     /* 王子璘 */
  --danger:#ff3b5c;

  --glass:rgba(10,25,55,.42);
  --glass-brt:rgba(16,38,80,.55);

  --f-disp:'Orbitron','Segoe UI','Arial Black',sans-serif;
  --f-cn:'ZCOOL QingKe HuangYou','Microsoft YaHei','PingFang SC',sans-serif;
  --f-body:'Noto Sans SC','Microsoft YaHei','PingFang SC',sans-serif;
  --f-hand:'Zhi Mang Xing','KaiTi','STKaiti','SimSun',serif;
  --f-mono:'Share Tech Mono','Consolas','Courier New',monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  background:
    radial-gradient(1200px 800px at 85% -10%, rgba(30,80,180,.25), transparent 60%),
    radial-gradient(1000px 700px at -10% 40%, rgba(20,60,140,.28), transparent 60%),
    radial-gradient(900px 900px at 90% 90%, rgba(10,90,120,.18), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 45%,var(--bg0));
  color:var(--ink);
  overflow-x:hidden;
  line-height:1.75;
}
::selection{background:rgba(77,198,255,.35);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#04102b}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1d4a8f,#4dc6ff);border-radius:6px;border:2px solid #04102b}

section{scroll-margin-top:84px;position:relative}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- 背景层 ---------- */
#bg-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-4;pointer-events:none}
/* 丝绸光带（deepseek 风）：低分辨率绘制 + CSS 模糊放大 */
#silk-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-3;pointer-events:none;opacity:.92;filter:blur(30px) saturate(1.3)}
/* 互动点阵：鼠标/手指靠近时点亮并轻微推开 */
#dot-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
.nebula{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;z-index:-3;pointer-events:none;mix-blend-mode:screen;animation:nebulaDrift 26s ease-in-out infinite alternate}
.nebula-1{width:52vw;height:52vw;left:-14vw;top:-16vw;background:radial-gradient(circle,rgba(40,90,220,.5),transparent 65%)}
.nebula-2{width:44vw;height:44vw;right:-12vw;top:22vh;background:radial-gradient(circle,rgba(0,150,190,.36),transparent 65%);animation-delay:-9s}
.nebula-3{width:40vw;height:40vw;left:26vw;bottom:-18vw;background:radial-gradient(circle,rgba(90,40,200,.32),transparent 65%);animation-delay:-17s}
@keyframes nebulaDrift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(4vw,3vh,0) scale(1.12)}
}
.grid-floor{
  position:fixed;left:-20%;right:-20%;bottom:-6vh;height:46vh;z-index:-2;pointer-events:none;
  background:
    linear-gradient(rgba(77,198,255,.13) 1px,transparent 1px),
    linear-gradient(90deg,rgba(77,198,255,.13) 1px,transparent 1px);
  background-size:56px 56px;
  transform:perspective(520px) rotateX(62deg);
  transform-origin:center bottom;
  mask-image:linear-gradient(180deg,transparent,#000 45%,#000);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%,#000);
  animation:gridMove 7s linear infinite;
}
@keyframes gridMove{from{background-position:0 0,0 0}to{background-position:0 56px,56px 0}}
.noise{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* ---------- 顶部进度条 & 导航 ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;background:rgba(255,255,255,.05)}
.scroll-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--triad),var(--jura),var(--cret),var(--wzl));box-shadow:0 0 12px rgba(77,198,255,.8);transition:width .1s linear}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,56px);
  transition:padding .5s var(--ease),background .5s,border-color .5s,backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  padding-top:10px;padding-bottom:10px;
  background:rgba(3,10,28,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.nav-logo{font-family:var(--f-disp);font-weight:900;font-size:1.05rem;letter-spacing:.12em;display:flex;align-items:baseline;gap:10px}
.nav-logo-sub{font-family:var(--f-cn);font-size:.85rem;color:var(--dim);letter-spacing:.4em}
.nav-links{display:flex;gap:clamp(12px,3vw,34px)}
.nav-link{
  font-size:.92rem;letter-spacing:.14em;color:var(--dim);position:relative;
  padding:6px 2px;transition:color .35s;white-space:nowrap;
}
.nav-link-num{font-family:var(--f-mono);font-size:.68rem;color:var(--cret);margin-right:6px;opacity:.7}
.nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--cret),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease);
}
.nav-link:hover,.nav-link.active{color:#fff}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1)}
.nav-link-danger:hover{color:var(--danger)}

/* ---------- 通用标题 ---------- */
.sec-head{text-align:center;padding:0 20px;max-width:860px;margin:0 auto clamp(40px,7vh,84px)}
.sec-kicker{font-family:var(--f-mono);color:var(--cret);letter-spacing:.5em;font-size:.8rem;margin-bottom:14px;text-transform:uppercase}
.sec-title{
  font-family:var(--f-cn);font-weight:400;font-size:clamp(2.1rem,5.4vw,3.4rem);
  letter-spacing:.08em;line-height:1.25;
}
.sec-title-dot{color:var(--cret);animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.sec-sub{color:var(--dim);margin-top:14px;font-weight:300;letter-spacing:.06em}
.sec-head::after{
  content:"";display:block;width:120px;height:2px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,var(--cret),transparent);
}

/* ---------- 时代配色 ---------- */
.c-triad{--c:var(--triad);--c-soft:rgba(255,177,92,.16)}
.c-jura{--c:var(--jura);--c-soft:rgba(62,230,160,.16)}
.c-cret{--c:var(--cret);--c-soft:rgba(77,198,255,.16)}
.c-ext{--c:var(--ext);--c-soft:rgba(255,93,125,.16)}
.c-wzl{--c:var(--wzl);--c-soft:rgba(255,209,102,.16)}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;padding:110px 20px 80px;
}
.hero-watermark{
  position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:min(78vw,980px);color:#4dc6ff;opacity:.055;z-index:0;pointer-events:none;
  animation:watermarkFloat 9s ease-in-out infinite alternate;
}
@keyframes watermarkFloat{from{transform:translate(-50%,-52%)}to{transform:translate(-50%,-47%)}}
.hero-inner{position:relative;z-index:2}
.hero-kicker{
  font-family:var(--f-mono);color:var(--dim);letter-spacing:.62em;font-size:clamp(.66rem,1.5vw,.82rem);
  margin-bottom:26px;text-transform:uppercase;
  animation:fadeDown 1.2s var(--ease) both;
}
.hero-title{
  font-family:var(--f-cn);font-weight:400;
  font-size:clamp(1.9rem,6vw,4.2rem);line-height:1.35;letter-spacing:.1em;
  background:linear-gradient(115deg,#bfe6ff 12%,#4dc6ff 34%,#a7f3d0 55%,#ffd166 82%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 6.5s ease-in-out infinite,fadeUp 1.2s .1s var(--ease) both;
  filter:drop-shadow(0 0 26px rgba(77,198,255,.35));
  position:relative;
}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-title.glitching::before,.hero-title.glitching::after{
  content:attr(data-text);position:absolute;inset:0;background:inherit;
  -webkit-background-clip:text;background-clip:text;
}
.hero-title.glitching::before{color:transparent;transform:translate(-4px,-2px);mix-blend-mode:screen;animation:glitchA .38s steps(2) both}
.hero-title.glitching::after{color:transparent;transform:translate(4px,2px);mix-blend-mode:screen;animation:glitchB .38s steps(2) both}
@keyframes glitchA{
  0%{clip-path:inset(8% 0 72% 0)}25%{clip-path:inset(52% 0 22% 0)}
  50%{clip-path:inset(28% 0 48% 0)}75%{clip-path:inset(78% 0 4% 0)}100%{clip-path:inset(38% 0 40% 0)}
}
@keyframes glitchB{
  0%{clip-path:inset(62% 0 18% 0)}25%{clip-path:inset(12% 0 68% 0)}
  50%{clip-path:inset(42% 0 34% 0)}75%{clip-path:inset(4% 0 84% 0)}100%{clip-path:inset(58% 0 24% 0)}
}
.hero-sub-cn{
  font-family:var(--f-cn);font-size:clamp(1rem,2.4vw,1.45rem);
  letter-spacing:.62em;text-indent:.62em;color:rgba(191,230,255,.8);
  margin-top:14px;
  animation:fadeUp 1.2s .18s var(--ease) both;
}
.hero-title .nobreak{display:inline-block}
.hero-en{
  font-family:var(--f-disp);font-weight:700;color:rgba(233,242,255,.5);
  letter-spacing:.7em;font-size:clamp(.72rem,2vw,1.05rem);margin-top:14px;text-indent:.7em;
  animation:fadeUp 1.2s .25s var(--ease) both;
}
.hero-typed{
  margin-top:30px;min-height:2.2em;font-size:clamp(1rem,2.6vw,1.35rem);
  color:#bfe0ff;font-weight:300;letter-spacing:.14em;
  animation:fadeUp 1.2s .4s var(--ease) both;
}
.caret{
  display:inline-block;width:2px;height:1.15em;background:var(--cret);
  vertical-align:-0.18em;margin-left:6px;box-shadow:0 0 8px var(--cret);
  animation:blink 1s steps(2) infinite;
}
.hero-hud{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:44px;animation:fadeUp 1.2s .55s var(--ease) both}
.hud-chip{
  border:1px solid var(--line);border-radius:10px;padding:12px 22px;
  background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;flex-direction:column;gap:2px;min-width:150px;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.hud-chip b{font-family:var(--f-disp);font-size:1rem;color:var(--cret);letter-spacing:.06em}
.hud-chip span{font-size:.74rem;color:var(--dim);letter-spacing:.1em}
.hud-chip:hover{transform:translateY(-4px);border-color:rgba(77,198,255,.5);box-shadow:0 12px 34px -14px rgba(77,198,255,.5)}
.hud-chip-danger b{color:var(--danger)}
.hud-chip-danger:hover{border-color:rgba(255,59,92,.5);box-shadow:0 12px 34px -14px rgba(255,59,92,.5)}
.hero-scroll{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--dim);
}
.hero-scroll-txt{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.4em;text-indent:.4em}
.hero-scroll-mouse{
  width:24px;height:38px;border:1.5px solid rgba(139,166,207,.6);border-radius:14px;
  display:flex;justify-content:center;padding-top:7px;
}
.hero-scroll-mouse i{
  width:3px;height:8px;border-radius:3px;background:var(--cret);box-shadow:0 0 8px var(--cret);
  animation:wheel 1.6s var(--ease) infinite;
}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:none}}

/* ---------- 恐龙 SVG 通用 ---------- */
.dino-svg,.tl-dino svg,.dex-fig svg{
  width:100%;height:auto;color:var(--c,var(--cret));
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c,var(--cret)) 55%,transparent));
  transition:transform .6s var(--ease),filter .6s;
}
.tl-dino:hover svg,.dex-card:hover .dex-fig svg{transform:translateY(-4px) scale(1.03);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--c,var(--cret)) 85%,transparent))}

/* ---------- 时间线 ---------- */
.tl-sec{padding:clamp(90px,14vh,150px) 0 40px}
.tl-wrap{position:relative;max-width:1080px;margin:0 auto;padding:20px clamp(18px,4vw,40px) 60px}
.tl-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(127,215,255,.1);border-radius:2px;overflow:hidden}
.tl-line i{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--triad),var(--jura),var(--cret),var(--ext),var(--wzl));box-shadow:0 0 16px rgba(77,198,255,.65);transition:height .18s linear}
.tl-node{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:clamp(64px,10vh,110px)}
.tl-node:nth-child(odd) .tl-card{grid-column:1;justify-self:end;text-align:right;border-right:3px solid var(--c)}
.tl-node:nth-child(odd) .tl-dinos{justify-content:flex-end}
.tl-node:nth-child(odd) .tl-meta{flex-direction:row-reverse}
.tl-node:nth-child(even) .tl-card{grid-column:2;justify-self:start;border-left:3px solid var(--c)}
.tl-dot{
  position:absolute;left:50%;top:34px;width:16px;height:16px;transform:translateX(-50%) scale(0);
  background:var(--c);border-radius:50%;z-index:2;
  box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 18px var(--c);
  transition:transform .6s var(--ease);
}
.tl-node.in .tl-dot{transform:translateX(-50%) scale(1);animation:dotPulse 2.6s ease-out infinite 1s}
@keyframes dotPulse{
  0%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 18px var(--c)}
  55%{box-shadow:0 0 0 16px color-mix(in srgb,var(--c) 4%,transparent),0 0 10px var(--c)}
  100%{box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent),0 0 18px var(--c)}
}
.tl-card{
  width:min(100%,470px);padding:clamp(20px,3vw,30px);
  background:linear-gradient(155deg,var(--glass-brt),var(--glass));
  border:1px solid var(--line);border-radius:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease),border-color .6s;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.8);
}
.tl-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:0 30px 70px -28px color-mix(in srgb,var(--c) 30%,transparent)}

/* 时间线·滚动逐个显现：卡片从所在侧滑入并带轻微透视，内容再级联浮现 */
:where(.tl-node) .tl-card{
  opacity:0;
  transform:translateX(var(--slide,64px)) rotate(var(--rot,1.2deg));
  transition:opacity .95s var(--ease),transform .95s var(--ease),box-shadow .6s var(--ease),border-color .6s;
  will-change:opacity,transform;
}
.tl-node:nth-child(odd) .tl-card{--slide:-64px;--rot:-1.2deg}
.tl-node:nth-child(even) .tl-card{--slide:64px;--rot:1.2deg}
:where(.tl-node.in) .tl-card{opacity:1;transform:none}
:where(.tl-node) .tl-card > *{
  opacity:0;transform:translateY(22px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}
:where(.tl-node.in) .tl-card > *{opacity:1;transform:none}
:where(.tl-node.in) .tl-badge{transition-delay:.08s}
:where(.tl-node.in) .tl-meta{transition-delay:.16s}
:where(.tl-node.in) .tl-title{transition-delay:.26s}
:where(.tl-node.in) .tl-text{transition-delay:.36s}
:where(.tl-node.in) .tl-asteroid{transition-delay:.3s}
:where(.tl-node.in) .tl-wzl-photo{transition-delay:.32s}
:where(.tl-node.in) .tl-dinos{transition-delay:.46s}
:where(.tl-node.in) .tl-chips{transition-delay:.5s}
.tl-badge{
  display:inline-block;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.18em;
  color:#ff8fa5;border:1px solid rgba(255,59,92,.5);background:rgba(255,59,92,.1);
  padding:5px 12px;border-radius:999px;margin-bottom:14px;
  animation:badgeFlash 2.2s ease-in-out infinite;
}
@keyframes badgeFlash{50%{box-shadow:0 0 18px rgba(255,59,92,.55)}}
.tl-meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;margin-bottom:10px}
.tl-year{font-family:var(--f-disp);font-weight:700;font-size:1.28rem;color:var(--c);letter-spacing:.04em}
.tl-year em{font-style:normal;font-family:var(--f-cn);font-size:.95rem;color:var(--ink);opacity:.85}
.tl-era{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;color:var(--dim)}
.tl-title{font-family:var(--f-cn);font-weight:400;font-size:clamp(1.3rem,2.6vw,1.7rem);letter-spacing:.1em;margin-bottom:10px}
.tl-text{color:var(--dim);font-size:.93rem;font-weight:300;letter-spacing:.04em}
.tl-dinos{display:flex;gap:16px;margin-top:18px;flex-wrap:wrap}
.tl-dino{width:112px;flex:0 0 auto;text-align:center}
.tl-dino:nth-child(2){margin-top:14px}
.tl-dino:nth-child(3){margin-top:28px}
.tl-dino figcaption{font-family:var(--f-cn);font-size:.86rem;letter-spacing:.24em;color:var(--ink);opacity:.85;margin-top:6px}
.tl-asteroid{max-width:210px;margin:14px auto}
.tl-asteroid svg{width:100%;height:auto;color:var(--ext);filter:drop-shadow(0 0 14px rgba(255,93,125,.6));animation:asteroidFloat 4.5s ease-in-out infinite}
@keyframes asteroidFloat{0%,100%{transform:translate(0,0) rotate(0deg)}50%{transform:translate(-7px,6px) rotate(-4deg)}}
.tl-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tl-node:nth-child(odd) .tl-chips{justify-content:flex-end}
.chip{
  font-size:.74rem;letter-spacing:.1em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:5px 13px;background:rgba(8,20,45,.5);
}
.chip-danger{color:#ffb3c0;border-color:rgba(255,59,92,.4);background:rgba(255,59,92,.08)}

/* 时间线·王子璘节点 */
.tl-card-danger{border-color:rgba(255,209,102,.3)}
.tl-wzl-photo{
  position:relative;border-radius:12px;overflow:hidden;margin:16px auto 6px;
  width:min(64%,240px);aspect-ratio:3/4;border:1px solid rgba(255,209,102,.4);
  box-shadow:0 0 30px -6px rgba(255,209,102,.35);
}
.tl-wzl-photo img{width:100%;height:100%;object-fit:cover}
.tl-wzl-scan{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px);
  pointer-events:none;
}
.tl-wzl-scan::after{
  content:"";position:absolute;left:0;right:0;height:26%;top:-30%;
  background:linear-gradient(180deg,transparent,rgba(77,198,255,.28),transparent);
  animation:scanSweep 3.4s linear infinite;
}
@keyframes scanSweep{to{top:110%}}
.tl-wzl-tag{
  position:absolute;left:8px;top:8px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;
  color:#ff8fa5;background:rgba(3,10,28,.7);padding:3px 8px;border-radius:4px;
}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;margin-top:18px;padding:11px 26px;border-radius:10px;
  font-family:var(--f-cn);font-size:.95rem;letter-spacing:.2em;
  border:1px solid color-mix(in srgb,var(--c,var(--cret)) 60%,transparent);
  color:var(--c,var(--cret));background:color-mix(in srgb,var(--c,var(--cret)) 10%,transparent);
  transition:transform .45s var(--ease),box-shadow .45s,background .45s,opacity .8s var(--ease);cursor:pointer;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--c,var(--cret)) 70%,transparent);background:color-mix(in srgb,var(--c,var(--cret)) 20%,transparent)}
.btn-danger{--c:var(--danger)}
.btn-sm{padding:8px 18px;font-size:.85rem;margin-top:14px}

/* ---------- 恐龙图鉴 ---------- */
.dex-sec{padding:clamp(90px,14vh,150px) 0}
.dex-grid{
  max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.dex-card{
  position:relative;border-radius:18px;padding:24px 22px 20px;
  background:linear-gradient(160deg,var(--glass-brt),var(--glass));
  border:1px solid var(--line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow .5s var(--ease),border-color .5s;
  overflow:hidden;
}
.dex-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--c,var(--cret)) 16%,transparent),transparent 65%);
  transition:opacity .5s;
}
.dex-card:hover::before{opacity:1}
.dex-card:hover{border-color:color-mix(in srgb,var(--c,var(--cret)) 45%,transparent);box-shadow:0 30px 70px -30px color-mix(in srgb,var(--c,var(--cret)) 42%,transparent)}
.dex-fig{
  background:radial-gradient(circle at 50% 62%,color-mix(in srgb,var(--c,var(--cret)) 12%,transparent),transparent 70%);
  border-radius:12px;padding:10px 6px 2px;margin-bottom:14px;
}
.dex-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.dex-head h3{font-family:var(--f-cn);font-weight:400;font-size:1.35rem;letter-spacing:.14em}
.dex-en{font-family:var(--f-disp);font-size:.62rem;letter-spacing:.16em;color:var(--c,var(--cret));opacity:.9}
.dex-era{
  margin-left:auto;font-size:.68rem;letter-spacing:.14em;color:var(--dim);
  border:1px solid var(--line);border-radius:999px;padding:2px 10px;
}
.dex-row{display:flex;gap:10px;font-size:.86rem;color:var(--dim);font-weight:300;line-height:1.7;padding:6px 0;border-top:1px dashed rgba(139,166,207,.16)}
.dex-row b{
  flex:0 0 auto;font-family:var(--f-cn);font-weight:400;color:var(--c,var(--cret));
  letter-spacing:.3em;text-indent:.3em;font-size:.85rem;padding-top:2px;
}
/* ??? 档案卡 */
.dex-card-mystery{
  --c:var(--danger);
  border-style:dashed;border-color:rgba(255,59,92,.35);
  display:flex;align-items:center;justify-content:center;min-height:280px;text-align:center;
}
.dex-mystery-noise{
  position:absolute;inset:0;opacity:.14;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.35) 0 1px,transparent 1px 3px);
  animation:mysteryFlicker 3s steps(3) infinite;
}
@keyframes mysteryFlicker{0%,100%{opacity:.14}50%{opacity:.3}}
.dex-mystery-body{position:relative;z-index:1;padding:20px}
.dex-mystery-q{display:block;font-family:var(--f-disp);font-size:2.6rem;font-weight:900;color:var(--danger);letter-spacing:.3em;text-indent:.3em;text-shadow:0 0 24px rgba(255,59,92,.6);animation:mysteryFlicker 2.4s steps(2) infinite}
.dex-card-mystery p{font-size:.85rem;color:var(--dim);font-weight:300;margin-top:10px}
.dex-card-mystery .dex-en{display:block;margin-top:8px}

/* ---------- 异常档案 · 王子璘 ---------- */
.wzl-sec{padding:clamp(100px,15vh,170px) 0 110px;position:relative}
.wzl-warnline{
  height:10px;max-width:1180px;margin:0 auto 60px;border-radius:4px;opacity:.8;
  background:repeating-linear-gradient(-45deg,var(--danger) 0 22px,#1a0a12 22px 44px);
  background:repeating-linear-gradient(-45deg,rgba(255,59,92,.75) 0 22px,rgba(26,10,18,.9) 22px 44px);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  animation:warnShift 12s linear infinite;
}
@keyframes warnShift{to{background-position:124px 0}}
.wzl-kicker{color:var(--danger)}
.wzl-title{color:#ffe9ec;text-shadow:0 0 30px rgba(255,59,92,.35)}
.wzl-sec .sec-head::after{background:linear-gradient(90deg,transparent,var(--danger),transparent)}
.wzl-panel{
  max-width:1080px;margin:0 auto;padding:clamp(24px,4vw,44px);
  display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:clamp(26px,4vw,52px);
  background:linear-gradient(160deg,rgba(30,8,20,.5),rgba(6,14,34,.72));
  border:1px solid rgba(255,59,92,.28);border-radius:22px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 40px 110px -40px rgba(255,59,92,.35),0 30px 80px -50px #000;
  position:relative;
}
.wzl-panel::before{
  content:"";position:absolute;inset:10px;border:1px dashed rgba(255,209,102,.18);border-radius:14px;pointer-events:none;
}
.wzl-photo-wrap{position:relative;align-self:start}
.wzl-photo{
  position:relative;width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:#000;
  border:1px solid rgba(255,209,102,.4);
  box-shadow:0 0 46px -8px rgba(255,209,102,.4);
}
/* 照片区上下两段：上=曹妃甸档案照，下=邢台市目击远摄 */
.wzl-photo-stack{
  position:absolute;inset:0;display:flex;flex-direction:column;
  animation:photoJitter 4.4s steps(1) infinite;
}
.wzl-photo-item{position:relative;flex:1;min-height:0;margin:0;border-bottom:2px solid rgba(255,209,102,.28);overflow:hidden}
.wzl-photo-item:last-child{border-bottom:none}
.wzl-photo-item img{width:100%;height:100%;object-fit:cover;display:block}
/* 上半：整张档案照完整露出（脸部不裁切），两侧用同图模糊虚化补底 */
.wzl-photo-item:first-child{flex:1.22}
.wzl-photo-item:first-child .wzl-photo-bg{
  position:absolute;inset:-10%;
  background:url("assets/wzl.jpg") center 25%/cover no-repeat;
  filter:blur(16px) brightness(.5);
}
.wzl-photo-item:first-child img{position:relative;z-index:1;object-fit:contain;object-position:center}
.wzl-photo-tag{
  position:absolute;left:8px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  color:#ffdc8a;background:rgba(3,10,28,.74);padding:3px 8px;border-radius:4px;
  box-shadow:0 0 10px rgba(0,0,0,.5);
}
.tag-top{top:8px}
.tag-bottom{bottom:8px;color:#ff8fa5}
.rec-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--danger);
  margin-right:5px;vertical-align:1px;animation:blink 1s steps(2) infinite;
}
@keyframes photoJitter{
  0%,90.9%,97.9%,100%{transform:none;filter:none}
  91%{transform:translate(-8px,3px) scaleX(1.015);filter:hue-rotate(-40deg) saturate(2.8)}
  93%{transform:translate(7px,-4px) skewX(-1.2deg);filter:hue-rotate(150deg) saturate(2.2)}
  95%{transform:translate(-4px,1px);filter:saturate(3.2) contrast(1.3)}
  97%{transform:translate(3px,-1px);filter:none}
}
.wzl-photo-scan{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 2px,transparent 2px 6px);
}
.wzl-photo-line{
  position:absolute;left:0;right:0;height:22%;top:-25%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(77,198,255,.3),transparent);
  animation:scanSweep 3.2s linear infinite;
}
.wzl-photo-hud{
  position:absolute;left:0;right:0;display:flex;justify-content:space-between;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:#ffdc8a;
  text-shadow:0 0 8px rgba(255,209,102,.6);pointer-events:none;
}
.wzl-photo-hud.top{top:-30px}
.wzl-photo-hud.bottom{bottom:-30px;color:#ff8fa5;text-shadow:0 0 8px rgba(255,59,92,.6)}
.wzl-stamp{
  position:absolute;right:-14px;top:34%;transform:rotate(12deg) scale(0);
  font-family:var(--f-cn);font-size:1.5rem;letter-spacing:.3em;text-indent:.3em;line-height:1.5;
  color:var(--danger);border:3px solid var(--danger);border-radius:10px;padding:10px 14px;text-align:center;
  text-shadow:0 0 12px rgba(255,59,92,.6);box-shadow:0 0 20px rgba(255,59,92,.35),inset 0 0 20px rgba(255,59,92,.18);
  transition:transform .7s cubic-bezier(.34,1.56,.64,1) .8s;
}
.in .wzl-stamp{transform:rotate(12deg) scale(1)}
.wzl-meta{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;margin-bottom:26px}
.wzl-meta li{
  display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:10px;
  border:1px solid rgba(255,209,102,.16);background:rgba(8,18,40,.5);
}
.wzl-meta span{font-size:.68rem;letter-spacing:.3em;color:var(--dim)}
.wzl-meta b{font-family:var(--f-cn);font-weight:400;font-size:1.02rem;letter-spacing:.12em;color:#ffe3ae}
.wzl-lv{color:var(--danger) !important;text-shadow:0 0 12px rgba(255,59,92,.6)}
.blink-red{color:#ff8fa5 !important;animation:blink 1.4s steps(2) infinite}
.wzl-danger{margin-bottom:26px}
.wzl-danger-head{display:flex;justify-content:space-between;font-size:.8rem;letter-spacing:.2em;color:var(--dim);margin-bottom:8px}
.wzl-danger-head b{font-family:var(--f-disp);color:var(--danger)}
.wzl-danger-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);border:1px solid rgba(255,59,92,.25);overflow:hidden}
.wzl-danger-bar i{
  display:block;height:100%;width:0;border-radius:6px;
  background:linear-gradient(90deg,#ffd166,#ff5d7d,#ff3b5c);
  box-shadow:0 0 16px rgba(255,59,92,.8);
  transition:width 1.8s var(--ease) .4s;
}
.in .wzl-danger-bar i{width:97%}
.wzl-report-wrap{
  border-left:3px solid var(--danger);padding:14px 20px;margin-bottom:22px;
  background:rgba(255,59,92,.06);border-radius:0 12px 12px 0;
}
.wzl-report-label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.24em;color:#ff8fa5;margin-bottom:10px}
.wzl-report{
  font-family:var(--f-hand);font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:2.1;
  color:#ffe9c9;letter-spacing:.06em;min-height:4.2em;
  text-shadow:0 0 18px rgba(255,209,102,.25);
}
.wzl-report::after{
  content:"▌";color:var(--danger);animation:blink .9s steps(2) infinite;margin-left:2px;
}
.wzl-report.done::after{display:none}
.wzl-tags{display:flex;gap:10px;flex-wrap:wrap}

/* ---------- 页脚 ---------- */
.footer{
  text-align:center;padding:70px 20px 46px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(4,12,30,.8));
}
.footer-logo{font-family:var(--f-disp);font-weight:700;letter-spacing:.2em;margin-bottom:14px}
.footer-note{font-size:.82rem;color:var(--dim);font-weight:300;max-width:640px;margin:0 auto 10px}
.footer-copy{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.2em;color:rgba(139,166,207,.5)}

/* ---------- 滚动显现 ---------- */
.reveal{opacity:0;transform:translateY(44px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:calc(var(--i,0)*110ms)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important}
  html{scroll-behavior:auto}
}

/* ---------- 响应式 ---------- */
@media (max-width:960px){
  .dex-grid{grid-template-columns:repeat(2,1fr)}
  .wzl-panel{grid-template-columns:1fr;max-width:640px}
  .wzl-photo-wrap{width:100%;max-width:340px;margin:0 auto}
  .wzl-stamp{right:2px}
}
@media (max-width:760px){
  .hero-title.glitching::before,.hero-title.glitching::after{display:none}
  .nav{padding:14px 18px}
  .nav-logo-sub{display:none}
  .nav-link{font-size:.8rem}
  .nav-link-num{display:none}
  /* 时间线改为左侧单列 */
  .tl-line{left:14px;transform:none}
  .tl-node{grid-template-columns:1fr;padding-left:44px}
  .tl-dot{left:14px;transform:translate(-50%,0) scale(0)}
  .tl-node.in .tl-dot{transform:translate(-50%,0) scale(1)}
  /* 手机端卡片改为自下而上浮现 */
  :where(.tl-node) .tl-card{transform:translateY(56px)}
  :where(.tl-node.in) .tl-card{transform:none}
  .tl-node:nth-child(odd) .tl-card,.tl-node:nth-child(even) .tl-card{grid-column:1;justify-self:stretch;text-align:left;border-left:3px solid var(--c);border-right:none}
  .tl-node:nth-child(odd) .tl-meta{flex-direction:row}
  .tl-node:nth-child(odd) .tl-dinos,.tl-node:nth-child(odd) .tl-chips{justify-content:flex-start}
  .tl-dino:nth-child(2),.tl-dino:nth-child(3){margin-top:0}
  .tl-card{width:100%}
}
@media (max-width:560px){
  .dex-grid{grid-template-columns:1fr}
  .hero-hud{flex-direction:column;align-items:center}
}
@media (max-width:430px){
  .nav{padding:12px 14px}
  .nav-logo{font-size:.88rem;letter-spacing:.05em}
  .nav-logo-sub{display:none}
  .nav-links{gap:12px}
  .nav-link{font-size:.74rem;letter-spacing:.05em}
}