/* ==========================================================
   作品图片加载占位（配合 js/lazyimg.js 使用）
   - 未加载时按图片真实比例占好位置，显示"图片加载中"
   - 加载完成后淡入，页面不会因图片撑开而跳动
   ========================================================== */

img.lazy-img {
	/* 关键：height 必须是 auto。
	   width/height 属性在浏览器里除了算占位比例，还会被当成真实尺寸使用，
	   如果 CSS 只覆盖了 width，height 就会取属性值，图片被强行拉伸变形。
	   height:auto + 属性里的宽高 => 加载前按比例占位，加载后按原图比例显示。 */
	height: auto;

	--ph-a: #ececec;
	--ph-b: #f7f7f7;
	background-color: var(--ph-a);
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27150%27%20height%3D%2758%27%20viewBox%3D%270%200%20150%2058%27%3E%3Ccircle%20cx%3D%2775%27%20cy%3D%2719%27%20r%3D%2710%27%20fill%3D%27none%27%20stroke%3D%27%23c4c4c4%27%20stroke-width%3D%272.4%27%20stroke-dasharray%3D%2717%2011%27%20stroke-linecap%3D%27round%27%2F%3E%3Ctext%20x%3D%2775%27%20y%3D%2750%27%20text-anchor%3D%27middle%27%20font-family%3D%27PingFang%20SC%2CMicrosoft%20YaHei%2Csans-serif%27%20font-size%3D%2712%27%20fill%3D%27%23a8a8a8%27%3E%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E4%B8%AD%3C%2Ftext%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 132px auto;
	animation: lazyPulse 1.6s ease-in-out infinite;
}

/* 加载完成：去掉占位，淡入图片 */
img.lazy-img.is-in {
	background-image: none;
	background-color: transparent;
	animation: lazyFade 0.45s ease both;
}

/* 加载失败 */
img.lazy-img.is-error {
	background-color: var(--ph-a);
	background-image: none;
	animation: none;
}

@keyframes lazyPulse {
	0%, 100% { background-color: var(--ph-a); }
	50% { background-color: var(--ph-b); }
}

@keyframes lazyFade {
	from { opacity: 0.15; }
	to { opacity: 1; }
}

/* 深色区块里的占位换成暗色，避免刺眼 */
.show-01[style*="#111"] img.lazy-img,
.show[style*="#111"] img.lazy-img {
	--ph-a: #1a1a1a;
	--ph-b: #242424;
}

.show-01[style*="#111"] img.lazy-img.is-in,
.show[style*="#111"] img.lazy-img.is-in {
	background-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	img.lazy-img { animation: none; }
	img.lazy-img.is-in { animation: none; }
}