/* 左侧动画区域 */
.stage-container {
  width: 100%;
  height: 750px;
  margin: 100px auto 200px;
  position: relative;
  overflow: hidden;
}
.left-section {
  width: 1500px;
  height: 750px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  perspective: 2200px; /* 增加透视距离，减小大小差异 */
  overflow: hidden; /* 确保不超出边界 */
}

/* 3D舞台容器 */
.stage {
  width: 100%;
  height: 100%;
  position: absolute;
  top: calc(50% - 115px);
  left: 50%; /* 位于左侧区域的中心 */
  transform: translate(-50%, -50%);
  transform-style: preserve-3d; /* 保持3D空间关系 */
}

/* 图片组容器 */
.image-group {
  position: absolute;
  left: 50%; /* 水平居中在舞台 */
  top: 50%; /* 垂直居中在舞台 */
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
}

/* 图片样式 - 卡片风格 */
.image-item {
  position: absolute;
  width: 160px;
  height: 200px;
  border-radius: 12px; /* 增加圆角 */
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* 第1组（前景组）- 7张图片(1-7)的个别定位，移动距离最大 */
.image-group[data-group='0'] .image-item:nth-child(1) {
  left: -80px;
  top: 20px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(2) {
  left: 180px;
  top: -60px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(3) {
  left: 50px;
  top: 260px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(4) {
  left: -260px;
  top: -100px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(5) {
  left: -300px;
  top: 160px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(6) {
  left: 360px;
  top: 160px;
  transform: translateZ(160px);
}
.image-group[data-group='0'] .image-item:nth-child(7) {
  left: -540px;
  top: 60px;
  transform: translateZ(160px);
}

/* 第2组（背景组）- 7张图片(8-14)的个别定位 */
.image-group[data-group='1'] .image-item:nth-child(1) {
  left: 60px;
  top: 120px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(2) {
  left: -160px;
  top: 260px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(3) {
  left: -160px;
  top: -180px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(4) {
  left: -440px;
  top: -120px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(5) {
  left: -480px;
  top: 200px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(6) {
  left: 20px;
  top: -100px;
  transform: translateZ(130px);
}
.image-group[data-group='1'] .image-item:nth-child(7) {
  left: 340px;
  top: 160px;
  transform: translateZ(130px);
}

/* 第3组（中间组）- 7张图片(15-21)的个别定位，中心位置 */
.image-group[data-group='2'] .image-item:nth-child(1) {
  left: -500px;
  top: -160px;
}
.image-group[data-group='2'] .image-item:nth-child(2) {
  left: 220px;
  top: -160px;
}
.image-group[data-group='2'] .image-item:nth-child(3) {
  left: 200px;
  top: 200px;
}
.image-group[data-group='2'] .image-item:nth-child(4) {
  left: -680px;
  top: -10px;
}
.image-group[data-group='2'] .image-item:nth-child(5) {
  left: -220px;
  top: 240px;
}
.image-group[data-group='2'] .image-item:nth-child(6) {
  left: -560px;
  top: 200px;
}
.image-group[data-group='2'] .image-item:nth-child(7) {
  left: 380px;
  top: 40px;
}

/* 第4组（背景组）- 7张图片(22-28)的个别定位 */
.image-group[data-group='3'] .image-item:nth-child(1) {
  left: -480px;
  top: -100px;
  transform: translateZ(-150px);
}
.image-group[data-group='3'] .image-item:nth-child(2) {
  left: 240px;
  top: -20px;
  transform: translateZ(-200px);
}
.image-group[data-group='3'] .image-item:nth-child(3) {
  left: -180px;
  top: -240px;
  transform: translateZ(100px);
}
.image-group[data-group='3'] .image-item:nth-child(4) {
  left: -180px;
  top: 280px;
  transform: translateZ(-200px);
}
.image-group[data-group='3'] .image-item:nth-child(5) {
  left: -400px;
  top: 140px;
  transform: translateZ(-150px);
}
.image-group[data-group='3'] .image-item:nth-child(6) {
  left: -100px;
  top: 20px;
  transform: translateZ(-150px);
}
.image-group[data-group='3'] .image-item:nth-child(7) {
  left: 360px;
  top: 220px;
  transform: translateZ(-150px);
}

/* 第5组（最远背景组）- 6张图片(29-34)的个别定位 */
.image-group[data-group='4'] .image-item:nth-child(1) {
  left: -360px;
  top: -240px;
  transform: translateZ(-400px);
}
.image-group[data-group='4'] .image-item:nth-child(2) {
  left: -100px;
  top: -120px;
  transform: translateZ(-400px);
}
.image-group[data-group='4'] .image-item:nth-child(3) {
  left: 140px;
  top: -170px;
  transform: translateZ(-200px);
}
.image-group[data-group='4'] .image-item:nth-child(4) {
  left: 360px;
  top: 40px;
  transform: translateZ(-400px);
}
.image-group[data-group='4'] .image-item:nth-child(5) {
  left: 20px;
  top: 200px;
}
.image-group[data-group='4'] .image-item:nth-child(6) {
  left: -380px;
  top: 140px;
  transform: translateZ(-300px);
}

@media screen and (max-width: 1023px) {
  .stage-container {
    width: 100%;
    height: 11rem !important;
    padding: 0;
    margin: 0.56rem 0 2rem;
    position: relative;
    overflow: hidden;
  }
  .left-section {
    width: 100%;
    height: 11rem !important;
    perspective: 20rem; /* 调整透视距离，减小差异 */
  }

  .image-item {
    width: 1.6rem;
    height: 2rem;
    border-radius: 0.16rem;
  }

  .stage {
    top: 45%;
    left: calc(50% - 0.8rem);
    height: 11rem;
  }

  /* 移动端图片组位置缩放 - 第1组 */
  .image-group[data-group='0'] .image-item:nth-child(1) {
    left: 0.2rem;
    top: 0rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(2) {
    left: 2.4rem;
    top: 0.1rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(3) {
    left: -0.5rem;
    top: 2.9rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(4) {
    left: -1.4rem;
    top: -1.6rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(5) {
    left: -1.6rem;
    top: 0.8rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(6) {
    left: 2rem;
    top: 2.6rem;
    transform: translateZ(2rem);
  }
  .image-group[data-group='0'] .image-item:nth-child(7) {
    left: 1.6rem;
    top: -2.2rem;
    transform: translateZ(2rem);
  }
  /* 第2组移动端位置 */
  .image-group[data-group='1'] .image-item:nth-child(1) {
    left: 2.4rem;
    top: 2.5rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(2) {
    left: -0.5rem;
    top: -2.5rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(3) {
    left: 1.9rem;
    top: -2.7rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(4) {
    left: -2rem;
    top: -0.5rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(5) {
    left: -2.2rem;
    top: 2.6rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(6) {
    left: 2.6rem;
    top: -0.4rem;
    transform: translateZ(1.25rem);
  }
  .image-group[data-group='1'] .image-item:nth-child(7) {
    left: 0.2rem;
    top: 3.6rem;
    transform: translateZ(1.25rem);
  }

  /* 第3组移动端位置 - 中间位置 */
  .image-group[data-group='2'] .image-item:nth-child(1) {
    left: -1.6rem;
    top: -2.8rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(2) {
    left: 2.8rem;
    top: -3.2rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(3) {
    left: 1rem;
    top: 1.6rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(4) {
    left: -0.8rem;
    top: 3rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(5) {
    left: -2rem;
    top: 0.8rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(6) {
    left: 0.5rem;
    top: -3rem;
  }
  .image-group[data-group='2'] .image-item:nth-child(7) {
    left: 2.4rem;
    top: 3.8rem;
  }

  /* 第4组移动端位置 - 按2/3比例缩小 */
  .image-group[data-group='3'] .image-item:nth-child(1) {
    left: -2rem;
    top: -1.5rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(2) {
    left: -2.2rem;
    top: 2.6rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(3) {
    left: 0.2rem;
    top: -0.8rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(4) {
    left: 2.4rem;
    top: -0.8rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(5) {
    left: 2.2rem;
    top: 2.6rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(6) {
    left: -1rem;
    top: 4.4rem;
    transform: translateZ(-1.25rem);
  }
  .image-group[data-group='3'] .image-item:nth-child(7) {
    left: 1.2rem;
    top: 4.2rem;
    transform: translateZ(-1.25rem);
  }

  /* 第5组移动端位置 - 按2/3比例缩小 */
  .image-group[data-group='4'] .image-item:nth-child(1) {
    left: -1.8rem;
    top: 0rem;
    transform: translateZ(-2rem);
  }
  .image-group[data-group='4'] .image-item:nth-child(2) {
    left: -2rem;
    top: -4rem;
    transform: translateZ(-2rem);
  }
  .image-group[data-group='4'] .image-item:nth-child(3) {
    left: 3rem;
    top: -3.7rem;
    transform: translateZ(-2rem);
  }
  .image-group[data-group='4'] .image-item:nth-child(4) {
    left: 0.6rem;
    top: -3.8rem;
    transform: translateZ(-2rem);
  }
  .image-group[data-group='4'] .image-item:nth-child(5) {
    left: 2.8rem;
    top: 0.8rem;
    transform: translateZ(-2rem);
  }
  .image-group[data-group='4'] .image-item:nth-child(6) {
    left: 0.8rem;
    top: 1rem;
    transform: translateZ(-2rem);
  }

  .right-section {
    width: 100%;
    height: fit-content;
    padding: 1.2rem 0;
  }
  .right-section .cross_title {
    width: 100%;
    margin-bottom: 0.6rem;
  }
  .right-section .cross_desc {
    width: 100%;
    margin-bottom: 0.32rem;
  }
  .right-section .cross_desc:last-child {
    margin-bottom: 0;
  }
}