/* ERP 通用图片渐进加载占位样式
 *
 * .erp-lazy-img: 图片未加载时的灰色色块 + 脉冲动画
 * .erp-lazy-img--loaded: 图片加载完成后清空背景，让 img 显出来 + 淡入
 * .erp-lazy-img--error: 加载失败状态（背景与 loaded 一样清掉，内部 caller 会塞 📦）
 */

.erp-lazy-img {
  /* 浅色渐变 + 横向移动制造"脉冲"感（比单纯改 opacity 自然） */
  background: linear-gradient(
    90deg,
    rgba(220, 220, 220, 0.7) 0%,
    rgba(240, 240, 240, 0.9) 50%,
    rgba(220, 220, 220, 0.7) 100%
  );
  background-size: 200% 100%;
  animation: erp-lazy-pulse 1.4s ease-in-out infinite;
  overflow: hidden;
  /* 防止占位 div 在 grid/flex 里塌掉 */
  display: block;
}

@keyframes erp-lazy-pulse {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.erp-lazy-img.erp-lazy-img--loaded,
.erp-lazy-img.erp-lazy-img--error {
  background: none;
  animation: none;
}

.erp-lazy-img.erp-lazy-img--loaded img {
  animation: erp-lazy-fadein 0.22s ease-in;
}

@keyframes erp-lazy-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 暗黑主题（项目用 [data-theme="dark"] 或 .theme-dark，保险都加） */
[data-theme="dark"] .erp-lazy-img,
.theme-dark .erp-lazy-img,
html.dark .erp-lazy-img {
  background: linear-gradient(
    90deg,
    rgba(45, 45, 45, 0.7) 0%,
    rgba(60, 60, 60, 0.9) 50%,
    rgba(45, 45, 45, 0.7) 100%
  );
  background-size: 200% 100%;
}