/*
 * =========================================================
 * 敏行物理 Physics Ambient V3.3
 *
 * 网页外全局物理动态背景。
 *
 * JS负责：
 * - 全局移动
 * - 外边界碰撞
 * - 网站边界碰撞
 * - 图案彼此碰撞
 *
 * CSS只负责：
 * - 图案外观
 * - SVG内部微动画
 * =========================================================
 */


/* 关闭最早测试Shell的大型静态装饰 */

.mx-bleed .mx-decor,
.mx-bleed > img,
.mx-bleed img[src*="decor/"],
.mx-bleed img[src*="/decor/"]{
  display:none !important;
}


/* ---------------------------------------------------------
 * 全局运动空间
 * --------------------------------------------------------- */

#mxPhysicsAmbientV3{
  position:fixed;
  inset:0;

  z-index:8800;

  overflow:hidden;

  pointer-events:none;
  user-select:none;

  contain:layout style paint;
}


/* ---------------------------------------------------------
 * 每个独立物理对象
 * --------------------------------------------------------- */

.mx-pv3-motif{
  position:absolute;

  left:0;
  top:0;

  width:var(--pv3-size,40px);
  height:var(--pv3-size,40px);

  opacity:var(--pv3-opacity,.27);

  color:
    rgba(45,91,105,.68);

  pointer-events:none;
  user-select:none;

  transform-origin:center center;

  will-change:transform;

  backface-visibility:hidden;
}


.mx-pv3-motif svg{
  display:block;

  width:100%;
  height:100%;

  overflow:visible;
}


/* ---------------------------------------------------------
 * 线稿体系
 * --------------------------------------------------------- */

.mx-pv3-line{
  fill:none;

  stroke:currentColor;

  stroke-width:1.45;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:
    non-scaling-stroke;
}


.mx-pv3-light{
  fill:none;

  stroke:
    rgba(65,105,115,.36);

  stroke-width:1;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:
    non-scaling-stroke;
}


.mx-pv3-gold{
  fill:
    rgba(184,143,51,.68);
}


.mx-pv3-gold-line{
  fill:none;

  stroke:
    rgba(184,143,51,.56);

  stroke-width:1.08;

  stroke-linecap:round;
  stroke-linejoin:round;

  vector-effect:
    non-scaling-stroke;
}


/* =========================================================
 * 图案自身内部动画
 *
 * 注意：
 * 图案整体位置由JS物理引擎管理，
 * 所以这里绝不再给 .mx-pv3-motif 设置 transform 动画。
 * =========================================================
 */


/* 原子轨道 */

@keyframes mxAtomOrbit{
  from{
    transform:rotate(0deg);
  }

  to{
    transform:rotate(360deg);
  }
}

.mx-pv3-atom{
  transform-box:fill-box;
  transform-origin:center;

  animation:
    mxAtomOrbit
    9s
    linear
    infinite;
}


/* 单摆 */

@keyframes mxPendulumSwing{
  0%{
    transform:rotate(-12deg);
  }

  50%{
    transform:rotate(12deg);
  }

  100%{
    transform:rotate(-12deg);
  }
}

.mx-pv3-pendulum{
  transform-box:view-box;
  transform-origin:22px 7px;

  animation:
    mxPendulumSwing
    3.1s
    ease-in-out
    infinite;
}


/* 弹簧振子 */

@keyframes mxSpringMass{
  0%{
    transform:translateX(-2px);
  }

  50%{
    transform:translateX(5px);
  }

  100%{
    transform:translateX(-2px);
  }
}

.mx-pv3-spring-block{
  animation:
    mxSpringMass
    2.8s
    ease-in-out
    infinite;
}


/* 光线脉动 */

@keyframes mxRayPulse{
  0%{
    opacity:.36;
  }

  50%{
    opacity:1;
  }

  100%{
    opacity:.36;
  }
}

.mx-pv3-ray{
  animation:
    mxRayPulse
    3.4s
    ease-in-out
    infinite;
}


/* 磁场 / 粒子 */

@keyframes mxFieldPulse{
  0%{
    opacity:.52;
    transform:scale(.94);
  }

  50%{
    opacity:1;
    transform:scale(1.10);
  }

  100%{
    opacity:.52;
    transform:scale(.94);
  }
}

.mx-pv3-field{
  transform-box:fill-box;
  transform-origin:center;

  animation:
    mxFieldPulse
    3.5s
    ease-in-out
    infinite;
}


/* 相空间 */

@keyframes mxPhaseMotion{
  0%{
    transform:rotate(-5deg);
  }

  50%{
    transform:rotate(6deg);
  }

  100%{
    transform:rotate(-5deg);
  }
}

.mx-pv3-phase{
  transform-box:fill-box;
  transform-origin:center;

  animation:
    mxPhaseMotion
    4.7s
    ease-in-out
    infinite;
}


/* ---------------------------------------------------------
 * 已有浅边界仍在动态图案之上
 * --------------------------------------------------------- */

.mx-boundary-layer{
  z-index:9000 !important;
}


/* 测试面板最高 */

.mx-visual-panel{
  z-index:10000 !important;
}