/* =====================================================
   首页 Hero 全屏视觉 —— 径向响应 + 静态玻璃反光
   仅由 templates/pages/home.html 通过 {% block head_extra %} 引入，
   其它页面不加载（避免全站背这个效果的开销）。

   分层（自下而上）：
     .hero-fx__stage   底图（一整张连续照片，不做任何拼接）+ 视差位移
     .hero-fx__glow    品牌双光晕（取代 .hero 原本的背景渐变）
     .hero-fx__scrim   左侧压暗，保证白字可读
     .hero-fx__gloss   静态玻璃反光：固定不动的斜向光带（高光）
     .hero-fx__spec    指针径向响应：很轻的一层光，只提供呼吸感
     .hero::after      沿用 main.css 里的 44px 品牌细网格

   ⚠️ 曾经在底部叠过一条「垂直翻转的倒影带」来模拟湿地面。**已移除**：
      镜像 = 把画面复制一份翻过来，必然产生一条对称轴；无论缝线怎么对齐
      （几何对齐、亮度对齐、遮罩在缝线处不透明都做过），眼睛仍然能读出那条接缝。
      要求是「背景是一整张连续照片」，那它就不该存在。

   ⚠️ 层序有个反直觉的点：反光/高光（gloss / spec）必须排在**遮罩之上**。
      它们模拟的是「表面反射」，物理上就在最外层；排在遮罩之下时会被整层吃掉，
      怎么调强度都显得没效果。

   所有动态量都走 CSS 变量，JS 只写变量、不碰样式属性，
   这样样式改版不必动脚本。
   ===================================================== */

.hero-fx {
  /* ---- 动态量：JS 未接管时的静止值（也是 no-js / 触屏的落点）---- */
  --fx-x: 72%;
  --fx-y: 38%;
  --fx-tx: 0px;
  --fx-ty: 0px;
  --fx-zoom: 1.06;      /* 预留视差余量，避免位移后露边 */

  /* ---- 指针径向响应（很轻）----
     它现在只负责「画面活着」的呼吸感，主角是下面那条静态玻璃反光。
     想彻底关掉指针跟随：把 --spec-strength / --sheen-strength 都设成 0 即可。 */
  --spec-core: 190px;
  --spec-core-h: 120px;
  --spec-strength: .12;
  --sheen-size: 660px;
  --sheen-strength: .028;

  position: relative;
  overflow: hidden;
  isolation: isolate;   /* 把 mix-blend-mode 关在本组件内，不串到页面其它层 */
  background: var(--navy);
  color: #fff;

  display: flex;
  align-items: center;
  /* 照片铺到页面最顶：首页页头是「浮在照片上」的，不占文档流高度 */
  min-height: 100svh;
  padding: 118px 0 84px;
}
/* 旧版 hero 的渐变背景被照片取代，但它的 44px 细网格保留下来当品牌签名 */
.hero-fx { background-image: none; }

/* 滚动条：原「仅首页隐藏系统滚动条」的规则已上移到 main.css 基础层
   （2026-10-01 用户拍板：全站所有页面都参考首页隐藏），此处不再重复。 */

/* ---------- 1. 舞台：一张连续照片 + 视差 ---------- */
.hero-fx__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate3d(var(--fx-tx), var(--fx-ty), 0) scale(var(--fx-zoom));
  transform-origin: 50% 50%;
  will-change: transform;   /* 只此一层提升，避免过多合成层 */
}
.hero-fx__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
}

/* ---------- 2. 品牌双光晕（沿用原 .hero 的蓝 / 橙径向） ---------- */
.hero-fx__glow {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(1000px 420px at 85% -10%, rgba(79, 139, 255, .26), transparent 60%),
    radial-gradient(800px 380px at 8% 112%, rgba(249, 115, 22, .16), transparent 60%);
}

/* ---------- 3. 左侧压暗：照片背景下的文字可读性 ---------- */
.hero-fx__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(96deg,
    rgba(9, 26, 50, .80) 0%,
    rgba(9, 26, 50, .64) 32%,
    rgba(9, 26, 50, .30) 56%,
    rgba(9, 26, 50, .06) 78%,
    transparent 100%);
}
/* 底部压一层，纯渐变、不拼接：给画面一个「落地」的收口，避免下半太平 */
.hero-fx__scrim::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(6, 16, 34, .40), transparent);
}

/* ---------- 4. 静态玻璃反光（高光） ---------- */
/* 不再跟随指针 —— 做成「棚拍时灯打在玻璃面上」的固定反光：
   一条宽软主反光带 + 一条次级细带 + 顶边收光。
   它始终开着（不依赖 JS），因为静态效果本来就没有「等指针」的必要。 */
.hero-fx__gloss {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
  background:
    /* 顶边收光：玻璃上沿被灯打亮的一道窄高光 */
    linear-gradient(to bottom,
      rgb(255 255 255 / .10) 0%,
      rgb(255 255 255 / .028) 3.2%,
      transparent 12%),
    /* 次级细带：更靠右的一条窄反光，给玻璃一点「厚度」 */
    linear-gradient(101deg,
      transparent 72%,
      rgb(215 232 255 / .04) 80%,
      rgb(245 250 255 / .07) 84%,
      rgb(215 232 255 / .035) 88%,
      transparent 94%),
    /* 主反光带：右上方的宽软光带。角度(101deg)决定「灯位」，改它就等于挪灯；
       百分比位置刻意避开左侧文案区（x 0~620），否则反光会横穿标题、拉低可读性 */
    linear-gradient(101deg,
      transparent 30%,
      rgb(200 224 255 / .065) 44%,
      rgb(255 255 255 / .15) 54%,
      rgb(228 240 255 / .095) 62%,
      rgb(200 224 255 / .028) 70%,
      transparent 80%);
}

/* ---------- 5. 指针径向响应（很轻） ---------- */
/* 两层：一个小而软的核心 + 一层大气光晕。
   现在的强度是「呼吸感」级别（实测指针中心区亮度增量约 +10），
   不再是主角 —— 主角是上面那条静态玻璃反光。 */
.hero-fx__spec {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background:
    radial-gradient(ellipse var(--spec-core) var(--spec-core-h) at var(--fx-x) var(--fx-y),
      rgb(255 255 255 / var(--spec-strength)) 0%,
      rgb(255 255 255 / .05) 30%,
      rgb(200 220 255 / .018) 58%,
      transparent 80%),
    radial-gradient(ellipse var(--sheen-size) calc(var(--sheen-size) * .78) at var(--fx-x) var(--fx-y),
      rgb(150 190 255 / var(--sheen-strength)) 0%,
      rgb(140 180 255 / .012) 46%,
      transparent 76%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .6s ease;
}
/* JS 就绪后才点亮——避免首屏闪一下、也天然兼容 no-js */
.hero-fx.is-fx-ready .hero-fx__spec { opacity: 1; }

/* ---------- 6. 内容层 ---------- */
.hero-fx > .container {
  position: relative;
  z-index: 5;
  width: 100%;
}

/* 照片背景下，站上原有的 hero 文字配色要提亮一档 */
.hero-fx p.hero-sub { color: #e9eff9; opacity: 1; }

/* =====================================================
   7. 首页页头：透明浮在首屏照片上（对齐 zotourcar.com 的观感）
   整段只在首页生效（hero.css 仅在首页加载），内页保持原来的白色实心页头。
   两态切换由 hero-fx.js 加/去 .is-solid 控制：浮在照片上时透明，滚过首屏后转实底
   —— 不这样做的话，白字会随着滚动压在下面的浅色内容上，直接读不了。
   ===================================================== */
.site-header {
  position: fixed;              /* 脱离文档流，照片才能从页面最顶开始 */
  /* ⚠️ fixed 元素不设 left/right 会「缩成内容宽」而不是撑满整行，
     于是 .sh-inner 的 margin:0 auto 就在一个变窄的盒子里居中，整条页头看起来靠左。
     原来 position:sticky 是块级元素、天然满宽，所以没有这个问题。 */
  inset-inline: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease;
}

/* ---- 态一：浮在照片上（默认） ---- */
.logo-img { box-shadow: 0 4px 14px rgba(4, 12, 28, .38); }
.logo-mark {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 4px 14px rgba(4, 12, 28, .38);
}
.logo-txt b { color: #fff; transition: color .28s ease; }
.logo-txt span { color: rgba(255, 255, 255, .74); transition: color .28s ease; }
.sh-nav a { color: rgba(255, 255, 255, .88); }
.sh-nav a:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sh-nav a.active { background: rgba(255, 255, 255, .18); color: #fff; }
.sh-cta { background: var(--accent); box-shadow: 0 6px 16px rgba(249, 115, 22, .32); }
.sh-cta:hover { background: #ea6a0c; box-shadow: 0 8px 20px rgba(249, 115, 22, .40); }
.lang-select {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
  transition: background .28s ease, border-color .28s ease, color .28s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.lang-select option { color: #16233b; }   /* 展开的下拉面板仍用深色字，否则白底白字 */

/* ---- 态二：滚过首屏后转实底（回到站上原本的白色页头） ---- */
.site-header.is-solid {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 2px rgba(11, 31, 58, .05), 0 6px 20px rgba(11, 31, 58, .07);
}
.site-header.is-solid .logo-img { box-shadow: 0 2px 8px rgba(11, 31, 58, .12); }
.site-header.is-solid .logo-mark {
  background: linear-gradient(135deg, var(--navy) 10%, var(--navy-3) 60%, var(--primary) 130%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(11, 31, 58, .28);
}
.site-header.is-solid .logo-txt b { color: var(--text); }
.site-header.is-solid .logo-txt span { color: var(--muted); }
.site-header.is-solid .sh-nav a { color: var(--text); }
.site-header.is-solid .sh-nav a:hover { background: var(--bg); color: var(--primary); }
.site-header.is-solid .sh-nav a.active { background: var(--primary-soft); color: var(--primary); }
.site-header.is-solid .sh-cta { background: var(--primary); box-shadow: 0 6px 16px rgba(36, 88, 230, .28); }
.site-header.is-solid .lang-select {
  background-color: #fff;
  border-color: var(--line-2);
  color: var(--text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* =====================================================
   降级与自适应
   ===================================================== */

/* 触屏 / 无精确指针：没有「指针位置」可言，关掉跟随层；静态玻璃反光照常保留 */
@media (hover: none), (pointer: coarse) {
  .hero-fx__spec { display: none; }
}

/* 用户要求减少动效：去掉视差与跟随光，静态反光保留 */
@media (prefers-reduced-motion: reduce) {
  .hero-fx__stage {
    transform: scale(var(--fx-zoom));
    will-change: auto;
  }
  .hero-fx__spec { display: none !important; }
}

/* 窄屏：hero 不再强制撑满、跟随光收小；静态反光带位置往中间挪一点 */
@media (max-width: 860px) {
  .hero-fx {
    --spec-core: 230px;
    --spec-core-h: 120px;
    --sheen-size: 440px;
    min-height: auto;
    padding: 112px 0 52px;   /* 顶部留出浮层页头的高度 */
  }
  .hero-fx__gloss {
    background:
      linear-gradient(to bottom,
        rgb(255 255 255 / .08) 0%,
        rgb(255 255 255 / .022) 3.2%,
        transparent 12%),
      linear-gradient(101deg,
        transparent 30%,
        rgb(255 255 255 / .13) 44%,
        rgb(228 240 255 / .08) 52%,
        transparent 66%);
  }
}

/* 矮屏（笔记本横屏）：保证内容不被裁 */
@media (min-width: 861px) and (max-height: 700px) {
  .hero-fx {
    min-height: 640px;
    padding: 70px 0 62px;
  }
}