/* ============================================================
   Yinfu 主题 · 图片占位加载 + 丝滑衔接 (2026-08-28)
   1) 图片加载前：显示「微光扫过」shimmer 骨架占位
   2) 图片加载完成后：缓动淡入，丝滑衔接
   兼容白天/深色模式，尊重 prefers-reduced-motion，
   与 fx 特效、InstantClick、hover 缩放无冲突。
   ============================================================ */

/* 微光扫过占位动画 */
@keyframes yf-shimmer {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

/* 有 .media 容器（封面图 / 正文图）：shimmer 放在容器上，
   图片透明淡入后覆盖 shimmer，视觉上丝滑衔接 */
.yf-ph {
  background-color: #e8e8ee;
  background-image: linear-gradient(100deg,
      transparent 40%,
      rgba(255, 255, 255, .75) 50%,
      transparent 60%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  animation: yf-shimmer 1.5s ease-in-out infinite;
}

.dark .yf-ph {
  background-color: #26262c;
  background-image: linear-gradient(100deg,
      transparent 40%,
      rgba(255, 255, 255, .07) 50%,
      transparent 60%);
}

/* 加载完成后关闭 shimmer（避免半透明图片透出 / 节省 CPU） */
.yf-ph.yf-ph-done {
  animation: none;
  background-image: none;
}

/* 图片本体：加载前透明，加载完成后淡入（transform 同时保留 hover 缩放过渡） */
img.yf-fade {
  opacity: 0;
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .5s ease;
}

img.yf-fade.yf-fade-in {
  opacity: 1;
}

/* 尊重系统「减弱动效」设置 */
@media (prefers-reduced-motion: reduce) {
  .yf-ph { animation: none; }
  img.yf-fade { transition: none; }
}