/* ==========================================================
   AI+制造创新场景 · 专题总览页 Banner 装饰层
   仅 ai.html 引用（独立文件，避免与 ai-theme.css 的双机写冲突）
   元素：算力芯片 / 电路走线 / 数据柱与趋势 / 智能体神经网络 /
        齿轮 / 工业机械臂 / 数据流虚线
   ========================================================== */

.page-banner.ai-hero { position: relative; overflow: hidden; }

/* ---------- 工业网格底纹 ---------- */
.ai-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(100deg, rgba(0,0,0,.85), rgba(0,0,0,.2) 58%, rgba(0,0,0,.7));
  mask-image: linear-gradient(100deg, rgba(0,0,0,.85), rgba(0,0,0,.2) 58%, rgba(0,0,0,.7));
}

/* ---------- 装饰图形层 ---------- */
.ai-hero-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ai-hero-bg svg { width: 100%; height: 100%; display: block; }

/* 数据流动画 */
.ai-hero .ai-flow { animation: aiFlow 16s linear infinite; }
@keyframes aiFlow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -320; } }

/* 左侧压暗，保证标题与面包屑可读 */
.ai-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(96deg, rgba(5,48,38,.44) 0%, rgba(5,48,38,.10) 42%, rgba(5,48,38,0) 68%);
}

/* 文字层压住装饰 */
.page-banner.ai-hero .container { position: relative; z-index: 3; }

@media (max-width: 900px) {
  .ai-hero-bg { opacity: .6; }
}
@media (max-width: 640px) {
  .ai-hero-bg { opacity: .42; }
  .ai-hero::before { background-size: 34px 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-hero .ai-flow { animation: none; }
}