/* ============================================================
   资讯页头 hero（照搬 design-gold-v1 的页头区，2026-09-23）
   ------------------------------------------------------------
   用户明确："把设计稿的东西都搬过来，元素只能多不能少"。
   几何参数、注释、实测结论**原样保留**自 design-gold-v1.css，
   仅把选择器前加 .ov-hero-section 作用域限定，避免与其它页面冲突。
   依赖的素材与 design-gold-v1 相同（assets/intelligence/ 分层素材）。
   ============================================================ */

/* ---------- 页头 ----------
   实测缺陷（勿回退）：星球 186px 绝对定位 + 页头高度不足时，
   星球溢出页头 50px 压住总览卡、并压住右侧竖排文案。 */

.ov-hero-section {
  /* 页头：装饰（星球/轨道）向右出血，由 overflow 裁切。
     ⚠️ 实测缺陷（勿回退）：裁剪边界必须落在**视口边缘**。
     用 `calc(50% - 50vw)` 抵消 padding 与 max-width 居中留白，
     页头铺满视口，裁剪边界因此始终等于屏幕边缘。
     装饰层的定位上下文交给 .hero-inner（= 内容列）。 */
  position: relative;
  padding: 0 0 6px;
  /* 2026-09-29 首屏压缩：214 → 162。星球/轨道同比缩小（221→176），
     球底（hero 内 ~184px）溢出页头 ~22px，落在「信息概览」标题行右侧空白，
     不接触总览卡与 KPI 数字（截图复验）；元素一个不少，只收紧高度，
     让 390×844 首屏能看到第一条资讯（合同 §4）。 */
  min-height: 156px;
  margin-inline: calc(50% - 50vw);
  overflow-x: clip;
  overflow-y: visible;
  z-index: 0;
}

/* 窄屏时 .view-root 只留 16px 水平内边距；直接抵消它即可铺到可用内容边缘。
   100vw 在带传统竖滚动条的浏览器仍包含滚动条宽，原式会多出横向滚动。 */
@media (max-width: 736px) {
  .ov-hero-section { margin-inline: -16px; }
}

.ov-hero-section .hero-inner {
  /* 内容列：重新施加宽度与居中（因为页头铺满视口），
     同时作为**装饰层的定位上下文** —— 装饰锚定内容列，
     窄屏时被视口裁切、宽屏时自然溢出到列外留白，都不会被硬切。 */
  position: relative; z-index: 2;
  max-width: var(--page-max, 560px);
  margin: 0 auto;
  padding-inline: var(--gutter, 14px);
}

/* ① 星球层 —— 透明背景、无轨道、无卫星、无标注文字。
   球直径 218，球心距右缘 50 → 球可见左缘 = 390 − 50 − 109 = 231（让开标题）。
   图 445x424，球体紧裁铺满 → 宽 = 218 × 445/439 ≈ 221。
   2026-09-29 首屏压缩：221 → 176（top/right 同步内收，保持同心与出血裁切）。 */
.ov-hero-section .hero-planet {
  position: absolute; z-index: 1;
  top: 8px; right: -44px;
  width: 176px; height: auto;
  pointer-events: none;
}

/* ② 轨道层 —— back（远侧，星球后）+ front（近侧，星球前，mask 只露下半）。
   两层完全同位，拼合后仍是完整一环。分割线 = 实测椭圆长轴（159deg）。
   2026-09-29 与星球同步缩放（268 → 212），top/right 保持同心。 */
.ov-hero-section .hero-orbits {
  position: absolute;
  top: 26px; right: -64px;
  width: 212px; height: auto;
  pointer-events: none;
}
.ov-hero-section .hero-orbits.back { z-index: 0; }
.ov-hero-section .hero-orbits.front {
  z-index: 2;
  /* 蒙版 = 沿实测椭圆长轴（159deg）的**硬分界**：远侧整段透明、近侧整段显示。
     2026-09-29 用户实测反馈修复：原先 38%→72% 的宽过渡带把 front 层里
     **远侧的环段**也从星球脸上漏了出来（远侧必须被星球挡住，不可见）。
     分界中点 55% 沿用原过渡带的中点，只收窄羽化（±1.5%），不改变近/远侧的划分。 */
  -webkit-mask-image: linear-gradient(159deg, transparent 53.5%, #000 56.5%);
  mask-image: linear-gradient(159deg, transparent 53.5%, #000 56.5%);
}

/* 卫星定位容器：必须与星球/轨道层**同心**，否则卫星的椭圆轨道会与
   画面里的轨道环错位。取与 .hero-orbits 相同的 top/right/width。 */
.ov-hero-section .hero-orbit {
  position: absolute;
  top: 26px; right: -64px;
  width: 212px; height: 140px;
  pointer-events: none;
}

/* 大气呼吸光：叠加在星球受光边缘（很弱的明暗呼吸，不改变素材形状）。 */
.ov-hero-section .hero-limb {
  position: absolute; z-index: 1;
  top: -36px; right: -102px;
  width: 256px; height: 256px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 38% 32%,
    rgba(255, 214, 158, 0.30) 0%,
    rgba(233, 176, 118, 0.16) 34%,
    rgba(204, 145, 102, 0.05) 58%,
    transparent 72%);
  -webkit-mask-image: radial-gradient(circle closest-side at 50% 50%, #000 78%, transparent 100%);
  mask-image: radial-gradient(circle closest-side at 50% 50%, #000 78%, transparent 100%);
  animation: hero-limb-breathe 7.5s ease-in-out infinite;
}
@keyframes hero-limb-breathe {
  0%, 100% { opacity: 0.34; }
  50%      { opacity: 0.66; }
}

/* 页头文字（在星球左侧，与星球不共享水平区间） */
.ov-hero-section .hero-copy {
  position: relative;
  min-width: 0;
  padding-top: 2px;
}
.ov-hero-section .hero-date {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--gold, #f2d4a4);
}
.ov-hero-section .hero-date i {
  font-style: normal;
  margin-left: 8px;
  font-weight: 500;
  color: var(--label-2, rgba(236, 235, 232, 0.62));
}
.ov-hero-section .hero-title {
  margin: 0;
  font-family: var(--f-serif, "Noto Serif SC", Georgia, serif);
  font-size: clamp(28px, 8.6vw, 33px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: #fff;
}
.ov-hero-section .hero-sub {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--label-2, rgba(236, 235, 232, 0.62));
}

/* ---------- 卫星（4 颗，公转由 hero-orbit.js 驱动）---------- */
.ov-hero-section .sat {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  /* 卫星可视宽度由 --sw 控制（img width:100% 跟随）——
     漏掉这条会让 img 用 HTML 属性的原始尺寸（178px），卫星巨大（实测踩过） */
  width: var(--sw, 34px);
  margin-left: calc(var(--sw, 34px) / -2);
  margin-top: -11px;
  will-change: transform;
}
.ov-hero-section .sat img {
  display: block;
  width: 100%; height: auto;
  /* 金色外发光，让卫星在深底上"亮"起来（素材自带高光，不额外描边） */
  filter: drop-shadow(0 0 6px rgba(242, 212, 164, 0.5));
}

/* 各卫星的基准尺寸与不透明度（与设计稿一致） */
.ov-hero-section .sat-1 { --sw: 15px; }
.ov-hero-section .sat-2 { --sw: 13px; opacity: 0.92; }
.ov-hero-section .sat-3 { --sw: 11px; opacity: 0.8; }
.ov-hero-section .sat-4 { --sw: 10px; opacity: 0.86; }

/* 尊重减少动态偏好：呼吸光停用但保留可见；卫星由 JS 停轮询 */
@media (prefers-reduced-motion: reduce) {
  .ov-hero-section .hero-limb { animation: none !important; opacity: 0.5; }
}