/* ============================================================
   main-particles.css — 哈吉站首頁 Hero「∞ 恆運轉」粒子系統
   (main.php 載入;載於 site.css 之後。2026-07-13 業主裁示自
   main-fable-particleSystems.php 實驗頁轉正,詳 260713_03 日誌)
   前綴 haji-psys-,所有覆寫作用域限 .haji-psys-hero 之內,
   不動任何共用樣式;色彩集中 --psys-* 變數(業主調整入口)。

   概念:hero=暗色虛空藍圖(保留 48px 格線語彙、僅反相),
        右側 3D 無限符號(品牌 ∞/8)粒子環緩慢自轉,
        橘紅光流沿軌道無盡循環=「系統恆運轉」
        (呼應事實:最長連續使用 10 年,仍在線上)。
   頁面其餘區段維持 C v2.3 淺色藍圖世界,hero 底緣以墨線收邊。
   ============================================================ */
.haji-psys-hero {
	/* 可調層:虛空底/格線/文字(dark 域專用,不進 tokens.css 汙染全站) */
	--psys-void:      #0b1119;                  /* 虛空底(自 --c-ink 深化) */
	--psys-void-deep: #070c12;                  /* 邊緣更沉 */
	--psys-void-glow: #101b2a;                  /* ∞ 所在處微光 */
	--psys-grid:      rgba(151, 176, 203, .06); /* 暗域格線(=--c-gridline 反相精神) */
	--psys-ink:       #eef3f8;                  /* 暗域主文字 */
	--psys-soft:      #93a4b6;                  /* 暗域輔文字(對比 ≥4.5:1) */
	--psys-accent:    #ff7a4d;                  /* 暗域眉標/讀數(brand 橘提亮保對比) */
}

/* ── hero 容器:虛空+格線+右上微光;墨線收底接回淺色世界 ── */
.nx-page--home .nx-sec--hero.haji-psys-hero {
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(var(--psys-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--psys-grid) 1px, transparent 1px),
		radial-gradient(120% 95% at 68% 42%, var(--psys-void-glow) 0%, var(--psys-void) 52%, var(--psys-void-deep) 100%);
	background-size: var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size), 100% 100%;
	border-bottom: 2px solid var(--c-ink);
	min-height: clamp(560px, 82vh, 780px);
	display: flex;
	align-items: center;
}

/* 粒子畫布:全幅墊底(∞ 置右由 JS world 座標控),不擋互動 */
.haji-psys-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.haji-psys-hero .container { position: relative; z-index: 1; }

/* ── 文案暗域對位(僅覆寫顏色,字級/版心全承接 site.css)── */
.haji-psys-hero h1 { color: var(--psys-ink); }
.haji-psys-hero .nx-c-eyebrow { color: var(--psys-accent); }
.nx-page--home .haji-psys-hero .nx-hero-lead { color: var(--psys-soft); max-width: 30em; }

/* 按鈕:primary 橘紅在暗底天然成立;outline 轉光邊幽靈鈕 */
.haji-psys-hero .nx-c-btn--outline {
	border: 2px solid rgba(238, 243, 248, .78);
	color: var(--psys-ink);
	background: transparent;
}
.haji-psys-hero .nx-c-btn--outline:hover {
	border-color: #fff; color: #fff;
	box-shadow: 4px 4px 0 rgba(255, 88, 33, .28);
}

/* ── console 事實列(mono 讀數;內容=Company Facts 摘要,count-up 由 nx-fx.js 全域接手)── */
.haji-psys-console {
	display: flex; flex-wrap: wrap; gap: .35rem 1.7rem;
	margin: 2.6rem 0 0; padding-top: 1.1rem;
	border-top: 1px dashed rgba(238, 243, 248, .22);
	font-family: var(--f-mono); font-size: .78rem; letter-spacing: .04em;
}
.haji-psys-console > div { display: flex; gap: .5rem; align-items: baseline; }
.haji-psys-console dt { color: var(--psys-soft); font-weight: 400; }
.haji-psys-console dd { margin: 0; color: var(--psys-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.haji-psys-console dd span { color: var(--psys-accent); }

/* ── 右下讀數(藍圖幽默,同「本頁格線間距 48px」一脈)── */
.haji-psys-cap {
	position: absolute; right: 1.1rem; bottom: .9rem; z-index: 1;
	font-family: var(--f-mono); font-size: .66rem; letter-spacing: .22em;
	color: rgba(238, 243, 248, .34); pointer-events: none; -webkit-user-select: none; user-select: none;
}
.haji-psys-cap b { color: rgba(255, 122, 77, .8); font-weight: 700; }

/* ── 行動版:改序列式構圖——文案/console 之下留暗色舞台,∞ 縮小置於其中
      (不與文字疊,可讀性與視覺效果兩全;JS 依斷點下移 ∞)── */
@media (max-width: 991px) {
	.nx-page--home .nx-sec--hero.haji-psys-hero { min-height: 0; display: block; padding-bottom: 15rem; }
	.haji-psys-cv { opacity: .8; }
	.haji-psys-cap { display: none; }
}