/* 图片懒加载样式 */

/* 懒加载图片的默认状态 */
img.lazy-loading {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: #f8f8f8;
  background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0), 
                    linear-gradient(45deg, #f0f0f0 25%, transparent 25%, transparent 75%, #f0f0f0 75%, #f0f0f0);
  background-size: 20px 20px;
  background-position: 0 0, 10px 10px;
  animation: pulse 1.5s infinite ease-in-out;
  position: relative;
  overflow: hidden;
}

/* 懒加载图片加载完成后的状态 */
img.lazy-loaded {
  opacity: 1;
  transform: translateY(0);
  background-color: transparent;
  background-image: none;
  animation: none;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 懒加载图片加载错误的状态 */
img.lazy-error {
  opacity: 1;
  background-color: #fff3f3;
  background-image: none;
  animation: none;
}

/* 脉冲动画效果 */
@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.5;
  }
}

/* 图片加载过渡效果 */
img {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  max-width: 100%;
  height: auto;
}

/* 防止图片在加载过程中变形 */
img.lazy-loading {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 响应式图片容器 */
.image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 比例 */
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 图片占位符 */
.image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
}

/* 不同比例的图片容器 */
.image-container.square {
  padding-bottom: 100%; /* 1:1 比例 */
}

.image-container.portrait {
  padding-bottom: 133%; /* 3:4 比例 */
}

.image-container.landscape {
  padding-bottom: 66.67%; /* 3:2 比例 */
}

/* 图片加载进度指示器 */
.image-loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #B8A279;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 图片加载失败样式 */
img.image-load-error {
  background-color: #fff3f3;
  border: 1px dashed #ffcccc;
  border-radius: 4px;
}

/* 移动端优化 */
@media (max-width: 768px) {
  img.lazy-loading {
    background-size: 15px 15px;
    background-position: 0 0, 7.5px 7.5px;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  img.lazy-loaded {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  img.lazy-mobile {
    transform: translateY(5px); /* 移动端更小的位移 */
  }
  
  img.lazy-mobile.lazy-loaded {
    transform: translateY(0);
  }
  
  .image-container {
    padding-bottom: 66.67%; /* 移动端使用更适合的比例 */
  }
  
  /* 移动端图片加载指示器优化 */
  .image-loading-indicator {
    width: 30px;
    height: 30px;
    border-width: 2px;
  }
}

/* 小屏幕移动设备优化 */
@media (max-width: 480px) {
  img.lazy-loading {
    background-size: 10px 10px;
    background-position: 0 0, 5px 5px;
    animation: pulse 2s infinite ease-in-out; /* 移动端更慢的动画 */
  }
  
  img.lazy-loading {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  }
  
  img.lazy-loaded {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  }
  
  .image-loading-indicator {
    width: 25px;
    height: 25px;
  }
}