/**
 * 全站背景動態方格
 *
 * 結構：
 *   .bg-grid              fixed 滿版背景層（z-index 在內容之下）
 *     .bg-grid__cells     CSS Grid，格子由 JS 動態產生
 *       .bg-grid__cell    單一格子，預設透明，.is-active 變橘色
 *     .bg-grid::after     SVG feTurbulence 噪點層（印刷紙質感）
 *
 * 欄數用 CSS 變數 --cols 控制（media query 切換桌機/手機），格子為正方形，
 * JS 透過 getComputedStyle 讀取這兩個值，確保 CSS 與 JS 同步。
 */

.bg-grid {
	position: fixed;
	inset: 0;
	z-index: -2;            /* 內容之下；C層(-1)之下、B層(-3)之上 */
	overflow: hidden;
	pointer-events: none;
	/* 灰底 #c1bfc0 已移到 B 層 (#bg-images)，此層透明讓下方圖片透出 */
	background-color: transparent;

	/* ── 可調參數 ───────────────────────── */
	--cols: 40;             /* 桌機橫向格數（格子邊長 = 視窗寬 ÷ 此值，正方形；列數由 JS 依高度算） */
	/* --cell-image（方塊亮起時的主視覺圖）由 inc/enqueue.php 用 wp_upload_dir()
	   動態注入，子目錄安裝也正確；此處不寫死根目錄相對路徑以免子目錄失效 */
	--fade: 0.6s;          /* 淡入淡出時間 */
}

/* 手機：較少欄數 → 較大的正方形格子 */
@media (max-width: 768px) {
	.bg-grid {
		--cols: 20;
	}
}

.bg-grid__cells {
	position: absolute;
	inset: 0;
	display: grid;
	/* grid-template-columns / grid-auto-rows 由 JS 設為正方形邊長；
	   列數蓋滿視窗高，超出部分由 .bg-grid 的 overflow:hidden 裁掉 */
	/* 不再半透明：方塊改為顯示主視覺圖、全不透明 */
}

/* 每格都貼主視覺圖，預設 opacity:0 隱藏；用 opacity 做淡入淡出，
   因為 background-image 無法直接 transition。 */
.bg-grid__cell {
	background-image: var(--cell-image);
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity var(--fade) ease-in-out;
}

/* 游標光暈通道：near-cursor 依 --halo（0–1）淡入圖片，形成漸層光暈。
   定義在 .is-active 之前，兩者皆亮時 is-active（全不透明）優先。 */
.bg-grid__cell.is-halo {
	opacity: var(--halo, 0);
}

/* 環境亮起：全不透明顯示主視覺圖 */
.bg-grid__cell.is-active {
	opacity: 1;
}

/* 噪點質感：SVG feTurbulence 烤成背景圖（非 PNG 貼圖） */
.bg-grid::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	background-size: 220px 220px;
	mix-blend-mode: multiply;
	opacity: 0.35;         /* 噪點強度 */
}

/* 尊重「減少動態」偏好：拿掉淡入淡出（JS 也會停在靜態一批） */
@media (prefers-reduced-motion: reduce) {
	.bg-grid__cell {
		transition: none;
	}
}