/* =========================================================
   首页 Hero 右区 · V9 品牌意象版「粒子端点」(hero-v9)
   来源：GPT 定稿 iyunshow-v9-logo-metaphor-v2-2-directional.html（主人 2026-09-20 定稿）
   范围：**仅**首页 .hero 右区。左栏文案、导航、其余区块一律不动。
   替换对象：原 .hero-stage（HUMAN × AGENT OPERATING MAP 三泳道示意图）
   —— 定稿的材质与几何全部保留：∞ 拓扑 + 粒子字 HUMAN/AGENT + 品牌蓝只在交汇区。
   本文件只做宿主页适配：容器托管、右缘出血、左缘淡出改用遮罩（原定稿用白色渐变，
   在官网带蓝调的渐变底上会留下一道白带）。
   ========================================================= */

.hero-v9{
  position:relative;min-width:0;min-height:540px;
  align-self:stretch;
}

/* 桌面：右缘出血到视口边——与定稿「场一直铺到右边」一致。
   负边距 = 居中留白宽度；.hero 已是 overflow:hidden，不会产生横向滚动。
   1080 以下为单栏布局，不出血。 */
@media(min-width:1081px){
  .hero-v9{margin-right:calc(-1 * max(32px,(100vw - var(--wrap)) / 2))}
}

.hero-v9-canvas{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  /* 0921 空白收紧：图形整体左移放大后，最左元素（HUMAN 粒子字）已落在
     容器 1.2% 处、距左列文案 ≥55px，左缘硬切不再发生——原来的 15% 左缘淡出
     会把粒子字吞掉，故整段移除。 */
}
/* 定稿在窄屏关掉左缘淡出（demo 里是 @media(max-width:900px){.visual:after{display:none}}）。
   官网 1080 以下改单栏、右区整块落到文案下方——0912/0921 摸底后连桌面档也不再用遮罩，
   故这段窄屏开关一并移除。 */

/* 交汇区的 YUNSHOW 存在感：只在 handoff 相位呼吸，由 JS 驱动 opacity/位移 */
.hero-v9-mark{
  position:absolute;left:49%;top:51.5%;z-index:2;white-space:nowrap;
  pointer-events:none;opacity:0;transform:translate(-50%,20px);
  font:650 9px/1.2 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.22em;color:#1268ff;
}

/* 无 JS / 首帧前降级：静态 ∞ 与两端语义（JS 首帧落定后由 .is-live 收起）
   横向：88% × (300/350) = 容器宽的 75.4%，与 canvas 的 ∞ 全宽 2*sx = W*0.72~0.76 对齐
   （0921 收紧：svg viewBox 裁到 x25~375，中心随 ∞ 中心从 57% 移到 49%）。
   纵向：**刻意不按曲线走**。canvas 的曲线外接框只有 0.354*sy 高（1440 档 445×93），
   但粒子沿法线铺开 ±18px，实际墨迹是 445×167 左右；静态图是细描边、没有粒子厚度，
   若按纯曲线纵横比画会明显偏扁，故让兜底的纵横比（300:90 ≈ 3.33）落在
   曲线 4.8 与墨迹 2.66 之间、贴近墨迹，切换时才不跳形。 */
.hero-v9-fallback{position:absolute;inset:0;pointer-events:none;color:#9aa8b8}
.hero-v9-fallback svg{
  position:absolute;left:49%;top:49%;transform:translate(-50%,-50%);
  width:min(88%,887px);height:auto;
}
.hero-v9-fallback text{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:9px;letter-spacing:2.2px;fill:#9aa8b8;
}
.hero-v9.is-live .hero-v9-fallback{display:none}

/* ——— 断点：跟随首页既有断点（1080 单栏 / 860 块级堆叠） ———
   两档高度 = 原 .hero-stage 卡在各档的**实测 border-box 高度 521.5 / 461.5**
   （卡的实高是 521.5xx / 461.4xx，取 .5 才能让 hero 总高与改造前同档进位一致；
   写整数 522 / 461 会把 hero 顶多半像素、在部分档位进位成 ±1px）。
   首页 hero 高度是内容撑出来的（gpt-vi.css：.hero{min-height:780px;height:auto}），
   所以只有把右区高度对齐，hero 总高才与改造前一致、下方各节纵向位置不位移。
   这也是 .hero-v9 必须给死高度的唯一原因——不是视觉选择，是版式锚定。 */
@media(max-width:1080px){
  .hero-v9{max-width:820px;width:100%;margin:0 auto;min-height:0;height:521.5px}
}
/* 0922 主人令：移动端不展示右区粒子场——display:none 同时收起画布与静态兜底；
   粒子区收起后，home.css 在 ≤1080 档给 hero 的 900px 最小高度会在移动端留下大块空白，
   一并按内容收掉（本文件最后加载，可覆盖 home.css/gpt-vi.css）。 */
@media(max-width:860px){
  .hero-v9{display:none}
  .hero{min-height:0}
}