/* ==========================================================================
   折云网络 · 首屏「迷雾」氛围层  mist_effect.css
   落点：首页大图轮播容器 .Rotation-layoutcontainer、内页横幅 .globalBanner .pagebanner-relative
   实现：纯 CSS 伪元素（不改 HTML/JS），绝对定位 → 不产生布局位移（CLS = 0）
   优化：只动 transform（走合成层，不触发重排重绘）；pointer-events:none 绝不挡点击；
        尊重 prefers-reduced-motion；手机端降低浓度与帧率压力；不滚动、不改变背景
   ========================================================================== */

/* ---------- 1) 容器准备（不改变原有排版） ---------- */
.Rotation-layoutcontainer{position:relative;}
.globalBanner .pagebanner-relative{position:relative;}

/* ---------- 2) 迷雾层本体 ---------- */
.Rotation-layoutcontainer::after,
.globalBanner .pagebanner-relative::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:72%;
  pointer-events:none;            /* 关键：不拦截任何点击 */
  z-index:2;
  opacity:.9;
  background:
    /* 左侧淡雾 */
    radial-gradient(58% 76% at 16% 92%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.28) 42%, rgba(255,255,255,0) 72%),
    /* 右侧淡雾（错位，制造层流感） */
    radial-gradient(52% 70% at 76% 96%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.22) 46%, rgba(255,255,255,0) 74%),
    /* 品牌色极淡的云雾底 */
    radial-gradient(90% 62% at 52% 100%, rgba(22,93,255,.10) 0%, rgba(22,93,255,.04) 46%, rgba(22,93,255,0) 70%),
    /* 与下方内容衔接的白雾渐变 */
    linear-gradient(to top, rgba(255,255,255,.94) 0%, rgba(255,255,255,.5) 26%, rgba(255,255,255,0) 62%);
  transform:translate3d(0,0,0) scale(1.03);
  transform-origin:50% 100%;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  animation:zyMistDrift 38s ease-in-out infinite alternate;
}

/* ---------- 3) 漂移动画（只动 transform） ---------- */
@keyframes zyMistDrift{
  0%   {transform:translate3d(-1.6%, 0.4%, 0) scale(1.03);}
  50%  {transform:translate3d(0.4%, -0.4%, 0) scale(1.055);}
  100% {transform:translate3d(1.8%, -0.8%, 0) scale(1.075);}
}

/* ---------- 4) 尊重「减弱动态效果」：保留静态迷雾，不做动画 ---------- */
@media (prefers-reduced-motion: reduce){
  .Rotation-layoutcontainer::after,
  .globalBanner .pagebanner-relative::after{
    animation:none!important;will-change:auto;
  }
}

/* ---------- 5) 手机端：降低浓度与高度，放缓节奏（减少 GPU 负担） ---------- */
@media (max-width:768px){
  .Rotation-layoutcontainer::after,
  .globalBanner .pagebanner-relative::after{
    height:58%;
    opacity:.75;
    animation-duration:56s;
    background:
      radial-gradient(64% 72% at 20% 94%, rgba(255,255,255,.6) 0%, rgba(255,255,255,.22) 44%, rgba(255,255,255,0) 74%),
      radial-gradient(88% 56% at 50% 100%, rgba(22,93,255,.08) 0%, rgba(22,93,255,0) 68%),
      linear-gradient(to top, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 28%, rgba(255,255,255,0) 64%);
  }
}
@media (max-width:380px){
  .Rotation-layoutcontainer::after,
  .globalBanner .pagebanner-relative::after{height:52%;opacity:.7;}
}

/* ---------- 6) 低端设备/省电模式兜底：直接静态（不占用合成动画） ---------- */
@media (update: slow){
  .Rotation-layoutcontainer::after,
  .globalBanner .pagebanner-relative::after{animation:none!important;will-change:auto;}
}

/* ---------- 7) 手机端首屏（wap 版容器 section.Swiper-m）---------- */
.Swiper-m{position:relative;}
.Swiper-m::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:52%;
  pointer-events:none;
  z-index:2;
  opacity:.7;
  background:
    radial-gradient(62% 70% at 22% 96%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.2) 44%, rgba(255,255,255,0) 74%),
    radial-gradient(86% 54% at 50% 100%, rgba(22,93,255,.08) 0%, rgba(22,93,255,0) 70%),
    linear-gradient(to top, rgba(255,255,255,.9) 0%, rgba(255,255,255,.38) 26%, rgba(255,255,255,0) 62%);
  transform:translate3d(0,0,0) scale(1.03);
  transform-origin:50% 100%;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  animation:zyMistDrift 52s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){
  .Swiper-m::after{animation:none!important;will-change:auto;}
}
@media (max-width:380px){
  .Swiper-m::after{height:46%;opacity:.65;}
}