/* ==========================================================================
   HONZ V4.0 — 通用内页 Banner 视觉系统 (ty_banner.css)
   现代数字能源 · 国际工业科技风格 (深海科技蓝 + 数字化建筑网格 + 极光光晕)
   ========================================================================== */

.ty_banner,
.cpzx_zb_banner {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #050d1e;
}

.ty_banner_box,
.cpzx_zb_banner_box {
  position: relative;
  width: 100%;
  line-height: 1.5;
}

/* 统一全站内页 CSS3 科技感 Banner 容器 */
.css_img_banner_wrap {
  position: relative;
  width: 100%;
  height: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #040c1a 0%, #091c3e 52%, #0c2b5e 100%) !important;
  border-bottom: 1px solid rgba(14, 165, 233, 0.2);
}

/* 数字化工程微网格与极光背景层 */
.css_img_banner_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(4, 84, 220, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.22) 0%, transparent 45%),
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 48px 48px, 48px 48px;
  pointer-events: none;
  z-index: 1;
}

/* 底部科技流光装饰线 */
.css_img_banner_wrap::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0ea5e9, #0454dc, transparent);
  z-index: 4;
  pointer-events: none;
}

/* 星点微光层 */
.css_img_starry,
.css_img_starry_sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 28%, rgba(56, 189, 248, 0.8) 100%, transparent),
    radial-gradient(2px 2px at 78% 35%, rgba(255, 255, 255, 0.7) 100%, transparent),
    radial-gradient(1.2px 1.2px at 62% 78%, rgba(14, 165, 233, 0.75) 100%, transparent);
  background-size: 280px 280px;
  opacity: 0.65;
  z-index: 2;
  pointer-events: none;
}

/* 标题与副标题容器 */
.css_img_text_overlay {
  position: relative;
  z-index: 10;
  text-align: center;
  color: #ffffff;
  margin-bottom: 24px !important;
  padding: 0 24px;
  max-width: 960px;
}

.css_img_main_title {
  font-size: clamp(2rem, 3.6vw, 3rem) !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
  margin-bottom: 12px !important;
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
  line-height: 1.2;
  margin-top: 0; /* 有的页面用 h1、有的用 p（2026-11-11），两种标签外观一致 */
}

.css_img_sub_title {
  font-size: clamp(0.9375rem, 1.4vw, 1.125rem) !important;
  letter-spacing: 0.16em !important;
  color: rgba(226, 232, 240, 0.88) !important;
  font-weight: 400 !important;
  line-height: 1.6;
}

/* ==========================================================================
   内页 Banner 小动画（2026-11-10 按各页主题重新设计；HTML 在 partial/banner_fx.html）
   省资源原则：只动 transform（位移/缩放）和 opacity（透明度），由显卡合成，
   不触发页面重排重绘；不用模糊滤镜、不用 JS；节奏放慢并带停顿。
   系统开启"减少动态效果"时，reset.css 会让动画停在静止画面。
   尺寸：图标画布 72×72。SVG 按 32×32 的坐标画（自动缩放），
   叠在 SVG 上会动的小部件用像素定位 = 32 坐标 × 2.25。
   ========================================================================== */
.css_img_fx {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 图标位：不要底框，只衬一圈很淡的光晕 */
.css_img_fx_tile {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7dd3fc;
}
.css_img_fx_tile::before {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.22) 0%, rgba(14, 165, 233, 0.08) 45%, transparent 70%);
  pointer-events: none;
}

/* 图标画布 */
.css_img_fx_ico {
  position: relative;
  flex: none;
  display: block;
  width: 72px;
  height: 72px;
}
.css_img_fx_ico svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.css_img_fx_hi {
  color: #e0f2fe;
  stroke: #e0f2fe;
}

/* 能量传输线：一道光沿线跑过，再停一会儿 */
.css_img_fx_line {
  position: relative;
  flex: none;
  display: block;
  width: 64px;
  height: 2px;
  margin: 0 16px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(56, 189, 248, 0.22);
}
.css_img_fx_line::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #7dd3fc 45%, #e0f2fe 50%, #7dd3fc 55%, transparent);
  transform: translateX(-100%);
  animation: css_img_fx_flow 2.6s ease-in-out infinite backwards;
}
.css_img_fx_line_l {
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.38));
}
.css_img_fx_line_r {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.38), transparent);
}
/* 默认光从图标向外发出；inward 表示光从外向图标汇聚 */
.css_img_fx_line_l::after,
.css_img_fx_inward .css_img_fx_line_r::after {
  animation-direction: reverse;
}
.css_img_fx_inward .css_img_fx_line_l::after {
  animation-direction: normal;
}
@keyframes css_img_fx_flow {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(250%); }
}

/* 波形窗口（交流正弦波） */
.css_img_fx_scope {
  position: absolute;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}

/* —— 产品中心：交流电 → 变换 → 直流电 —— */
.css_img_fx_product .css_img_fx_line {
  width: 48px;
}
.css_img_fx_product .css_img_fx_line_2::after {
  animation-delay: 1.3s;
}
.css_img_fx_scope_ac {
  inset: 0;
}
.css_img_fx_wave {
  width: 144px;
  height: 72px;
  color: #e0f2fe;
  animation: css_img_fx_scroll72 3.2s linear infinite;
}
@keyframes css_img_fx_scroll72 {
  to { transform: translateX(-72px); }
}
/* 光到达变压器时，它身后亮起一团光 */
.css_img_fx_glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.4) 0%, rgba(56, 189, 248, 0.12) 40%, transparent 68%);
  opacity: 0;
  animation: css_img_fx_glow 2.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes css_img_fx_glow {
  0%, 38% { opacity: 0; }
  58% { opacity: 1; }
  86%, 100% { opacity: 0; }
}

/* 变压器符号变亮：一份亮白色的副本叠在上面，透明度和光晕同步 */
.css_img_fx_flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: css_img_fx_glow 2.6s ease-in-out infinite;
}
/* 直流：第二道光比第一道晚 1.3 秒，所以直流的光晕和充亮也晚 1.3 秒 */
.css_img_fx_tile_dc {
  color: rgba(125, 211, 252, 0.75);
}
.css_img_fx_tile_dc .css_img_fx_glow {
  animation-delay: 1.3s;
}
/* 充亮：外层窗口从左边滑进来、内层同步反向移动，亮线看起来不动，只是从左到右逐渐显现 */
.css_img_fx_wipe {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateX(-72px);
  animation: css_img_fx_wipe 2.6s ease-in-out 1.3s infinite backwards;
}
.css_img_fx_wipe_in {
  position: absolute;
  inset: 0;
  transform: translateX(72px);
  animation: css_img_fx_wipe_in 2.6s ease-in-out 1.3s infinite backwards;
}
@keyframes css_img_fx_wipe {
  0%, 50% { transform: translateX(-72px); opacity: 1; }
  66% { transform: translateX(0); }
  74% { opacity: 1; }
  92%, 100% { transform: translateX(0); opacity: 0; }
}
@keyframes css_img_fx_wipe_in {
  0%, 50% { transform: translateX(72px); }
  66%, 100% { transform: translateX(0); }
}

/* —— 服务支持：盾牌 + 心电监测线，亮光沿线扫过 ——
   外层窗口向右移、内层同步向左移，波形看起来不动，只有亮的那一段在走 */
.css_img_fx_scan {
  position: absolute;
  left: 0;
  top: 22.5px;
  width: 18px;
  height: 31.5px;
  overflow: hidden;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent);
  animation: css_img_fx_scan 2.6s ease-in-out infinite;
}
.css_img_fx_scan_in {
  position: absolute;
  left: 0;
  top: -22.5px;
  width: 72px;
  height: 72px;
  animation: css_img_fx_scan_in 2.6s ease-in-out infinite;
}
@keyframes css_img_fx_scan {
  0% { transform: translateX(9px); opacity: 0; }
  12% { opacity: 1; }
  58% { opacity: 1; }
  70%, 100% { transform: translateX(49.5px); opacity: 0; }
}
@keyframes css_img_fx_scan_in {
  0% { transform: translateX(-9px); }
  70%, 100% { transform: translateX(-49.5px); }
}

/* —— 关于我们：大楼逐层亮灯 —— */
.css_img_fx_floor {
  position: absolute;
  left: 23.625px;
  width: 15.75px;
  height: 4.5px;
  border-radius: 1px;
  background: linear-gradient(90deg, #e0f2fe 0 5.625px, transparent 5.625px 10.125px, #e0f2fe 10.125px 15.75px);
  animation: css_img_fx_light 4.5s ease-in-out infinite backwards;
}
.css_img_fx_floor:nth-of-type(1) { top: 20.25px; animation-delay: 0.9s; }
.css_img_fx_floor:nth-of-type(2) { top: 29.25px; animation-delay: 0.45s; }
.css_img_fx_floor:nth-of-type(3) { top: 38.25px; }
@keyframes css_img_fx_light {
  0% { opacity: 0.15; }
  10%, 64% { opacity: 1; }
  80%, 100% { opacity: 0.15; }
}

/* —— 加入我们：星星跳上台阶，到顶闪光 ——
   外层管左右移动、内层管上下跳跃，合起来是一道弧线 */
.css_img_fx_hopx,
.css_img_fx_hopy {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
}
.css_img_fx_hopx {
  transform: translateX(48.375px);
  animation: css_img_fx_hopx 4.8s ease-in-out infinite;
}
.css_img_fx_hopy {
  width: 6.75px;
  height: 6.75px;
  border-radius: 50%;
  background: #f0f9ff;
  box-shadow: 0 0 12px 2px rgba(56, 189, 248, 0.9);
  transform: translateY(16.875px);
  animation: css_img_fx_hopy 4.8s linear infinite;
}
@keyframes css_img_fx_hopx {
  0%, 18% { transform: translateX(9px); }
  30%, 42% { transform: translateX(21.375px); }
  54%, 66% { transform: translateX(34.875px); }
  78%, 100% { transform: translateX(48.375px); }
}
@keyframes css_img_fx_hopy {
  0% { transform: translateY(54px); opacity: 0; }
  6% { transform: translateY(54px); opacity: 1; }
  18% { transform: translateY(54px); animation-timing-function: ease-out; }
  24% { transform: translateY(32.625px); animation-timing-function: ease-in; }
  30% { transform: translateY(41.625px); }
  42% { transform: translateY(41.625px); animation-timing-function: ease-out; }
  48% { transform: translateY(20.25px); animation-timing-function: ease-in; }
  54% { transform: translateY(29.25px); }
  66% { transform: translateY(29.25px); animation-timing-function: ease-out; }
  72% { transform: translateY(7.875px); animation-timing-function: ease-in; }
  78% { transform: translateY(16.875px); opacity: 1; }
  92% { transform: translateY(16.875px); opacity: 1; }
  100% { transform: translateY(16.875px); opacity: 0; }
}
.css_img_fx_spark {
  position: absolute;
  left: 50.625px;
  top: -1.125px;
  width: 15.75px;
  height: 15.75px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0 2.25px, rgba(125, 211, 252, 0.9) 3.6px, transparent 7.875px);
  opacity: 0;
  animation: css_img_fx_spark 4.8s ease-out infinite;
}
@keyframes css_img_fx_spark {
  0%, 77% { opacity: 0; transform: scale(0.3); }
  83% { opacity: 1; transform: scale(1.5); }
  95%, 100% { opacity: 0; transform: scale(0.8); }
}

/* —— 新闻资讯：文档条目逐条向上滚动 ——
   每条占 9px 高（2.7 线 + 6.3 间距），一次滚一条，滚完 3 条正好接上开头 */
.css_img_fx_feed {
  position: absolute;
  left: 27px;
  top: 28.125px;
  width: 20.25px;
  height: 27px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
}
.css_img_fx_feed_in {
  padding-top: 3.15px;
  animation: css_img_fx_feed 4.5s ease-in-out infinite;
}
.css_img_fx_feed_in i {
  display: block;
  height: 2.7px;
  margin: 0 0 6.3px;
  border-radius: 2px;
  background: #e0f2fe;
  opacity: 0.85;
}
.css_img_fx_feed_in i:nth-child(3n+1) { width: 20.25px; }
.css_img_fx_feed_in i:nth-child(3n+2) { width: 13.5px; }
.css_img_fx_feed_in i:nth-child(3n) { width: 18px; }
@keyframes css_img_fx_feed {
  0%, 18% { transform: translateY(0); }
  30%, 48% { transform: translateY(-9px); }
  60%, 78% { transform: translateY(-18px); }
  90%, 100% { transform: translateY(-27px); }
}

/* —— 联系我们：定位针落下，地面泛起波纹 —— */
.css_img_fx_pin {
  position: absolute;
  inset: 0;
  animation: css_img_fx_bob 2.4s ease-in-out infinite;
}
@keyframes css_img_fx_bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6.75px); }
}
.css_img_fx_ripple {
  position: absolute;
  left: 20.25px;
  top: 56.25px;
  width: 31.5px;
  height: 9px;
  border: 2px solid #7dd3fc;
  border-radius: 50%;
  opacity: 0;
  animation: css_img_fx_ripple 2.4s ease-out infinite;
}
@keyframes css_img_fx_ripple {
  0% { opacity: 0.9; transform: scale(0.3); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}

/* 响应式适配 */
@media (max-width: 1024px) {
  .css_img_banner_wrap {
    height: 300px !important;
  }
}

@media (max-width: 768px) {
  .css_img_banner_wrap {
    height: 220px !important;
  }
  .css_img_text_overlay {
    margin-bottom: 12px !important;
    padding: 0 16px;
  }
  .css_img_main_title {
    font-size: 1.625rem !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 6px !important;
  }
  .css_img_sub_title {
    font-size: 0.8125rem !important;
    letter-spacing: 0.06em !important;
  }
  .css_img_fx_line {
    width: 32px;
    margin: 0 12px;
  }
  .css_img_fx_product .css_img_fx_line {
    width: 20px;
    margin: 0 8px;
  }
}