/**
 * 漂浮圖片圖層 — 背景層 B + 前景層 C
 *
 * 由 assets/js/background-images.js 動態產生圖片實例，
 * 淡入淡出 + 緩慢漂浮縮放（Ken Burns），動畫用 Web Animations API 驅動。
 *
 * 三層 z-index（由上到下）：#page 內文 > C(-1) > A方格(-2) > B(-3)
 *   - B（#bg-images）：方格之下，承接全站灰底 #c1bfc0
 *   - C（#bg-foreground）：方格之上，透明背景（不可有底色，否則蓋住下層）
 */

#bg-images,
#bg-foreground {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

#bg-images {
	z-index: -3;            /* 最底層 */
	background-color: #c1bfc0; /* 全站灰底（實色，由本層承接） */
}

#bg-foreground {
	z-index: -1;            /* 在方格 A(-2) 之上、內文 #page 之下 */
	background-color: transparent; /* 透明，讓下方 A/B 透出 */
}

.bg-images__item {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;            /* 由 JS 動畫控制淡入淡出 */
	transform-origin: center center;
	will-change: transform, opacity;
	/* 位移一律用 transform，這裡不設 top/left 動畫 */
	backface-visibility: hidden;
}