.banner {
  position: relative;
  overflow: hidden;
}

.banner .bg-image {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height:auto;
  object-fit: cover;
  z-index: 1;
}

.banner .light-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* === 流光 A：水平扫描光 === */
.banner .light-a {
  z-index: 2;

  /* 初始为空，由 JS 设置 */
  background: transparent;
  opacity: 0.8;

  /* 启用硬件加速，提升渲染性能 */
  transform: translateZ(0);
  will-change: background-image;

  -webkit-mask-image: url('media/banner/light_loop.png');
  mask-image: url('media/banner/light_loop.png');

  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;

  -webkit-mask-position: 50% 95%;
  mask-position: 50% 95%;/*not working & don't know why*/

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.banner .light-a-inner {
  z-index: 3;

  /* 初始为空，由 JS 设置 */
  background: transparent;
  opacity: 0.8;

  /* 启用硬件加速，提升渲染性能 */
  transform: translateZ(0);
  will-change: background-image;

  -webkit-mask-image: url('media/banner/light_loop_inner.png');
  mask-image: url('media/banner/light_loop_inner.png');

  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;

  -webkit-mask-position: 50% 95%;
  mask-position: 50% 95%;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}


/* === 流光 B：环绕渐变 + 滚动响应 === */
.banner .light-b {
  z-index: 4; /* 置于顶层，但低于其他UI */
  
  /* 初始：完全透明 */
  background: radial-gradient(
    ellipse at center,
    rgba(140, 94, 232, 0) 90%,   /* 初始透明区域很大 */
    rgba(140, 94, 232, 1) 100%
  );
  -webkit-mask-image: url('media/banner/light_trans.png');
  mask-image: url('media/banner/light_trans.png');

  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}



/* === Title and sub-title === */
.banner .title-text{
  z-index: 5;
  position: absolute;
  left:38.38%;
  width:23.24%;
  background: transparent;
}

.banner .trans-text{
  filter:opacity(0%);
}