/* 图片懒加载优化样式 */

/* 背景图片懒加载 */
.home-slider {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.home-slider.loaded {
  background-image: url("/assets/img/home/home.webp");
}

.slider-service-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-service-bg.loaded {
  background-image: url("/assets/img/service/service.webp");
}

.slider-solution-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-solution-bg.loaded {
  background-image: url("/assets/img/solution/solution.webp");
}

.slider-about-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.slider-about-bg.loaded {
  background-image: url("/assets/img/about/about.jpg");
}

.slider-community-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-image 0.3s ease;
}

.slider-community-bg.loaded {
  background-image: url("/assets/img/community/community.webp");
}

.slider-common-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

.slider-common-bg.loaded {
  background-image: url("/assets/img/common-background.jpg");
}

.slider-career-bg {
  background-color: #f5f5f7;
  background-size: 100% auto;
  background-attachment: fixed;
  background-position: center;
  background-repeat: repeat;
  transition: background-image 0.3s ease;
}

.slider-career-bg.loaded {
  background-image: url("/assets/img/career/jigsaw.jpg");
}

/* 图片元素懒加载 */
.lazy-img {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-img.loaded {
  opacity: 1;
}

/* 加载占位符 */
.img-placeholder {
  background-color: #f5f5f7;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

/* 响应式优化 */
@media (max-width: 992px) {
  .home-slider,
  .slider-service-bg,
  .slider-solution-bg,
  .slider-about-bg,
  .slider-community-bg,
  .slider-common-bg {
    padding: 6rem 0;
    background-size: auto auto;
  }
}