/* ==========================================================================
   进站闸门 v37 —— 「点击进入」的门（2026-09-15）
   --------------------------------------------------------------------------
   本轮三件事：① 取消访问口令，改成点「进入」按钮进站；② 界面与质感重做；
             ③ 加动态（氛围呼吸 / 入场编排 / 点击过场）。

   为什么单独一个文件（不写进 wow.css）：
     `theme_v5.py --revert` 会把 wow.css **整份**还原成上一版，掺进去的功能样式会被顺手抹掉。
     `stats.css` / `detail.css` / `live.css` 同此理。所以本文件在 7 页里都挂在 wow.css **之后**，
     靠「同权重、后出现者胜」覆盖 §10b / §13.2 / §24.8 三层旧样式。

   ⚠️ 由此带来一条必须遵守的约定：本文件里设过的属性，会盖掉 wow.css 在 820px / 560px
      两个断点里写的同名属性 ⇒ **窄屏必须在本文件里重写一遍**（见文件末尾的 @media）。
   ⚠️ 底图几何（`--gx` 位移、`.gate-img` 的 2600px 缩放）**刻意不在这里重写**，继续吃 wow.css §13.2 ——
      那是量过两尊石像瞳孔间距才定的值，别在这儿复制一份、以后两边打架。

   ★★ 特效的分寸（2026-09-13 的教训，必须记住）：
     底图里那扇绿门只有 296×330，**比卡片（436px 宽）还小** —— 所以任何「环形 / 描边」类特效，
     只要放大到能被看见，就只能在卡片四周露出一圈（当年那五层白漩涡就是这么被否掉的：
     CHANGELOG 更新 #004）。⇒ 本文件的氛围光一律做成**无边界柔光**：
     大半径 radial-gradient + 大 blur，只让卡片周围的空气发亮，绝不形成可辨认的形状。
     ⇒ 也刻意**没做**粒子、扫描光带、旋转光环：这张图上它们只会糊成一团，
       而且「点」永远比「光」廉价（用户 09-11 否过扫光带、09-13 否过发光粒子）。

   ★ 入场动画统一用 `animation-fill-mode: backwards`（**不是 both / forwards**）：
     填 both / forwards 会让终值**永久钉住**该属性，后面 `.gate-go:hover` 的 `transform`
     就被动画的终值按死、完全不生效。backwards 只在延迟期内套用首帧（元素不会先闪一下），
     动画一结束就交还正常样式 ⇒ 终态必须在下面的规则里**再声明一次**（本文件已声明）。
   ========================================================================== */

/* ---------- 0) 遮罩层的显隐 ---------- */
/* wow.css §10b：`.gate{display:none}` + `html.wf-locked .gate{display:flex}`。
   过场时 JS 会在**同一帧**里既摘 `wf-locked`（让正文立刻在闸门背后完成布局 ——
   否则量不到尺寸，天赋页的依赖箭头会全画丢）、又加 `.out` 开始淡出。
   那一刻遮罩会失去 `display:flex` ⇒ 淡出根本没机会播。
   所以显隐由 JS **内联** `style.display` 接管（见 js/gate.js 的注释），本文件只管透明度。
   ⚠️ 别在这里给 `.out` 补 `display:flex` —— 会和内联样式形成两处真源，改一处忘一处。 */
.gate.out{opacity:0;pointer-events:none;transition:opacity .46s ease .10s}
/* ★★ v38：走「时光洪流」时**不做**淡出，改成「冲出白光 → 干净切入」。
   为什么放弃淡出（实拍量出来的，别再改回去）：
     `transition-delay:2.05s` 在这条路径上**不可靠** —— 遮罩是在点击那一帧从
     `display:none` 变 `flex` 的，浏览器对"刚出现的元素"不会立刻起过渡，
     实测淡出比预期晚约 350ms 才起步，结果被 JS 的收尾定时器**硬切在中间**：
     用户看到的是「洪流 → 半透明的白雾 → 啪地跳到网站」。
   ⇒ 现在的设计：光幕（.gw-core::before）在最后 18% 推到全白，
     然后在**全白的那一帧**由 JS 摘掉遮罩 —— 白屏切到网站，干脆且不会半途而废。
     （纯白那一帧切走是电影里的标准做法；比雾里溶解更利落。）

   ⚠️⚠️ 这里**必须把 opacity 顶回 1**，不能只写 `transition:none`（第一版就是这么错的）：
     `enter()` 是 `.go` / `.warp` / `.out` 三个类**同一帧**全加上的，而 `.gate.out` 是
     `opacity:0` —— 只把过渡去掉，等于让遮罩在**点下去那一帧立刻全透明**。
     而 `opacity` 是**整棵子树**的有效不透明度：`.gw-neb`(z4) / `.gw-core`(z7) 自己算出来的
     opacity 再漂亮（实测 0.95 / 1.0 全对），父级 opacity:0 一盖，画面上**什么都看不见**。
     实测证据：点击后 0.73s 的截图直接就是**解锁后的首页**，洪流一秒都没露脸；
     诊断脚本却在同一时刻读到 nebOp=0.95 / coreSz=3.6 / veil=1（getComputedStyle 只看
     元素自己的 opacity，看不出被父级吃掉）—— 「样式全对但画面全空」就是这个坑。
   ⇒ 结论：洪流期间遮罩**必须保持不透明**，`pointer-events` 也要留着（挡住背后正文的点击），
     真正把画面交出去的是收尾时 JS 的 `style.display='none'`，不是这里的 opacity。 */
.gate.warp.out,
.gate.lite.out{opacity:1;pointer-events:auto;transition:none}

/* ---------- 1) 门里的邪能绿：无边界柔光，缓缓呼吸 ---------- */
/* ★ 形状：**中心透明、峰值正好落在卡片外沿、然后很快衰减到 0**。
   两版实测的经验（都是量出来 + 看图定的，别凭感觉改）：
     · 第一版「中心最亮的普通光晕」= 等于没加：峰值被卡片整个盖住，
       露在外面的只剩衰减到极低的尾巴（去/留它全帧平均只差 1/255）。
     · 第二版把峰值推到卡片外 ≈70~90px、尺寸 920×880 = 能看见，但成了**一大片绿雾**，
       糊在两尊石像身上 —— 观感是"糊"不是"高级"。
     · 现在这版：光晕只有「卡片 + 每边 ≈70px」，峰值 76% 正好压在卡片边缘，
       100%（≈72px 外）归零。读起来是**卡片被背后的门照亮**（贴身的背光），
       而不是场景里多了一层雾。这也和 v36 时用户认可的那圈 box-shadow 柔光同一路数。
   ——「光可以溢出，但绝不能形成可辨认的几何环，也不能糊成一片雾」是这层的红线。 */
.gate .gate-aura{
  position:absolute;left:50%;top:50%;z-index:2;pointer-events:none;
  width:min(580px,96vw);height:min(590px,76vh);
  transform:translate(-50%,-46%);
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(150,244,116,0) 0%, rgba(150,244,116,0) 52%,
      rgba(162,248,126,.42) 76%, rgba(126,232,104,.16) 90%,
      rgba(90,196,74,0) 100%),
    radial-gradient(closest-side at 50% 62%,
      rgba(255,206,124,0) 58%, rgba(255,206,124,.18) 82%,
      rgba(255,206,124,0) 100%);
  filter:blur(24px);                    /* 再糊一道：76% 那道"峰"就读不出边界了 */
  mix-blend-mode:screen;                /* 只提亮、不覆盖 —— 底图的门是绿的，加成后仍是绿的 */
  opacity:.62;
  animation:gaura 11s ease-in-out infinite;
}
@keyframes gaura{0%,100%{opacity:.46}50%{opacity:.88}}

/* 点击过场用的金色爆闪：全场最亮的一瞬，但**很克制**（峰值 .62，220ms 内回落）
   —— 闪得太狠会刺眼，这个量级刚够"穿门"的顿挫感。 */
.gate .gate-flash{
  position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 46% 40% at 50% 56%,
    rgba(255,240,205,.62) 0%, rgba(255,214,140,.20) 34%, rgba(255,214,140,0) 66%);
}
.gate.go .gate-flash{animation:gflash .66s ease-out both}

/* ---------- 2) 玻璃卡：材质与细节 ---------- */
.gate .gate-box{
  max-width:436px;                      /* 沿用 §24.8 的尺寸 —— 卡片两侧各留 ≈86px 露石像，别再放大 */
  padding:34px 34px 22px;
  background:
    radial-gradient(ellipse 126% 74% at 50% -12%,        /* 顶部渗下来的一点暖光 */
      rgba(255,214,140,.11) 0%, rgba(255,214,140,0) 62%),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022) 32%,rgba(0,0,0,.20)),
    linear-gradient(168deg,rgba(22,26,33,.72),rgba(7,8,11,.90));
  border:1px solid rgba(255,255,255,.13);
  /* ★ `saturate(.66)` 是「高级玻璃」的关键：先把背景的**颜色**抽掉大半再模糊，只留明暗。
     少了它，玻璃会把背景的邪能绿原样带进卡片、整块变绿（v5 第一版就这么挂的，§24.8 记过）。 */
  -webkit-backdrop-filter:blur(36px) saturate(.66);
  backdrop-filter:blur(36px) saturate(.66);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 0 0 1px rgba(0,0,0,.30),
    inset 0 -46px 84px -46px rgba(0,0,0,.62),
    0 1px 2px rgba(0,0,0,.55),
    0 30px 70px -22px rgba(0,0,0,.92),
    0 80px 150px -70px rgba(0,0,0,.95),
    0 0 130px rgba(140,220,150,.07);
  /* 上一条 `inset 0 -46px 84px -46px rgba(0,0,0,.62)` = 底部内侧压暗，卡片才"有厚度"。
     ⚠️ 这句说明**故意写在值列表之外**：本站有记录，把注释塞进声明的值列表中间，
        本机 Edge 会把**整条规则**丢掉（不是忽略注释）。 */
  /* ★ 内圈一条若有若无的金线：`outline` + 负 offset 一行搞定，不用再塞一个 DOM 节点 */
  outline:1px solid rgba(201,169,97,.15);
  outline-offset:-5px;
  animation:gin .70s cubic-bezier(.22,1,.36,1) backwards;
}

/* 顶上一条极细的暖高光 —— "这块玻璃被光照到"的全部证据，成本最低、收益最高 */
.gate .gate-box::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  border:0;width:auto;opacity:.8;
  background:linear-gradient(90deg,transparent,
    rgba(255,255,255,.50) 20%,rgba(255,244,214,.80) 50%,
    rgba(255,255,255,.50) 80%,transparent);
}
/* 卡片内侧的绿色微光，极缓呼吸（15s，幅度只 .34→.86 不透明度）—— 「门在卡背后活着」 */
.gate .gate-box::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:0;width:auto;height:auto;opacity:.45;
  background:radial-gradient(ellipse 76% 66% at 50% 54%,rgba(150,230,160,.11),transparent 72%);
  animation:gbreath 15s ease-in-out 1.2s infinite;
}
@keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}}

/* ---------- 3) 内容：入场编排（依次浮现）---------- */
/* 纯 CSS 编排，JS 不参与 —— 顺序：logo → 标题 → 英文 → 金线 → 说明 → 按钮 → 品牌 → 备注。
   总时长 ≈ 1.15s，最后一项落位时"页面已经站好了"，不会让人等。 */
.gate .gate-logo{
  display:block;width:112px;height:auto;margin:0 auto 12px;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.88)) drop-shadow(0 0 28px rgba(201,169,97,.30));
  animation:gup .58s cubic-bezier(.22,1,.36,1) .05s backwards;
}
.gate h1,
.gate .gate-title{
  margin:0;font-family:var(--f-title);font-size:24px;letter-spacing:4px;
  /* ⚠️ `background` 是简写属性，会顺手把 `background-clip` 重置回 border-box ——
     本站有 4 处「渐变 + 文字裁切」的标题，凡重写 background 都必须把裁切补回来，
     否则 color:transparent 还在、文字却没了，只剩一条实心金条（v5 第一版就这么挂的）。
     ⚠️⚠️ 上面这条注释**必须写在选择器之外**：塞进声明的值列表中间，本机 Edge 会把整条规则丢掉。 */
  /* ★ 渐变做宽到 220%，再让 background-position 极缓来回走（9s 一个来回）——
     这就是标题上那道"金属流光"。动的是 `background-position`，与入场动画的
     opacity/transform 完全不抢属性，所以两个 animation 可以并存。 */
  background:linear-gradient(100deg,#fdf7e6 0%,#ecd9a6 28%,#fff8e4 43%,
                             #e6cd90 60%,#c8a659 78%,#b99a4e 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.85));
  animation:gup .58s cubic-bezier(.22,1,.36,1) .12s backwards,
            gtitle 9s ease-in-out 1.6s infinite;
}
.gate .gate-en{
  margin-top:7px;font-size:9.5px;letter-spacing:3.4px;color:rgba(255,255,255,.42);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .18s backwards;
}
/* 金线：从中间向两侧展开（入场一次），之后保持静止 —— 这是「结构线自身的展开」，不是扫光 */
.gate .gate-rule{
  position:relative;width:74px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.80),transparent);
  animation:grule .85s cubic-bezier(.22,1,.36,1) .24s backwards;
}
.gate .gate-tip{
  margin-top:13px;font-size:13px;color:rgba(255,255,255,.62);line-height:1.72;
  animation:gup .58s cubic-bezier(.22,1,.36,1) .32s backwards;
}

/* ---------- 4) 主行动按钮（整站唯一入口，必须让人想按） ---------- */
/* ★ 去掉箭头后，「进入」两个字必须真的居中（2026-09-15 用户口径：去掉箭头 + 往中间挪）。
   坑：`letter-spacing` 会在**每个字后面**都加一份空隙，最后一个字后面那份没有字形去填，
   于是文字的墨迹比盒子中心偏左 half(字距)。
   我先用 `text-indent:calc(--ls / 2)` 补，**实测仍偏左 6.5px**（补偿量不等于偏移量，
   还掺了字形本身的边距）⇒ 换成与字体无关的做法：
   在承载文字的那个 span 上给**等量的负外边距**，把末尾那份空隙从盒宽里减掉，
   盒子中心就与墨迹中心重合，剩下的交给 flex 居中即可。
   ⚠️ 负外边距必须加在**同时写着 letter-spacing 的那个元素**上，加到父级无效。 */
.gate .gate-go{
  --ls:8px;
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;margin:20px 0 0;padding:15px 0;
  font-family:var(--f-title);font-size:17px;
  color:#2a1c08;cursor:pointer;
  background:linear-gradient(180deg,#f5e0a2,#d0aa52 52%,#a37c26);
  border:1px solid rgba(255,246,220,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.82),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 22px rgba(255,196,110,.18);
  animation:gup .60s cubic-bezier(.22,1,.36,1) .42s backwards,
            ggo 6s ease-in-out 1.5s infinite;   /* 两项不抢同一属性（gup 只动 opacity/transform）✅ */
  transition:filter .18s ease,transform .12s ease;
}
/* 呼吸的金色外发光：这是"邀请点击"的全部语言 —— 不靠箭头跳动、不靠文字闪 */
@keyframes ggo{
  0%,100%{box-shadow:
    inset 0 1px 0 rgba(255,253,240,.82),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 18px rgba(255,196,110,.14)}
  50%{box-shadow:
    inset 0 1px 0 rgba(255,253,240,.88),
    inset 0 -13px 24px -15px rgba(90,60,10,.62),
    0 1px 2px rgba(0,0,0,.50),
    0 12px 30px -14px rgba(0,0,0,.85),
    0 0 44px rgba(255,196,110,.46)}
}
.gate .gate-go:hover{
  filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,253,240,.92),
    0 1px 2px rgba(0,0,0,.50),
    0 16px 34px -14px rgba(0,0,0,.85),
    0 0 50px rgba(255,196,110,.50);
}
.gate .gate-go:active{transform:translateY(1px);filter:brightness(.97)}
.gate .gate-go:focus-visible{outline:2px solid rgba(255,214,140,.92);outline-offset:3px}
.gate .gate-go .gg-txt{
  letter-spacing:var(--ls);
  margin-right:calc(var(--ls) * -1);   /* 抵消末字后面那份空隙 ⇒ 盒中心 == 墨迹中心 */
}

/* ---------- 5) 站点板块介绍（2026-09-19 v102 改；原「品牌引流块」） ----------
   血染要求：登录窗里不再出现微信 / 抖音 / B站，换成「网站板块介绍 + PVP+PVE 攻略全覆盖」。
   ⚠️ 引流信息**没有消失** —— 它仍在正文最前的 `.cbar` 与每页页脚，只是不占登录窗这一屏。
   ⚠️ 原来那条 `.gate-foot b{color:#e7cf9b}`（给微信号做金色高亮）已删：新文案里没有 <b>，
      留着就是死规则。以后要在门脚突出某个词，再加回来。 ---------- */
.gate .gate-foot{
  margin-top:16px;padding-top:13px;border-top:1px solid rgba(201,169,97,.20);
  font-size:12px;letter-spacing:1.4px;color:rgba(255,255,255,.55);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .52s backwards;
}
.gate .gate-note{
  margin-top:7px;font-size:10.5px;letter-spacing:.8px;color:rgba(255,255,255,.34);
  animation:gup .58s cubic-bezier(.22,1,.36,1) .58s backwards;
}

/* ---------- 6) 过场第 1 段：点「进入」→ 卡片被吸进中心的光核 ---------- */
/* 权重（0,3,0）> 上面所有 `.gate .gate-box`（0,2,0），所以不用 !important 就能接管。
   ⚠️ 这里用 `both` 是对的：过场结束后卡片就该**停在**透明态，不该回弹。
   ★ v38：卡片从「向上飘走」改成「被吸进画面中心的光核」（scale 缩小）——
     它是通往后面那 2 秒「时光洪流」的入口，飘走的话方向就反了。 */
.gate.go .gate-box{animation:gout .45s cubic-bezier(.5,0,.75,.2) both}
.gate.go .gate-aura{animation:gaura-out .70s ease-out both}
.gate.go .gate-img{animation:gzoom 2.05s cubic-bezier(.36,0,.72,.2) both}
.gate.go .gate-go{pointer-events:none}

/* ★★ 层叠（v38 重排：洪流要能插在「场景」与「卡片」之间，光核又要压在最上面）
     .gate-art   自动   底图
     .gate-scrim    3    压暗遮罩
     .gate-warp     4    ★ 星云 + 星流拉丝（洪流的"底层"）
     .gate-box      5    闸门卡（比洪流高 ⇒ 第一段里卡片仍看得见）
     .gate-flash    6    金色爆闪
     .gate-core     7    ★ 穿越光核（最后铺满屏幕的那一下，必须在最顶）
   ⚠️ `.gate-box` 从 wow.css 的 4 提到 5，就是为了给洪流让位。 */
.gate .gate-box{z-index:5}
.gate .gate-flash{z-index:6}

@keyframes gout{                            /* 卡片被吸进中心的光核（方向朝内，不是朝上飘） */
  from{opacity:1;transform:none}
  55%{opacity:.88;transform:scale(.90)}
  to{opacity:0;transform:scale(.62)}
}
@keyframes gaura-out{                       /* 门里的光"炸开"一下再退：穿门的顿挫感全靠它 */
  0%{opacity:.55;transform:translate(-50%,-46%) scale(1)}
  30%{opacity:1;transform:translate(-50%,-46%) scale(1.10)}
  100%{opacity:0;transform:translate(-50%,-46%) scale(1.34)}
}
@keyframes gflash{0%{opacity:0}12%{opacity:.62}100%{opacity:0}}
/* 底图持续推近 —— 纯 transform（合成层），不会每帧重绘那张 2600px 的大图。
   ★ v38：从「1.0s 推 5.5%」拉长到「2.05s 推 14%」—— 它要和洪流同步走完整段，
     变成"我们一直在往门里钻"，而不是抖一下就完。 */
@keyframes gzoom{
  from{transform:translate(calc(-50% + var(--gx)),-50%) scale(1)}
  to{transform:translate(calc(-50% + var(--gx)),-50%) scale(1.26)}
}

/* ---------- 7) 动画函数 ---------- */
/* ⚠️ 这里**故意**把 `gin` / `gbreath` 重写了一遍（值与 wow.css §10b / §24.8 完全一致）——
   本文件的定位是"闸门的完整样式"，要能扛住主题回滚把 wow.css 整份换掉。
   改这两个关键帧时记得**两边一起改**，否则会出现"平时生效的是本文件、回滚后变成旧值"。 */
@keyframes gin{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes gbreath{0%,100%{opacity:.34}50%{opacity:.92}}
@keyframes gup{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:none}}
@keyframes grule{from{width:0;opacity:0}to{width:74px;opacity:1}}
@keyframes gtitle{0%,100%{background-position:0% 0}50%{background-position:100% 0}}

/* ==========================================================================
   8) ★★ 穿越宇宙时光洪流（v38，2026-09-15 用户要求）

   用户原话：「用户点击进入后，会有一个穿越宇宙时光洪流的特效的感觉，然后才进入到网站里面，
             这个时间控制在 3 秒以内」。

   时间轴（实测「点下 → 进站」2.64s，需求 ≤3s，留 0.36s 余量给慢机器）：
     0.00s       点下「进入」
     0.00–0.60s  卡片被吸进中心的光核（gout）+ 金色爆闪（gflash）+ 门光炸开（gaura-out）
     0.00–2.05s  时光洪流：星云旋进（gwNeb）+ 星流拉丝加速（gwPush / gwFly）+ 光核长大（gwCoreSz）
                 ＋ 底图持续推近（gzoom：从 v37 的 1.0s / 5.5% 拉长到 2.05s / 26%，
                    它要和洪流同步走完整段，才读成「一直在往门里钻」）
     2.05s       光幕（gwVeil）从 80% 起爆、100% 铺满全白 —— 这一帧就是「冲出隧道口」
     ~2.38s      ★ 由**动画自己报完成**（gwVeil 的 animationend / WAAPI finished）触发摘遮罩，
                 全白**硬切**到网站（快得看不见切换，就是那道「白光」）
   ⚠️⚠️ 别把收尾改回 `setTimeout` 卡秒：`.gate-warp` 从 `display:none` 变 `block` 之后，
      CSS 动画时钟要晚 ~330ms 才起步（实测 327~340ms）。早期用「点击 + 1.8s」收尾，
      正好把 gwVeil 的最后一段砍掉 ⇒ 用户要的「冲出白光」没了。
   ★ v39：以上是**完整档**的时间轴。系统开了「减少动态效果」的用户拿到的是**轻量档**
     （1.30s，只有光核小幅胀开 + 淡到暖白；规则在 §10.1，那是本文件最后一节）。
     两档都由「动画自己报完成」收尾（gwVeil / glVeil 任一播完）。
   ⚠️ 改时间要**同时改三处**：本文件的三处 2.05s、`js/gate.js` 的 `T_WARP`（仅说明/校验）
      与 `T_HIDE_MAX`（硬上限兜底，必须 < 需求时长）。

   三层（都在 .gate 的层叠上下文里按 z-index 定位，见 §6 的层叠表）：
     .gw-neb    4  宇宙介质：靛紫 + 鎏金 + 深蓝 + 暖白四团柔光，逐渐放大并反向旋进
                    （⚠️ 别加邪能绿/品红：底图那扇门本身是高饱和绿，两绿相加成灰绿泥）
     .gw-streaks 4 星流拉丝：JS 生成的细光条 + 星点，从中心径向飞出（"穿越"的核心信号）
     .gw-core   7  穿越光核：中心光球，最后绽放到铺满屏幕（全白/鎏金）＝ 冲出去的那一下

   ★★ 三层全部用 `position:fixed`（不是 absolute），并且**不要包在一个"有定位"的容器里**：
      · 为什么不是 absolute：`inset:0` 对绝对定位指的是**padding box**，而 `.gate` 有 26px/22px
        的内边距 ⇒ 洪流会在四周留出 22~26px 空边，最后"全白"那一瞬会露出一圈黑框（`#030509`）。
        `fixed` 的包含块是视口，正好铺满。
      · 为什么不需要外层裁剪：固定定位的后代**不计入任何祖先的可滚动溢出**，
        所以不会让 `.gate`（它是 `overflow:auto`）冒出滚动条。
   ⚠️⚠️ 承上，`.gate-warp` 这个容器**只做显隐开关、不定位、不设 z-index**：
      `position:fixed` 本身、以及 flex 子项上的 `z-index != auto`，都会**无条件建立层叠上下文**
      —— 一旦建了，`.gw-core` 的 z-index:7 就被**锁在层内**，永远压不过 `.gate-box`（z-index:5），
      光核盖不住卡片。同理也别给它加 `transform` / `opacity` / `filter` / `will-change`。
      要动的东西一律加在三个子层上。
   ========================================================================== */
.gate .gate-warp{display:none}           /* 平时完全不参与渲染 */
.gate.warp .gate-warp,
.gate.lite .gate-warp{display:block}     /* 只有点了「进入」才挂上（lite = 关动效档的轻量过场，见 §10.1） */
/* 洪流期间锁住页面滚动（我们已经摘了 wf-locked，否则底下能滑） */
html.wf-warp{overflow:hidden}

/* --- 8.1 宇宙介质：柔光，放大 + 旋进 --- */
/* ★ 第一版只给四团、透明度也保守，实拍发现「洪流」被那扇绿门压住了 ——
   介质必须先到场（10% 就到 .95），颜色要再厚一点，画面才像"进了宇宙"而不是"站在门口"。
   ★★ 第二版实拍（_tmp/_warpbig 全尺寸关键帧）又调了两处，都是"看得出错在哪"的：
     · **删掉邪能绿和品红**。底图那扇门本身就是高饱和绿，再加绿团 ⇒ 两绿相加成灰绿泥；
       品红压在暗底上读起来像淤青。现在只留 **靛紫（主）+ 鎏金（暖）+ 深蓝（冷）+ 暖白（心）**，
       正好是站点的「暗夜鎏金」调子，也不会跟门抢色。
     · blur 26px → 20px：26px 那档几团光糊成一片、看不出"旋进"，20px 还留着方向感；
       顺带省一道全屏模糊的开销。 */
.gate .gw-neb{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 58% 48% at 50% 50%, rgba(106,92,255,.52), rgba(106,92,255,0) 70%),
    radial-gradient(ellipse 44% 38% at 27% 31%, rgba(201,169,97,.44), rgba(201,169,97,0) 72%),
    radial-gradient(ellipse 68% 58% at 62% 21%, rgba(38,120,190,.40), rgba(38,120,190,0) 76%),
    radial-gradient(ellipse 38% 32% at 50% 50%, rgba(255,238,205,.26), rgba(255,238,205,0) 74%);
  filter:blur(20px);                     /* 让几团光互相融开，读起来是「介质」不是几个圆斑 */
  mix-blend-mode:screen;
  transform-origin:50% 50%;
  will-change:transform,opacity;
}
.gate.warp .gw-neb{animation:gwNeb 2.05s cubic-bezier(.42,0,.78,.30) both}

/* --- 8.2 星流拉丝：容器负责"加速"，每条光条自己负责"飞 --- */
/* ★★ 这里的两处修正是这一版最要紧的（第一版实拍读起来像"玻璃划痕 / 头发丝"）：
   ① `mix-blend-mode:screen` + 容器级 `filter:blur()`：**细白线在暗底上画出的是"灰线"**，
      只有用加色混合把线"加"到背景的亮度上、再糊一道晕，它才读成**光**而不是"划痕"。
      光晕放在容器上（一道全屏模糊），而不是给 100 多个子元素各加 box-shadow
      —— 后者每帧要几百次阴影绘制，慢机器直接掉帧。
   ② `mask-image` 径向遮罩：**把四角滤掉**。拉丝散到画面边缘时，人的第一反应是
      "屏幕脏了/裂了"；收进一个以中心为圆心的环带里，才读成**从中间冲出去的隧道壁**。
      注意用的是 `closest-side` 圆 —— 容器同时还在 scale(1→2.75)，
      而 mask 是在元素的**本地坐标系**里生效、再一起被 transform 放大，
      所以这个环带会跟着一起长大（这正是要的效果：越飞隧道越开阔）。 */
.gate .gw-streaks{
  position:fixed;inset:0;z-index:4;pointer-events:none;opacity:0;
  transform-origin:50% 50%;
  mix-blend-mode:screen;
  /* ★ 光晕要**够狠**：1.4px 在 1440px 宽的画面上等于没糊，实拍出来还是一条"细白线"。
     4px 又糊过头（实拍变成若有若无的雾痕，穿越感全丢）；2.6px + 4px 宽是这个分辨率的甜点：
     糊出约 9px 的柔光束，边缘还是软的、但看得出是一道光。 */
  filter:blur(2.6px);
  -webkit-mask-image:radial-gradient(closest-side,transparent 0%,#000 10%,#000 74%,transparent 100%);
  mask-image:radial-gradient(closest-side,transparent 0%,#000 10%,#000 74%,transparent 100%);
  will-change:transform,opacity;
}
.gate.warp .gw-streaks{animation:gwPush 2.05s cubic-bezier(.42,0,.78,.30) both}
/* ★ 加速感全靠这层：容器从 1 放大到 2.75（用了 ease-in 曲线 ⇒ 越到后面越快），
   子元素被一起放大 ⇒ 它们的"飞行距离"也被同步拉长。再叠 11° 旋转做"时光漩涡"。
   前 18% 不出（卡片还在被吸走，此刻叠拉丝会让卡片像"脏了"），30% 到满。 */
@keyframes gwPush{
  0%{opacity:0;transform:scale(1) rotate(0deg)}
  18%{opacity:0}
  32%{opacity:1}
  86%{opacity:.9}
  100%{opacity:0;transform:scale(2.75) rotate(11deg)}
}
/* 单条光条：底端固定在画面中心，向外指 + 向外飞。
   几何说明：`margin-top:calc(var(--len) * -1)` 把光条的**下边缘**放到中心点，
   `transform-origin:50% 100%` 让旋转/缩放的轴心正好落在这个中心点上 ——
   于是 `rotate(角度) translateY(-r)` 就是「沿该角度向外推 r 像素」。
   `--o` 是每条自己的亮度（0.45~1）：近的亮、远的暗 ⇒ 一眼看出纵深，
   不用真的做两层（这是最便宜的"景深"）。 */
.gate .gw-streaks i{
  position:absolute;left:50%;top:50%;
  width:4px;height:var(--len);
  margin-left:-2px;margin-top:calc(var(--len) * -1);
  transform-origin:50% 100%;
  border-radius:2px;
  /* ★ 渐变的落点要**长**（透明段占到 40%）—— 短渐变会让每条拉丝读成"一根白线"，
     长渐变才有"拖影"的观感。末端用纯白：配合容器的 screen 混色与 blur，尾巴是一个亮点 = 光。 */
  background:linear-gradient(to top,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 10%,
    var(--c) 64%,#fff 100%);
  opacity:var(--o);
  will-change:transform,opacity;
  animation:gwFly var(--dur) linear infinite;
  animation-delay:var(--d);
}
/* 星点：同一套几何，只是短到看不出发光条 —— 它们是"宇宙"里的星星，不是速度线 */
.gate .gw-streaks i.dot{
  width:3px;height:3px;margin-left:-1.5px;margin-top:-1.5px;border-radius:50%;
  background:var(--c);
}
/* ⚠️ 关键帧里的 opacity 必须写成 `var(--o)` / `calc(var(--o) * .95)` ——
   直接写 1 会把每条光条自己的亮度（--o，见上）整个盖掉，景深就没了。
   ★ 首尾的 scaleY 从 .45→2 提到 **.3→3.0**：这是"透视拉伸"最省的做法 ——
     越飞越长的拉丝才像在往前冲，等长的话读起来只是"一堆线在平移"。 */
@keyframes gwFly{
  0%{transform:rotate(var(--a)) translateY(calc(var(--r0) * -1)) scaleY(.3);opacity:0}
  12%{opacity:var(--o)}
  62%{opacity:calc(var(--o) * .95)}
  100%{transform:rotate(var(--a)) translateY(-1180px) scaleY(3);opacity:0}
}

/* --- 8.2b 收拢视线的暗角：越飞越聚拢 --- */
/* ★ 为什么要这一层（全尺寸实拍看出来的）：洪流前半段的问题不是"不够亮"，而是
   **底图那扇绿门（一块硬边的纯绿矩形）和两尊石像还在跟中心的光抢戏** ——
   画面读起来是"一幅画在发光"，而不是"我们在往光里冲"。
   加一层以中心为圆心的暗角把场景压下去，视线自然被收进中心那点光。
   ⚠️ z-index 给 **3**（在 `.gate-scrim` 同层、洪流三层之下）：这样
      **底座场景变暗、而压在它上面的紫金星云与光核照样亮着** ⇒ 观感是"世界退去、光留下来"，
      正是要的效果。给到 4 以上就会把星云也一起压暗（那才是错的）。
   ⚠️ 做在 `.gate-warp::before` 上，**不给 `.gate-warp` 本身加任何定位/transform**
      （§8 那条层叠红线的红线不能破）。`.gate-warp` 是 `z-index:auto` 的静态 flex 子项，
      不建立层叠上下文，所以里面这个 `position:fixed` 伪元素会落在 `.gate` 的层叠上下文里、
      按自己的 z-index 排 —— 这是能安全加层的原因。 */
.gate .gate-warp::before{
  content:"";position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 80% 76% at 50% 50%,
    rgba(3,5,9,0) 0%, rgba(3,5,9,0) 32%, rgba(3,5,9,.40) 60%,
    rgba(3,5,9,.80) 84%, rgba(3,5,9,.93) 100%);
}
.gate.warp .gate-warp::before{animation:gvig 2.05s cubic-bezier(.4,0,.7,.3) both}
@keyframes gvig{0%{opacity:0} 34%{opacity:.26} 68%{opacity:.62} 100%{opacity:.92}}

/* --- 8.3 穿越光核：最后铺满屏幕的那一下 --- */
/* 内层 `::after` 才是光球本体（外框只负责居中）。分两个元素是因为
   两个动画要各动各的：外层动 opacity、内层动 transform —— 同一个元素上两项动画
   只要碰的不是同一属性也合法，但拆开更好读、也更好单独调。 */
.gate .gw-core{
  position:fixed;inset:0;z-index:7;pointer-events:none;opacity:0;
  display:flex;align-items:center;justify-content:center;
}
/* 光幕：最后 20% 把整屏推到全白 —— 「切入网站」就是切在**全白这一帧**上。
   它和光核同层（z-index:7），所以盖得住卡片、金色爆闪和洪流。
   取暖白（#fffdf7 → #ffeece）而不是纯 #fff：和站点的鎏金调子接得上，切走时不刺眼。 */
.gate .gw-core::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 122% 122% at 50% 50%,
    #fffdf7 0%, #fff7e6 56%, #ffeece 100%);
  opacity:0;
}
.gate .gw-core::after{
  content:"";display:block;
  width:min(74vmax,1300px);aspect-ratio:1;border-radius:50%;
  /* ★★ 第一版这里是"外围收进邪能绿"的半透明白球 —— 全尺寸实拍（_tmp/_warpbig）读起来
     是一团**灰绿棉絮**，完全不像光源。两个原因，一起改掉：
       ① 外层带绿 ⇒ 叠在底图那扇绿门上，白 + 绿 = 脏灰，越看越像雾；
       ② 元素 opacity 起步太低（46% 才 .46）⇒ 大面积半透明 = 雾。
     现在：**去掉绿色，改成暖白 → 鎏金**（和站点调子一致，也不跟门抢色），
     并把「先变亮、再变大」写进关键帧 —— 小球先做成实心亮点，长大了才铺开。 */
  background:radial-gradient(closest-side,
    #ffffff 0%, #ffffff 15%, rgba(255,250,238,.96) 30%,
    rgba(255,236,190,.76) 47%, rgba(255,214,140,.34) 65%,
    rgba(255,196,110,.10) 84%, rgba(255,196,110,0) 100%);
  transform:scale(.03);
  will-change:transform;
}
.gate.warp .gw-core{animation:gwCoreOp 2.05s cubic-bezier(.4,0,.7,.3) both}
.gate.warp .gw-core::before{animation:gwVeil 2.05s cubic-bezier(.6,0,.9,.45) both}
.gate.warp .gw-core::after{animation:gwCoreSz 2.05s cubic-bezier(.5,0,.9,.35) both}
@keyframes gwVeil{0%,80%{opacity:0} 96%{opacity:.94} 100%{opacity:1}}
@keyframes gwNeb{
  0%{opacity:0;transform:scale(.85) rotate(0deg)}
  10%{opacity:.95}
  64%{opacity:.9}
  100%{opacity:0;transform:scale(2.5) rotate(-9deg)}
}
/* 光核：从 22% 就透出来 —— 第二版实拍发现"中心一直是个黑洞"，
   看着像掉进洞里而不是**往光里飞**。现在全程都在，最后才炸开铺满。
   ★ 第三版把亮度曲线整体提前、并且"先亮后大"：34% 时已经是 .66 的实心亮核（尺寸才 .14），
     58% 才铺到半屏。这样它在前半段读起来是**一颗光**，而不是一团雾。 */
@keyframes gwCoreOp{
  0%{opacity:0} 18%{opacity:.34} 34%{opacity:.66} 52%{opacity:.90} 72%{opacity:.98} 100%{opacity:1}
}
@keyframes gwCoreSz{
  0%{transform:scale(.04)} 34%{transform:scale(.14)}
  58%{transform:scale(.52)} 80%{transform:scale(1.30)} 100%{transform:scale(3.6)}
}

/* ---------- 9) 窄屏 ---------- */
/* ⚠️ 必须在这里重写：本文件的基础规则会盖掉 wow.css 在 820 / 560 断点写的同名属性。 */
@media(max-width:820px){
  .gate .gate-box{padding:26px 22px 18px}
  .gate .gate-title{font-size:21px;letter-spacing:3px}
  .gate .gate-logo{width:96px}
  .gate .gate-go{padding:14px 0;font-size:16px;--ls:6px}
  .gate .gate-tip{font-size:12.5px;line-height:1.68}
}
@media(max-width:560px){
  .gate{padding:20px 16px}
  .gate .gate-box{padding:22px 18px 15px}
  .gate .gate-title{font-size:19px;letter-spacing:2px}
  .gate .gate-logo{width:86px;margin-bottom:10px}
  .gate .gate-en{font-size:9px;letter-spacing:2.6px}
  .gate .gate-go{padding:13px 0;font-size:15.5px;--ls:5px}
  .gate .gate-tip{font-size:12px;margin-top:11px}
  .gate .gate-foot{font-size:11.5px;margin-top:14px}
  .gate .gate-note{font-size:10px;line-height:1.7}
  .gate .gate-aura{width:112vw;height:60vh}
  /* 手机：光核基数调大一点，避免"全白"那一下盖不满 19.5:9 的长屏 */
  .gate .gw-core::after{width:118vmax}
  .gate .gw-neb{filter:blur(20px)}       /* 小屏像素少，模糊半径太大反而糊 */
}

/* ---------- 10) 尊重「减少动态效果」 ---------- */
/* 关掉动画后必须仍然**看得见**：上面的入场动画全用 backwards（不填终值），
   所以各组件的正常声明就是终态（opacity 默认 1、金线 width:74px）—— 关掉动画不会白屏。
   ★★ v39：整条规则都加了 `html:where(:not(.wf-full))` 前缀 —— 那是 `?fx=full` 逃生口
     （js/gate.js 在 URL 上看到 fx=full 就给 <html> 挂 wf-full）。
     起因（实测抓出来的）：只翻 JS 的标志位是不够的 —— 这条 media 查询**照样生效**，
     于是 `?fx=full` 拿到的是「黑屏 2.9 秒（T_HIDE_MAX 硬上限）然后啪地跳进去」，
     比轻量档还差。CSS 读不到 URL，只能用「类 + :not()」把整条媒体查询让开。
   ⚠️⚠️ 守卫必须写成 `:where(:not(.wf-full))`，**不能**写成 `:not(.wf-full)`：
     `html:not(.wf-full) .gate .gate-warp` 的特异性是 (0,3,1)，
     而 §10.1 里那条 `.gate.lite .gate-warp{display:block}` 是 (0,3,0)
     —— 多出来的那 1 个**类型**让守卫反超，轻量档的容器被 `display:none!important` 盖掉：
     声明里 glVeil 还在、`::before` 的 opacity 却恒为 0，整段过场只剩一片黑。
     （实测连跑三遍全复现；`getComputedStyle(core,'::before').animationName` 会骗过你 ——
      它读的是"声明了什么"，不管元素是否 display:none。）
     `:where()` 的特异性是 **0**，守卫因此完全不参与比较。 */
@media(prefers-reduced-motion:reduce){
  html:where(:not(.wf-full)) .gate,
  html:where(:not(.wf-full)) .gate *{animation:none!important;transition:none!important}
  html:where(:not(.wf-full)) .gate.go .gate-box{opacity:0}   /* 卡片仍要"退出"，否则会挡住正文 */
  html:where(:not(.wf-full)) .gate .gate-warp{display:none!important}  /* 时光洪流整层不出现 */
}

/* ---------- 10.1) ★★ 轻量过场（v39）：在上面那条「一刀切」里开一个口子 ---------- */
/* 为什么必须有这一节（血染 2026-09-15 亲历，别再删）：
   §10 为了尊重「减少动态效果」，把 `.gate *` 的动画**全部** !important 干掉、
   又把 `.gate-warp` 整层 display:none。结果是：关动效的用户点「进入」时，
   JS 120ms 就摘了遮罩，而 `.gate.out` 的淡出要 0.46s ⇒ 用户在**半透明阶段被硬切**，
   看到的是「页面闪了一下」，会以为站坏了。血染本机的 Windows「动画效果」就是关的
   （SPI_GETCLIENTAREAANIMATION = 0），他直接回来问「为啥我本地去登录看不到任何进入的特效」。
   ⇒ 现在这条路上给一段**看得见、但低动态**的过场：只做「光核小幅胀开（.55→1.15）
     + 淡到暖白」，没有拉丝 / 旋转 / 底图推近（那三样正是晕动症的诱因）。

   ⚠️⚠️ 三条硬规矩，动它之前先读完：
     1. 本节**必须**排在 §10 之后，且每条动画/过渡都要 !important ——
        §10 用的是 `animation:none!important`，**普通声明根本压不过 !important**；
        这里靠「同为 !important 时按 specificity 决胜」赢下来（本节选择器都 ≥3 个 class）。
     2. `display:block!important` 不能省：§10 里有 `.gate .gate-warp{display:none!important}`。
     3. 动画名是一对：JS 里 finish() 同时认 `gwVeil`（完整档）与 `glVeil`（轻量档），
        改名字必须两边一起改，否则轻量档会**卡在遮罩上不放行**。
   时间常量同步 js/gate.js：T_LITE = 1300 / T_LITE_MAX = 1750。 */
.gate.lite .gate-warp{display:block!important}
.gate.lite .gw-neb,
.gate.lite .gw-streaks,
.gate.lite .gate-warp::before{display:none!important}  /* 旋进 / 拉丝 / 暗角全靠大幅位移与缩放出效果，轻量档一律不上场 */
.gate.lite .gate-img{animation:none!important}         /* 底图不推近（26% 的缩放对晕动症不友好） */
.gate.lite .gw-core{animation:glCoreOp 1.30s cubic-bezier(.4,0,.65,.3) both!important}
.gate.lite .gw-core::before{animation:glVeil 1.30s cubic-bezier(.5,0,.75,.4) both!important}
.gate.lite .gw-core::after{animation:glCoreSz 1.30s cubic-bezier(.4,0,.65,.3) both!important}
/* 卡片：§10 只留一句 opacity:0，会让卡片"啪"地消失、太生硬；轻量档补 0.34s 淡出 */
.gate.lite.go .gate-box{
  opacity:0;transform:scale(.96);
  transition:opacity .34s ease,transform .34s ease!important;
}
/* 光核：起步就是"一颗球"（不是 .04 那种从针尖长出来），全程只在 1.15 倍内、位移为零 */
@keyframes glCoreOp{0%{opacity:0} 24%{opacity:.5} 62%{opacity:.86} 100%{opacity:1}}
@keyframes glCoreSz{0%{transform:scale(.55)} 62%{transform:scale(.86)} 100%{transform:scale(1.15)}}
/* 光幕：42% 才开始漫上来，最后 20% 铺满全白 —— 摘遮罩切在**全白那一帧**（与完整档同一手法） */
@keyframes glVeil{0%,42%{opacity:0} 80%{opacity:.86} 100%{opacity:1}}

/* ==========================================================================
   §99 v42 精修层（2026-09-24 血染：「UI 字体 和点击进入的特效再优化优化」）
   --------------------------------------------------------------------------
   只做加法微调，不碰 §1~§8 调好的布局 / 洪流时间轴 / 收尾机制：
     ① 标题：字距 4→5px，中文更「碑匾」；流光动画沿用（gtitle 不动）。
     ② 英文副题：字距放宽 + 一点暖金调，与主标题的渐变金呼应。
     ③ 金线：中心加一枚菱形金节（rotate 45° 方块）， WoW 风格的结构线收头。
     ④ 按钮：hover 加一道高光扫过（transition 实现，不占 animation 通道，
        与 gup/ggo 两个既有动画不抢属性）；平时 overflow:hidden 兜住扫光。
     ⑤ 星流/星点加料与邪能绿色板在 js/gate.js v42 里（buildWarp）。
   ⚠️ 按钮的扫光用 ::after —— .gate-go 现有子元素只有 .gg-txt，不会冲突。 */
.gate .gate-title{letter-spacing:5px}
.gate .gate-en{letter-spacing:4.4px;color:rgba(233,216,176,.52)}
.gate .gate-rule::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#f3e2b0,#c8a659);
  box-shadow:0 0 7px rgba(231,207,155,.75), 0 0 2px rgba(255,246,220,.9);
}
.gate .gate-go{overflow:hidden}
.gate .gate-go::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.58) 50%,transparent 68%);
  transform:translateX(-130%);
  transition:transform .62s cubic-bezier(.4,0,.2,1);
}
.gate .gate-go:hover::after{transform:translateX(130%)}
.gate .gate-go:hover{transform:translateY(-2px)}