/**
 * 站点详情背景装饰层（思路同 gm35 / OneNav：多枚 SVG + CSS transform 关键帧循环）
 * 资源：assets/svg/fx/shape-*.svg
 */
.gm35-site-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.gm35-page-site-layout .gm35-site-page-scroll > .gm35-ws-inner {
  position: relative;
  z-index: 1;
}

.gm35-site-fx img {
  position: absolute;
  display: block;
  width: clamp(72px, 11vw, 150px);
  height: auto;
  user-select: none;
  opacity: 0.88;
}

.gm35-site-fx-s01 {
  top: 10%;
  right: 38%;
  animation: gm35fxFramesTwo 13s linear infinite;
}
.gm35-site-fx-s02 {
  top: 26%;
  left: 14%;
  width: clamp(64px, 9vw, 120px) !important;
  animation: gm35fxFramesFour 25s linear infinite alternate;
}
.gm35-site-fx-s03 {
  top: 32%;
  left: 48%;
  width: clamp(56px, 8vw, 100px) !important;
  animation: gm35fxFramesThree 35s linear infinite alternate;
}
.gm35-site-fx-s04 {
  top: 42%;
  right: 20%;
  animation: gm35fxFramesFour 20s linear infinite alternate;
}
.gm35-site-fx-s05 {
  bottom: 58%;
  right: 26%;
  width: clamp(68px, 10vw, 130px) !important;
  animation: gm35fxFramesOne 15s linear infinite;
}
.gm35-site-fx-s06 {
  bottom: 70%;
  left: 36%;
  width: clamp(90px, 14vw, 170px) !important;
  animation: gm35fxFramesFour 22s linear infinite alternate;
}
.gm35-site-fx-s07 {
  top: 52%;
  left: 8%;
  width: clamp(60px, 9vw, 115px) !important;
  animation: gm35fxFramesThree 18s linear infinite alternate;
}
.gm35-site-fx-s08 {
  bottom: 18%;
  right: 12%;
  animation: gm35fxFramesOne 17s linear infinite;
}
.gm35-site-fx-s09 {
  top: 62%;
  right: 8%;
  width: clamp(100px, 18vw, 220px) !important;
  animation: gm35fxFramesTwo 24s linear infinite;
}
.gm35-site-fx-s10 {
  bottom: 42%;
  left: 52%;
  width: clamp(70px, 10vw, 130px) !important;
  animation: gm35fxFramesThree 28s linear infinite alternate;
}

@keyframes gm35fxFramesOne {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  20% {
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes gm35fxFramesTwo {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  20% {
    transform: translate(73px, -1px) rotate(36deg) scale(0.9);
  }
  40% {
    transform: translate(141px, 72px) rotate(72deg) scale(1);
  }
  60% {
    transform: translate(83px, 122px) rotate(108deg) scale(1.12);
  }
  80% {
    transform: translate(-40px, 72px) rotate(144deg) scale(1.05);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes gm35fxFramesThree {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-55px, 35px) rotate(-22deg);
  }
  50% {
    transform: translate(40px, 70px) rotate(18deg);
  }
  75% {
    transform: translate(65px, -25px) rotate(35deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

@keyframes gm35fxFramesFour {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate(48px, -28px) rotate(-24deg) scale(1.08);
  }
  66% {
    transform: translate(-32px, 46px) rotate(22deg) scale(0.94);
  }
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gm35-site-fx img {
    animation: none !important;
  }
}

@media (max-width: 767.98px) {
  .gm35-site-fx-s05,
  .gm35-site-fx-s06,
  .gm35-site-fx-s08 {
    opacity: 0.65;
  }
}