/* ═══════════════════════════════════════════════════════════════════
   QIDIAN · 首屏背景重做（迭代 7）· 2026-08-25
   ───────────────────────────────────────────────────────────────────
   老叶原话：「主页第一版最上面的背景照片效果非常不好……主页这块别用照片了，
   我们没有几张照片拍得好的，展现出来效果特别差。给我做一套比较炫酷的背景。」

   所以照片整个撤掉，换成程序化背景。三条自我约束：
     · 不做发光粒子球 —— design-master 廉价感反例第 11 条，老叶亲骂过两次
     · 走「一盏光」：暗场八成沉住，一束暖金光斜穿过去（真高级第 2 条）
     · 渐变必须盖噪点，否则出色带（廉价感反例第 1 条）
   底子是三层：工程透视网格（呼应"落地/交付"）+ 一束斜光 + 缓慢流动的极光带。
   全部 CSS，零图片、零字节、秒开，不拖 LCP。
   ═══════════════════════════════════════════════════════════════════ */

/* 照片层整个关掉 —— 不是调暗，是不要了 */
.qh3__photo{display:none!important}

.qh3{
  background:
    /* 顶部一层极淡的暖金雾，把巨字托住 */
    radial-gradient(ellipse 92% 62% at 50% 8%,
      rgba(196,151,73,.13) 0%, transparent 64%),
    /* 底色：暖黑，不是死黑 */
    linear-gradient(180deg,#100E0A 0%,#0E0D0B 42%,#0B0A08 100%)
    !important;
  isolation:isolate}

/* ── 第 1 层：工程透视网格 ────────────────────────────────────────
   两组细线做成向远处收的地平线网格。这是"把 AI 落进业务"的视觉隐喻，
   也是唯一能同时做到「炫」和「不空洞」的底纹 —— 它有结构，不是乱飘的光点。 */
.qh3__grain{
  /* 线要够实才有结构感 —— 第一版 .10 太淡，屏幕上几乎看不见，
     等于白做。实测调到 .30/.22 才立得住，且仍在暗场里不抢字。 */
  background-image:
    linear-gradient(to right, rgba(226,192,121,.30) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226,192,121,.22) 1px, transparent 1px)
    !important;
  background-size:104px 104px!important;
  opacity:1!important;mix-blend-mode:normal!important;
  /* 网格只在下半屏出现，向远处淡出 —— 像一片延伸出去的地面，
     上半屏留给巨字，两不打架 */
  -webkit-mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.30) 26%, #000 62%, #000 100%);
  mask-image:linear-gradient(180deg,
    transparent 0%, rgba(0,0,0,.30) 26%, #000 62%, #000 100%);
  transform:perspective(680px) rotateX(66deg) translate3d(0,18%,0) scale(2.4);
  transform-origin:50% 100%}
/* 🔴 这里原来加了一条「地平线」金线，实拍发现它正好横穿顶部那行
   「沈阳 · 辽宁 / 企业 AI 落地咨询与交付 / EST. 2026」，线从字里穿过去。
   网格自己向远处淡出已经形成收口，这条线是多余的，去掉。
   （留这段注释，免得下轮又想加回来。） */

/* ── 第 2 层：一束斜光 + 缓慢流动的极光带 ────────────────────────
   .qh3__light 原来是压照片的暗幕，现在改成发光层。 */
.qh3__light{
  background:
    /* 斜穿而下的那束光 —— 整屏唯一的光源 */
    linear-gradient(104deg,
      transparent 0%, transparent 26%,
      rgba(226,192,121,.11) 40%,
      rgba(226,192,121,.20) 47%,
      rgba(226,192,121,.09) 54%,
      transparent 68%, transparent 100%),
    /* 左下与右上两团极光，很淡，负责让画面不平 */
    radial-gradient(ellipse 62% 44% at 12% 88%,
      rgba(139,100,40,.30) 0%, transparent 66%),
    radial-gradient(ellipse 54% 40% at 88% 12%,
      rgba(196,151,73,.20) 0%, transparent 62%),
    /* 底部收黑，托住按钮和小字 */
    linear-gradient(180deg, transparent 44%, rgba(11,10,8,.72) 82%, #0B0A08 100%)
    !important;
  background-size:180% 180%,100% 100%,100% 100%,100% 100%!important;
  background-position:0% 0%,0 0,0 0,0 0!important}

/* ── 第 3 层：噪点 ────────────────────────────────────────────────
   任何渐变都必须盖噪点，否则暗场里必出色带（banding）。
   用 SVG feTurbulence，内联 data URI，不额外发请求。 */
.qh3::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/>\
</filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}

/* 照片没了，那行「背景是 2026 年 7 月一次方案评审会的现场」也不能留 ——
   页面上不能有跟眼前看到的东西对不上的话。用 JS 之外的办法：直接隐藏。
   （文案本身留在 HTML 里不删，符合「不删既有内容」；只是首屏不再展示。） */
.qh3__cred{display:none!important}

@media (prefers-reduced-motion: no-preference){
  /* 那束光缓慢地扫过整屏，12 秒一个来回 —— 页面是活的，但不晃眼 */
  @keyframes qxBeam{
    0%{background-position:12% 0%,0 0,0 0,0 0}
    100%{background-position:78% 0%,0 0,0 0,0 0}
  }
  .qh3__light{
    animation:qxBeam 16s cubic-bezier(.42,0,.58,1) infinite alternate!important;
    will-change:background-position}
  /* 网格极缓慢地向前推，像在往里走 */
  @keyframes qxGrid{
    from{transform:perspective(760px) rotateX(58deg) translate3d(0,26%,0) scale(2.1)}
    to{transform:perspective(760px) rotateX(58deg) translate3d(0,32%,0) scale(2.24)}
  }
  .qh3__grain{
    animation:qxGrid 34s cubic-bezier(.42,0,.58,1) infinite alternate!important;
    will-change:transform}
}
/* ═══════════════════════════════════════════════════════════════════
   QIDIAN · 现场照带优化（迭代 7-b）· 2026-08-25
   ───────────────────────────────────────────────────────────────────
   老叶原话：「下边这个照片轮播这块，我们去过哪儿这条我认为做得很好，
   保留再优化。」
   所以只优化，不动结构、不删任何一张图。
   做四件事：
     · 再放大一档（286 → 360 高），照片才算真的被展示，而不是当色带
     · 常态提亮到接近原色（.82 → .92，去色 .22 → .10）
     · 加金色发丝线和悬停放大，跟全站语言一致
     · 图注默认可见（原来只有 hover 才出，等于没有），
       hover 时整张压亮 + 图注加金边
   ═══════════════════════════════════════════════════════════════════ */

.qstrip{background:var(--xh-bg2)!important}

.qstrip figure{
  width:clamp(340px,29vw,460px)!important;
  height:clamp(226px,19.5vw,308px)!important;
  border:1px solid var(--xh-hair)!important;
  background:var(--xh-bg3)!important;
  position:relative;overflow:hidden}

.qstrip img{
  filter:grayscale(.10) brightness(.94) contrast(1.02)!important;
  transform:scale(1.01)!important;
  transition:filter .55s cubic-bezier(.16,1,.3,1),
             transform .8s cubic-bezier(.16,1,.3,1)!important}
.qstrip figure:hover img{
  filter:grayscale(0) brightness(1.06) contrast(1.01)!important;
  transform:scale(1.06)!important}

/* 图注：默认就看得见（原来 opacity:0 只有 hover 才出，等于没有） */
.qstrip figcaption{
  opacity:1!important;
  padding:34px 14px 12px!important;
  background:linear-gradient(to top,
    rgba(11,10,8,.94) 0%, rgba(11,10,8,.62) 54%, transparent 100%)!important;
  font-family:var(--xh-mono)!important;
  font-size:11.5px!important;letter-spacing:.06em!important;
  line-height:1.6!important;color:var(--xh-fg1)!important;
  transition:color .35s}
.qstrip figure:hover figcaption{color:var(--xh-fg0)!important}

/* 悬停时描一道金边，指出「就是这张」 */
.qstrip figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid transparent;
  transition:border-color .35s cubic-bezier(.16,1,.3,1)}
.qstrip figure:hover::after{border-color:rgba(226,192,121,.55)}

/* 跑马灯：慢一点，让人看得清；两头渐隐加宽，不硬切在屏幕边上 */
.qstrip__run{animation-duration:96s!important;gap:18px!important}
.qstrip__track{
  -webkit-mask-image:linear-gradient(to right,
    transparent,#000 9%,#000 91%,transparent)!important;
  mask-image:linear-gradient(to right,
    transparent,#000 9%,#000 91%,transparent)!important}

.qstrip__note{color:var(--xh-fg3)!important;
  margin-top:clamp(20px,2.4vw,30px)!important}