/* ==========================================================================
   张博士医考 · 2026 双11 年终活动页 —— 图片懒加载骨架屏
   配合 js/lazy-skeleton.js 使用：
   · .lz-img      图片盒子内显示灰色骨架 + 微光扫过（图片未加载完成时）
   · .is-loaded   图片加载完成，移除骨架并做一次轻微"显影"过渡
   · .is-error    图片加载失败，保留静态灰色占位，避免破图闪烁
   骨架尺寸完全由图片原有的 Tailwind 尺寸类（h-40 / h-44 / aspect-video / w-full）
   撑开，因此不会产生布局跳动（CLS）。
   ========================================================================== */
.lz-img {
  background-color: #f0f1f3;
  background-image: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: -120% 0;
  animation: lz-shimmer 1.4s linear infinite;
}

@keyframes lz-shimmer {
  0% {
    background-position: -120% 0;
  }
  100% {
    background-position: 120% 0;
  }
}

.lz-img.is-loaded {
  background-image: none;
  background-color: transparent;
  animation: lz-developed 0.45s ease-out both;
}

/* 图片"显影"：从略微过曝的占位状态过渡到正常画面 */
@keyframes lz-developed {
  from {
    filter: brightness(1.12) saturate(0.6);
  }
  to {
    filter: none;
  }
}

.lz-img.is-error {
  animation: none;
  background-image: none;
  background-color: #f0f1f3;
}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
  .lz-img,
  .lz-img.is-loaded {
    animation: none;
  }
}