/* ============================================================
   B&N International — 大图加载体验：占位骨架 / 淡入 / 失败兜底（ADJ-003）
   ------------------------------------------------------------
   配套：
     · inc/media.php        —— 服务端分级与标记（bn_media_img / bn_media_attrs）
     · assets/js/bn-lazy.js —— 延迟加载引擎（IntersectionObserver 门控）
   本文件不在 assets/dist/manifest.json 中，bn_asset() 会直接以
   「源文件 + ?v=mtime」输出 —— 改完即生效，无需重新构建。
   ============================================================ */

/* 1. 占位骨架
   ------------------------------------------------------------------
   所有经 bn_media_img() 输出的图片先铺一层品牌浅底（--bg-soft: #f5f8ff）。
   在图片字节到达之前，用户看到的是「与页面同色系的块」，而不是白色空洞或
   破图图标；配合媒体查询里的宽高属性预留空间，做到加载过程零布局跳动。 */
.bn-media {
  background-color: var(--bg-soft, #f5f8ff);
}

/* 2. 相关新闻卡片：容器也铺同色底
   ------------------------------------------------------------------
   淡入动画期间图片自身是半透明的，若容器是纯白，会短暂透出白色描边；
   容器同色即可让「骨架 → 照片」的过渡是连续的一整块。 */
.info-card-media {
  background-color: var(--bg-soft, #f5f8ff);
}

/* 3. 延迟档淡入（安全实现）
   ------------------------------------------------------------------
   刻意**不用** `.bn-media--defer { opacity: 0 }` 那种写法：一旦 JS 未执行或
   IntersectionObserver 因任何原因没有命中，图片会永久不可见（比不加载更糟）。
   这里改为「只在揭示那一刻播放一次入场动画」——动画结束停在 opacity:1，
   未揭示时保持默认的 opacity:1（显示骨架底色），不存在不可见的失败态。 */
.bn-media--defer.is-loaded {
  animation: bn-media-in 0.38s ease-out both;
}
@keyframes bn-media-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 4. 加载失败兜底
   ------------------------------------------------------------------
   重试后仍失败的图：去掉入场动画，保持可见（浏览器会显示 alt 文案与
   图片边框），用户能看明白「这里有一张图没加载出来」，而不是一片空白。 */
.bn-media.is-error {
  animation: none;
  background-color: var(--bg-soft, #f5f8ff);
  outline: 1px dashed var(--border, #dbe3f0);
  outline-offset: -1px;
}

/* 5. 尊重「减少动态效果」系统偏好
   ------------------------------------------------------------------
   开启后取消入场动画，图片直接显示。 */
@media (prefers-reduced-motion: reduce) {
  .bn-media--defer.is-loaded { animation: none; }
}