/* ═══════════════════════════════════════════════════════════════════
   迭代 22 · 首屏再加一档「炫酷」——但加在金子上，不加在特效上
   ───────────────────────────────────────────────────────────────────
   老叶原话（迭代 7 那轮说的，一直挂在待办里）：「给我做一套比较炫酷的背景。」
   迭代 7 已经把照片撤了换成程序化背景（一束斜光 + 地面网格 + 噪点），
   这一轮往上再加一档。三条自我约束照旧，一条没松：
     · 不做发光粒子球（design-master 廉价感反例第 11 条，老叶亲骂过两次）
     · 不做全屏闪光、不做彩色霓虹
     · 渐变必须有噪点盖着（上一层已经铺了，这一层不动它）

   加的是这三样，每一样都对着一个量出来的短板：

   ① 「没几个」那两个金字是一块死色 #D9BE84
      真金箔好看不是因为它亮，是因为它有反光层次 —— 暗金、亮金、
      近白的高光、再回暗金。所以把它换成斜向的多档金渐变，
      再让一道窄高光每 14 秒极缓地扫过去一次。
      这是整屏唯一在动的东西，慢到你不盯着看不会注意，但画面不再是死的。

   ② 地面网格只剩最底下窄窄一条，纵深没做出来
      网格本来是「把 AI 落进业务」这个隐喻的载体，现在几乎看不见。
      把它的淡出起点往上提，并在网格上方压一道很宽的柔光带当地平线 ——
      🔴 上一轮试过画一条硬的地平线，它横穿了顶部那行 meta 文字被撤掉了，
      注释还留在 hero-bg.css 里。这次改成宽柔光、且压到 82% 以下，
      离那行字有整整半屏，不会重蹈覆辙。

   ③ 巨字站在地上，但脚下没有影
      标题下方加一团极淡的暖光落在网格上，字才有重量。

   全部 CSS，零图片、零请求，不动 LCP。
   ═══════════════════════════════════════════════════════════════════ */

/* ── ① 金箔材质：从死色换成有反光层次的真金 ──────────────────── */

.qh3 h1 em{
  /* fallback 写在前面：不支持 background-clip:text 的浏览器仍是原来的金 */
  color:#D9BE84;
}

@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .qh3 h1 em{
    /* 🔴 第一版把渐变两端做成暗金（#8B6428 / #9A7130），扫光停在末端时
       那两个字整个暗下去，比改之前还闷 —— 稳态才是人看得最久的状态，
       不能拿它去换一次划过的效果。这一版整条都是饱满金，
       只在 46% 埋一道窄的近白高光，走到哪儿字都是好看的。 */
    background-image:linear-gradient(102deg,
      #C49749 0%,
      #E2C079 15%,
      #C49749 29%,
      #E2C079 41%,
      /* 🔴 高光第一版用 #FBF1D8，拍出来「几」字整个发白，像局部过曝、
         像字没渲染好。金箔的高光是**浅金**不是白 —— 压到 #F0DFB4 就对了。 */
      #F0DFB4 46%,
      #E2C079 51%,
      #C49749 67%,
      #E2C079 85%,
      #C49749 100%);
    background-size:240% 100%;
    background-position:8% 50%;
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    /* 🔴 只把 -webkit-text-fill-color 设成透明，不动 color ——
       color 仍是 #D9BE84，读屏器和对比度审计取的都是它。
       实测这样写 Lighthouse 无障碍仍是 100。 */
  }
}

@media (prefers-reduced-motion: no-preference){
  @supports ((-webkit-background-clip:text) or (background-clip:text)){
    .qh3 h1 em{
      animation:qluxSheen 18s cubic-bezier(.45,0,.55,1) 1.6s infinite alternate}
  }
}
/* 往返，不是循环 —— 两端都是饱满金，走到哪儿停都好看；
   18 秒一趟，慢到不盯着看不会注意，但画面不是死的。 */
@keyframes qluxSheen{
  from {background-position:8% 50%}
  to   {background-position:92% 50%}
}

/* ── ② 地面：纵深拉出来，地平线用宽柔光不用硬线 ──────────────── */

.qh3__grain{
  /* 淡出起点从 26% 提到 18%，网格向远处收的那一段变长 = 纵深更深 */
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.62) 44%,
    #000 66%, #000 100%)!important;
  mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.22) 18%, rgba(0,0,0,.62) 44%,
    #000 66%, #000 100%)!important}

/* 地平线：一道很宽的柔光带，压在 82% 以下，离顶部那行 meta 半屏远 */
.qh3::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:-10%;right:-10%;bottom:0;height:46%;
  background:
    radial-gradient(ellipse 62% 100% at 50% 100%,
      rgba(196,151,73,.16) 0%,
      rgba(196,151,73,.06) 42%,
      transparent 72%);
  mix-blend-mode:screen}

/* ── ③ 巨字脚下的光：字才有重量 ──────────────────────────────── */

.qh3 h1{position:relative}
.qh3 h1::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:6%;right:6%;bottom:-14%;height:56%;
  background:radial-gradient(ellipse 50% 100% at 50% 100%,
    rgba(226,192,121,.13) 0%, rgba(196,151,73,.05) 46%, transparent 74%);
  filter:blur(6px)}