/* =====================================================
   qing-lazyload  —  图片加载占位与淡入
   前缀: qlz-

   配合 assets/js/qing-lazyload.js 使用。分工：
     JS  给 <img> 打 data-qlz 标记（wait / done / error）
     CSS 按标记显示微光占位或淡入图片

   为什么要 JS 参与：CSS 无法选中「尚未加载完的图片」——
   :loading 之类的伪类并不存在。

   懒加载本身用浏览器原生的 loading="lazy"，不自己写 IntersectionObserver：
   原生实现由浏览器按网络状况和滚动速度调度，比脚本更准，也不占主线程。
   本文件只解决「加载完成前是一片空白」的观感问题。

   ---------------------------------------------------------------
   重要：占位画在 <img> 自己身上，绝不碰父元素

   最初的实现是给父元素加 position: relative 再用 ::after 铺一层灰色占位。
   那个做法有个隐蔽的副作用：把一个原本 position: static 的元素改成
   relative，会改变它在层叠顺序里的位置 —— 定位元素总是画在静态兄弟
   之上，与源码先后无关。

   产品详情首屏（.qph2-wrap--full）正好是这种结构：图片容器和文案容器
   同处一个 grid 格子、都是 static，靠「文案写在后面」压在图片上。脚本
   一给图片容器加 relative，图片就翻到文案前面，灰色占位层直接把整段
   文字盖住 —— 表现为「文字消失了」。

   现在改成把微光画成 <img> 自身的 background：
   - 不改任何父元素的定位，层叠顺序完全不变；
   - 图片位图加载完成后自然盖住背景，无需淡出遮罩；
   - 也不再需要判断「图片是不是父元素唯一的子节点」。
   ===================================================== */

/* 等待加载：显示微光占位。
   background 画在图片自己的盒子里，位图一到就把它盖住。
   注意用 background-color + background-image 而不是简写，
   这样两者可以分别被下面的规则覆盖。 */
img[data-qlz="wait"] {
  background-color: #e9edf2;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: qlz-shimmer 1.3s ease-in-out infinite;
}

/* 加载完成：撤掉占位背景，位图自然显现。

   ---------------------------------------------------------------
   这里刻意不做 opacity 淡入

   曾经写成 `animation: qlz-fade 0.36s ease both`，那是个坑：
   animation-fill-mode: both 会让动画在结束后永久保持生效状态，浏览器
   因此一直把这个 <img> 视作「正在动画 opacity 的元素」，持续给它一个
   层叠上下文（stacking context）。

   而按 CSS 的绘制顺序，一个创建了层叠上下文、z-index 为 auto 的元素，
   会被提到「定位元素 z-index:0」那一层绘制 —— 也就是跳到普通流内容的
   上面。产品详情首屏正好是「图片与文案同处一个 grid 格子、都不定位、
   靠文案写在后面压住图片」的结构，于是图片翻上来盖住整段文字。
   表现为「刷新后先看得见文字，图片一加载完文字就没了」。

   微光占位换成位图这个过程本身已经是一次视觉过渡，再叠一层淡入
   收益很小，不值得为它引入层叠上下文的风险。 */
img[data-qlz="done"] {
  background-image: none;
  background-color: transparent;
}

/* 加载失败：撤掉占位，让浏览器的破图图标显出来 ——
   那本身是有意义的反馈。不撤的话微光会永远转下去。 */
img[data-qlz="error"] {
  background-image: none;
  background-color: transparent;
  animation: none;
}

@keyframes qlz-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

/* 尊重「减少动态效果」的系统设置：前庭功能敏感的用户会被循环动画影响。
   占位底色保留（它是信息：这里将出现一张图），只去掉动画。 */
@media (prefers-reduced-motion: reduce) {
  img[data-qlz="wait"] {
    animation: none;
    background-image: none;
  }
}

/* 打印时不要灰色占位块，否则会印在纸上 */
@media print {
  img[data-qlz] {
    background-image: none;
    background-color: transparent;
    animation: none;
  }
}