/*
 * 首頁（方向 B「工程日誌」）專用樣式，只在首頁載入（functions.php）。
 * 區塊依 docs/specs/homepage-direction-b.md；token 沿用 style.css 的 :root，
 * 這裡只補 REMUS 動畫要的 --reveal、--dim（值來自 prototypes/remus-matrix.html，theme.md「設計 token」）。
 * 手機優先：40em（640px）兩欄卡片、48em（768px）平板、64em（1024px）以上桌面、72em（1152px）專案案卷並排。
 */

.front-page {
	--reveal: #7A7D74;  /* 游標附近浮現的背景數字 */
	--dim: #262927;     /* 背景點 */
	--section-gap: clamp(4.5rem, 3rem + 5vw, 7.5rem);
	--frame: 8px;       /* 面板圓角：比按鈕的 --radius 大一點，像一扇視窗 */
}

/* 區塊標題：指令列＋h2（沿用 site.css 的 .cmd） ============================= */

.home-section {
	padding-top: var(--section-gap);
}

.home-head {
	max-width: 46rem;
	margin-bottom: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
}

.home-head .cmd {
	margin-bottom: .625rem;
}

.home-head__title {
	margin: 0;
	font-size: clamp(1.625rem, 1.15rem + 1.9vw, 2.5rem);
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: .02em;
	text-wrap: balance;
}

.home-head__lead {
	max-width: 38em;
	margin: 1rem 0 0;
	color: var(--soft);
	font-size: 1.0625rem;
	line-height: 1.85;
}

/* 按鈕 ===================================================================== */

.home-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: .5rem 1.75rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	text-decoration: none;
}

.home-btn--primary {
	border-color: var(--accent);
	background: var(--accent);
	color: var(--bg);
}

.home-btn--primary:hover {
	border-color: color-mix(in srgb, var(--accent) 80%, var(--text));
	background: color-mix(in srgb, var(--accent) 80%, var(--text));
	color: var(--bg);
}

.home-btn--ghost {
	border-color: color-mix(in srgb, var(--muted) 60%, transparent);
	color: var(--text);
	font-weight: 400;
}

.home-btn--ghost:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Hero：$ whoami → REMUS 點陣 → 我思、故我在 =================================
 * 全寬（P1-T025）：Hero 在 .wrap 外面，畫布鋪滿整個 Hero 當背景（remus-matrix.md「畫面組成」）；
 * 指令列與內文各自包 .wrap，名字的方框在兩者之間、置中、最寬 1760px。
 * Hero 往上蓋掉 .site-main 的上留白，背景雨從頁首下緣開始。 */

.home-hero {
	--prompt-size: clamp(.875rem, .8rem + .3vw, 1rem);
	position: relative;
	display: grid;
	gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	margin-top: calc(-1 * var(--main-top, 0px));
	padding-top: var(--main-top, 0px);
	padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 5.5rem);
	overflow: hidden;
	cursor: crosshair;
	touch-action: pan-y;
	-webkit-tap-highlight-color: transparent;
}

/* 畫布只負責畫，滑鼠與觸控事件由 Hero 接（remus-matrix.js） */
.home-hero__field {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.home-hero > :not(.home-hero__field) {
	position: relative;
}

.home-hero__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.home-hero__prompt {
	margin: 0;
	font-size: var(--prompt-size);
}

/* 名字的方框：空間由 CSS 預先保留（remus-matrix.md），字型與 JS 載入時版面不跳動 */
.home-hero__name {
	width: calc(100% - var(--gutter) * 2);
	max-width: 1760px;
	height: auto;
	aspect-ratio: 3.6 / 1;
	margin: 0 auto;
	line-height: 1;
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

/* 沒有 JS 時畫布是空的，改顯示一般文字 */
.home-hero__fallback {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: min(28vw, 30rem);
	font-weight: 800;
	letter-spacing: -.02em;
}

/*
 * 暫停 REMUS 的流動與背景雨（remus-matrix.md「互動」）：在 $ whoami 那一行、對齊內容欄右緣，像終端機標題列上的控制。
 * 文字固定「暫停」、狀態看 aria-pressed：按下（已暫停）時轉琥珀色。觸控範圍 44px，往右多出的留白用負邊界抵掉。
 */
.home-hero__pause {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 44px;
	min-height: 44px;
	margin: -11px -.625rem;
	padding: 0 .625rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	line-height: 1;
	letter-spacing: .04em;
	cursor: pointer;
	transition: color .15s ease;
}

.home-hero__pause[hidden] {
	display: none;
}

.home-hero__pause[aria-pressed="true"] {
	color: var(--accent);
}

/* 只在能懸停的裝置變色：手機點一下後不會一直停在懸停色 */
@media (hover: hover) {
	.home-hero__pause:hover {
		color: var(--text);
	}

	.home-hero__pause[aria-pressed="true"]:hover {
		color: color-mix(in srgb, var(--accent) 80%, var(--text));
	}
}

/* 兩條直線的暫停符號，用框線畫（不用 emoji、不用圖檔） */
.home-hero__pause-icon {
	flex: none;
	width: .5rem;
	height: .6875rem;
	border-inline: 2px solid currentColor;
}

.home-hero__body {
	display: grid;
	justify-items: start;
	gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

.home-hero__body > * {
	max-width: 100%;
}

.home-hero__lines {
	display: grid;
	gap: .5rem;
}

.home-hero__title {
	margin: 0;
	font-size: clamp(1.875rem, 1.35rem + 2.2vw, 2.75rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .06em;
}

.home-hero__sub {
	margin: 0;
	color: var(--soft);
	font-size: clamp(1.0625rem, .95rem + .55vw, 1.375rem);
	line-height: 1.6;
}

.home-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	width: 100%;
	padding-top: .25rem;
}

@media (max-width: 29.99em) {
	.home-hero__cta .home-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.home-hero {
		cursor: default;
	}

	/* 減少動態效果時 REMUS 是靜止的，沒有東西可暫停 */
	.home-hero__pause {
		display: none;
	}
}

/* 用 AI 認識我（P1-T022）：手機排在按鈕下；桌面放標題右欄、底部對齊按鈕 ============== */
.home-ai {
	width: 100%;
	max-width: 36rem;
	padding: 1rem 1.125rem;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	background: var(--panel);
}

.home-ai__cmd {
	margin: 0 0 .5rem;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
}

.home-ai__sign {
	color: var(--accent);
}

.home-ai__text {
	margin: 0 0 .75rem;
	color: var(--soft);
	font-size: .9375rem;
	line-height: 1.7;
}

.home-ai__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .75rem;
	margin: 0;
}

.home-ai__url {
	border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: .875rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.home-ai__copy {
	min-height: 32px;
	padding: .25rem .625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: transparent;
	color: var(--text);
	font-family: var(--font-mono);
	font-size: .75rem;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}

.home-ai__copy[hidden] {
	display: none;
}

@media (hover: hover) {
	.home-ai__url:hover {
		border-bottom-color: var(--accent);
	}

	.home-ai__copy:hover {
		border-color: var(--accent);
		color: var(--accent);
	}
}

/* 內文的列：標題兩行、按鈕；AI 方框在右欄、底部對齊按鈕 */
@media (min-width: 64em) {
	.home-hero__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
		column-gap: 3rem;
	}

	.home-hero__body > .home-hero__lines {
		grid-column: 1;
		grid-row: 1;
	}

	.home-hero__body > .home-hero__cta {
		grid-column: 1;
		grid-row: 2;
	}

	.home-hero__body > .home-ai {
		grid-column: 2;
		grid-row: 1 / span 2;
		align-self: end;
		justify-self: end;
	}
}

/* 數字列 =================================================================== */

.home-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--line);
}

.home-stats__item {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: 1.25rem 1rem 1.375rem;
}

/* 手機 2×2：右欄加左線、第二列加上線 */
.home-stats__item:nth-child(even) {
	border-left: 1px solid var(--line);
}

.home-stats__item:nth-child(n + 3) {
	border-top: 1px solid var(--line);
}

.home-stats__num {
	color: var(--text);
	font-family: var(--font-mono);
	font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
}

.home-stats__label {
	color: var(--muted);
	font-size: .9375rem;
	line-height: 1.5;
}

@media (min-width: 48em) {
	.home-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.home-stats__item {
		padding: 1.75rem 1.5rem;
	}

	.home-stats__item:nth-child(n + 3) {
		border-top: 0;
	}

	.home-stats__item + .home-stats__item {
		border-left: 1px solid var(--line);
	}
}

/* about.md 面板＋人像＋長期投入 ============================================= */

#about,
#projects {
	scroll-margin-top: 1.5rem;
}

.home-about {
	display: grid;
	gap: 1.25rem;
	align-items: start;
}

.home-file,
.home-focus,
.home-portrait,
.home-project {
	border: 1px solid var(--line);
	border-radius: var(--frame);
	background: var(--panel);
	overflow: hidden;
}

.home-file__bar {
	margin: 0;
	padding: .625rem 1.25rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	line-height: 1.6;
}

/* 行號欄＋內容欄；每一段對齊第一行的基線，像編輯器的自動換行 */
.home-file__body {
	display: grid;
	grid-template-columns: 1.25ch minmax(0, 1fr);
	align-items: baseline;
	column-gap: 1rem;
	row-gap: 1.25rem;
	padding: 1.5rem 1.25rem 1.75rem 1rem;
}

.home-file__ln {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.home-file__title {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .02em;
	text-wrap: balance;
}

.home-file__hash {
	color: var(--accent);
	font-family: var(--font-mono);
}

.home-file__text {
	margin: 0;
	color: var(--soft);
	font-size: 1.0625rem;
	line-height: 1.9;
	letter-spacing: .02em;
}

.home-about__side {
	display: grid;
	align-content: start;
	gap: 1.25rem;
}

/* 直式肖像畫（原畫 2:3）。手機、平板用 4:5 的框，從上方取景，留住頭到肩膀；桌面版見下方 64em 區塊 */
.home-portrait {
	margin: 0;
	aspect-ratio: 4 / 5;
}

.home-portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 0;
}

.home-focus {
	padding: 1.25rem 1.25rem 1.375rem;
	font-family: var(--font-mono);
	font-size: .9375rem;
}

.home-focus__title {
	margin: 0 0 .75rem;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	font-weight: 400;
}

.home-focus__list {
	display: grid;
	gap: .625rem;
	margin: 0;
}

.home-focus__row {
	display: grid;
	grid-template-columns: 11ch minmax(0, 1fr);
	align-items: baseline;
	gap: 1rem;
}

.home-focus__row dt {
	color: var(--muted);
}

.home-focus__row dd {
	margin: 0;
	color: var(--text);
	font-family: var(--font-sans);
}

@media (min-width: 40em) and (max-width: 63.99em) {
	.home-about__side {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		align-items: start;
	}
}

@media (min-width: 48em) {
	.home-file__body {
		column-gap: 1.25rem;
		padding: 2rem 2rem 2.25rem 1.5rem;
	}
}

@media (min-width: 64em) {
	/* 左欄：about.md 與「長期投入的事」上下排；右欄：肖像畫佔滿兩列的高度，兩欄底部自然對齊。
	   side 容器用 display: contents 把畫與清單直接放進外層格線（手機、平板不變）。 */
	.home-about {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		align-items: stretch;
		gap: 1.5rem;
	}

	.home-about__side {
		display: contents;
	}

	.home-file {
		grid-column: 1;
		grid-row: 1;
	}

	.home-focus {
		grid-column: 1;
		grid-row: 2;
	}

	.home-portrait {
		grid-column: 2;
		grid-row: 1 / span 2;
		aspect-ratio: auto;
	}

	.home-portrait img {
		object-position: 50% 30%;
	}
}

/* 四項能力 ================================================================= */

.home-skills__grid {
	display: grid;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-skill {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: 1.5rem 1.25rem 1.625rem;
	border: 1px solid var(--line);
	border-radius: var(--frame);
}

.home-skill__fn {
	color: var(--accent);
	font-family: var(--font-mono);
	font-size: .875rem;
	overflow-wrap: anywhere;
}

.home-skill__title {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.45;
}

.home-skill__text {
	margin: 0;
	color: var(--soft);
	font-size: .9375rem;
	line-height: 1.85;
}

@media (min-width: 40em) {
	.home-skills__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.home-skills__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

/* 專案案卷 ================================================================= */

.home-project + .home-project {
	margin-top: 1.5rem;
}

.home-project__bar {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin: 0;
	padding: .625rem 1.25rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	line-height: 1.6;
}

.home-project__status {
	color: var(--ok);
}

.home-project__shot {
	position: relative;
	margin: 0;
	aspect-ratio: 16 / 10;
	border-bottom: 1px solid var(--line);
	background: var(--bg);
	overflow: hidden;
}

/* 截圖左上角是最有內容的地方（產品介紹頁的標題區），裁切時保留它 */
.home-project__shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left top;
}

/* 主體在正中間的插畫（「用 AI 重寫」案卷）：框的比例隨寬度變，從中間裁才不會切到主體 */
.home-project__shot--center img {
	object-position: center;
}

/* 架構圖案卷（曲庫 API 與爬蟲）：SVG 直接嵌在頁面，不裁切；手機用窄版、40em 以上用寬版 */
.home-project__shot--diagram {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	padding: 1rem .75rem;
}

.home-diagram {
	display: block;
	width: 100%;
	height: auto;
}

.home-diagram--wide {
	display: none;
	max-width: 38rem;
}

@media (min-width: 40em) {
	.home-diagram--narrow {
		display: none;
	}

	.home-diagram--wide {
		display: block;
	}

	.home-project__shot--diagram {
		padding: 1.5rem;
	}
}

.dg-box { fill: var(--panel); stroke: var(--line); stroke-width: 1.25; }
.dg-hs { fill: var(--panel); stroke: var(--accent); stroke-width: 1.5; }
.dg-src { fill: var(--bg); stroke: var(--soft); stroke-width: 1.25; }
.dg-t { fill: var(--text); font: 700 15px var(--font-sans); }
.dg-t--lg { font-size: 16px; }
.dg-s { fill: var(--muted); font: 400 12.5px var(--font-sans); }
.dg-s--sm { font-size: 11px; }
.dg-m { fill: var(--text); font: 700 13.5px var(--font-mono); }
.dg-m--sm { font-size: 11.5px; }
.dg-lab { fill: var(--muted); font: 400 12px var(--font-sans); }
.dg-lab--live { fill: var(--accent); }
.dg-acc { fill: var(--accent); font: 700 15px var(--font-sans); }
.dg-ln { fill: none; stroke: var(--soft); stroke-width: 1.4; }
.dg-ln--live { stroke: var(--accent); }
.dg-ln--dash { stroke-dasharray: 5 5; }
.dg-div { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
.dg-head { fill: var(--soft); }
.dg-head--live { fill: var(--accent); }
.dg-zone { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 5 5; }
.dg-s--live { fill: var(--accent); }
.dg-m--live { fill: var(--accent); }

/* Happy Singing 動態圖（P1-T015，P1-T021 改直式）：上到下三層。14 秒一輪：
   ① 0–33% 客人手機三步驟（掃 QR、從歌庫搜歌、送出），歌飛進點歌單、多出「桌 5 你點的歌・可自己取消」；
   ② 38–50% DJ 把桌 3 拖到桌 2 前面；③ 57–96% 播放中的列往下走，DJ 後台「播放中」與客人手機「前面還有幾桌」同步換。
   列距、拖曳距離寫在 --rs，飛行終點寫在 --fx／--fy，掃描線行程寫在 --sd（寬、窄版不同）。
   沒有動畫時停在「點完歌、桌 1 播放中、前面還有 3 桌」。 */
.hsf-lab { fill: var(--muted); font: 400 13px var(--font-mono); }
.hsf-lab.hsf-sm { font-size: 12px; }
.hsf-sc { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.hsf-arr { fill: var(--muted); font: 400 18px var(--font-mono); text-anchor: middle; }
.hsf-qr rect { fill: var(--soft); }
.hsf-scan { fill: var(--accent); opacity: 0; }
.hsf-tiny { fill: var(--soft); font: 400 12px var(--font-sans); }
.hsf-tiny.hsf-sm { font-size: 10px; }
.hsf-mid { text-anchor: middle; }
.hsf-no { fill: var(--accent); font-family: var(--font-mono); font-weight: 700; text-anchor: end; }
.hsf-live { fill: var(--accent); font-weight: 700; }
.hsf-sbar { fill: none; stroke: var(--line); stroke-width: 1.5; }
.hsf-typed { fill: var(--text); }
.hsf-cover { fill: var(--panel); transform: scaleX(0); transform-box: fill-box; transform-origin: 100% 50%; }
.hsf-res { fill: var(--bg); }
.hsf-send { transform-box: fill-box; transform-origin: center; }
.hsf-send rect { fill: var(--accent); }
.hsf-send text { fill: var(--bg); font: 900 15px var(--font-sans); text-anchor: middle; }
.home-diagram--narrow .hsf-send text { font-size: 13px; }
.hsf-st { fill: var(--text); font: 700 14px var(--font-sans); text-anchor: middle; }
.hsf-st.hsf-sm { font-size: 12.5px; }
.hsf-ss { fill: var(--muted); font: 400 12px var(--font-sans); text-anchor: middle; }
.hsf-ss.hsf-sm { font-size: 10.5px; }
.hsf-box { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.hsf-box--me { stroke: var(--ok); }
.hsf-hd { fill: var(--text); font: 700 16px var(--font-sans); }
.hsf-hd.hsf-sm { font-size: 14px; }
.hsf-note { fill: var(--muted); font: 400 12px var(--font-sans); }
.hsf-hl { fill: rgba(240, 164, 58, .14); stroke: var(--accent); stroke-width: 1.5; }
.hsf-rt { fill: var(--text); font: 400 15px var(--font-mono); }
.hsf-rt.hsf-sm { font-size: 13px; }
.hsf-rs { fill: var(--soft); font: 400 15px var(--font-sans); }
.hsf-rs.hsf-sm { font-size: 13px; }
.hsf-mine .hsf-rt, .hsf-mine .hsf-rs { fill: var(--ok); }
.hsf-cancel { transform-box: fill-box; transform-origin: center; }
.hsf-cancel rect { fill: none; stroke: var(--ok); stroke-width: 1.5; }
.hsf-cancel text { fill: var(--ok); font: 400 12px var(--font-sans); text-anchor: middle; }
.home-diagram--narrow .hsf-cancel text { font-size: 11px; }
.hsf-hand { opacity: 0; }
.hsf-hand path { fill: var(--text); stroke: var(--bg); stroke-width: 1.2; }
.hsf-tag { opacity: 0; transform-box: fill-box; transform-origin: center; }
.hsf-tag rect { fill: var(--accent); }
.hsf-tag text { fill: var(--bg); font: 700 12px var(--font-sans); text-anchor: middle; }
.home-diagram--narrow .hsf-tag text { font-size: 11px; }
.hsf-chip { fill: var(--ok); opacity: 0; }
.hsf-bh { fill: var(--text); font: 700 14px var(--font-sans); }
.hsf-bh.hsf-sm { font-size: 12.5px; }
.hsf-ok { fill: var(--ok); }
.hsf-bs { fill: var(--muted); font: 400 12px var(--font-sans); }
.hsf-bs.hsf-sm { font-size: 10.5px; }
.hsf-sync { fill: var(--muted); font: 400 16px var(--font-mono); text-anchor: middle; }
.home-diagram--narrow .hsf-sync { display: none; } /* 窄版兩框只隔 8px，放不下 */
.hsf-big { fill: var(--accent); font: 700 26px var(--font-mono); }
.hsf-big.hsf-sm { font-size: 22px; }
.hsf-wait { fill: var(--text); font: 700 22px var(--font-sans); }
.hsf-wait.hsf-sm { font-size: 17px; }
.hsf-wait.hsf-live { fill: var(--accent); }
.hsf-ph { opacity: 0; }
.hsf-ph--static { opacity: 1; }
.hsf-cap { fill: var(--text); font: 400 18px var(--font-sans); text-anchor: middle; }
.hsf-cap.hsf-sm { font-size: 15px; }
.hsf-cap--live { fill: var(--accent); font-weight: 700; }
.hsf-c1, .hsf-c2 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.hsf-sc1 { animation: hsf-sc1 14s ease infinite; }
	.hsf-sc2 { animation: hsf-sc2 14s ease infinite; }
	.hsf-sc3 { animation: hsf-sc3 14s ease infinite; }
	.hsf-scan { animation: hsf-scan 14s ease-in-out infinite; }
	.hsf-cover { animation: hsf-cover 14s steps(4) infinite; }
	.hsf-pick { animation: hsf-pick 14s ease infinite; }
	.hsf-send { animation: hsf-send 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-chip { animation: hsf-chip 14s ease-in-out infinite; }
	.hsf-mine { animation: hsf-mine 14s ease infinite; }
	.hsf-cancel { animation: hsf-cancel 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-up { animation: hsf-up 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-dn { animation: hsf-dn 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-hand { animation: hsf-hand 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-tag { animation: hsf-tag 14s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.hsf-hl { animation: hsf-hl 14s ease-in-out infinite; }
	.hsf-w1 { animation: hsf-w1 14s linear infinite; }
	.hsf-w2 { animation: hsf-w2 14s linear infinite; }
	.hsf-w3 { animation: hsf-w3 14s linear infinite; }
	.hsf-w4 { animation: hsf-w4 14s linear infinite; }
	.hsf-c1 { animation: hsf-c1 14s ease infinite; }
	.hsf-c2 { animation: hsf-c2 14s ease infinite; }
	.hsf-c3 { animation: hsf-c3 14s ease infinite; }
}

/* 動態流程圖的暫停鍵：疊在圖框右上角（absolute，不佔版面），外觀同 REMUS 的暫停鍵（共用 .home-hero__pause-icon） */
.home-diagram__pause {
	position: absolute;
	top: .25rem;
	right: .25rem;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 44px;
	min-height: 44px;
	padding: 0 .625rem;
	border: 0;
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	line-height: 1;
	letter-spacing: .04em;
	cursor: pointer;
	transition: color .15s ease;
}

.home-diagram__pause[hidden] {
	display: none;
}

.home-diagram__pause[aria-pressed="true"] {
	color: var(--accent);
}

@media (hover: hover) {
	.home-diagram__pause:hover {
		color: var(--text);
	}

	.home-diagram__pause[aria-pressed="true"]:hover {
		color: color-mix(in srgb, var(--accent) 80%, var(--text));
	}
}

.home-project__shot.is-paused * {
	animation-play-state: paused;
}

/* 減少動態效果時圖是靜止的，沒有東西可暫停 */
@media (prefers-reduced-motion: reduce) {
	.home-diagram__pause {
		display: none;
	}
}

@keyframes hsf-sc1 { 0%, 1% { stroke: var(--line); } 2%, 10% { stroke: var(--accent); } 12%, 100% { stroke: var(--line); } }
@keyframes hsf-sc2 { 0%, 11% { stroke: var(--line); } 12%, 20% { stroke: var(--accent); } 22%, 100% { stroke: var(--line); } }
@keyframes hsf-sc3 { 0%, 21% { stroke: var(--line); } 22%, 28% { stroke: var(--accent); } 30%, 100% { stroke: var(--line); } }
@keyframes hsf-scan { 0%, 1% { transform: translateY(0); opacity: 0; } 2% { opacity: 1; } 6% { transform: translateY(var(--sd, 0px)); } 10% { transform: translateY(0); opacity: 1; } 11%, 100% { transform: translateY(0); opacity: 0; } }
@keyframes hsf-cover { 0%, 12% { transform: scaleX(1); } 16%, 99% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes hsf-pick { 0%, 17% { fill: var(--bg); } 18%, 96% { fill: rgba(240, 164, 58, .18); } 100% { fill: var(--bg); } }
@keyframes hsf-send { 0%, 23% { transform: scale(1); } 24.5% { transform: scale(.86); } 26%, 100% { transform: scale(1); } }
@keyframes hsf-chip { 0%, 25% { opacity: 0; transform: translate(0, 0); } 26% { opacity: 1; transform: translate(0, 0); } 29% { transform: translate(calc(var(--fx, 0px) * .5), calc(var(--fy, 0px) * .25)); } 32% { opacity: 1; transform: translate(var(--fx, 0px), var(--fy, 0px)); } 33%, 100% { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)); } }
@keyframes hsf-mine { 0%, 31% { opacity: 0; } 33%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hsf-cancel { 0%, 33% { transform: scale(1); } 35% { transform: scale(1.2); } 37%, 100% { transform: scale(1); } }
@keyframes hsf-up { 0%, 40% { transform: none; } 42% { transform: translate(6px, -4px); } 47%, 96% { transform: translateY(calc(var(--rs, 36px) * -1)); } 100% { transform: none; } }
@keyframes hsf-dn { 0%, 43% { transform: none; } 47%, 96% { transform: translateY(var(--rs, 36px)); } 100% { transform: none; } }
@keyframes hsf-hand { 0%, 38% { opacity: 0; transform: translate(30px, 20px); } 40% { opacity: 1; transform: none; } 47%, 49% { opacity: 1; transform: translateY(calc(var(--rs, 36px) * -1)); } 50%, 100% { opacity: 0; transform: translateY(calc(var(--rs, 36px) * -1)); } }
@keyframes hsf-tag { 0%, 40% { opacity: 0; transform: scale(.4); } 43%, 50% { opacity: 1; transform: none; } 53%, 100% { opacity: 0; transform: none; } }
@keyframes hsf-hl { 0%, 57% { transform: translateY(0); } 59%, 69% { transform: translateY(var(--rs, 36px)); } 71%, 81% { transform: translateY(calc(var(--rs, 36px) * 2)); } 83%, 100% { transform: translateY(calc(var(--rs, 36px) * 3)); } }
@keyframes hsf-w1 { 0%, 56% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hsf-w2 { 0%, 57% { opacity: 0; } 59%, 68% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes hsf-w3 { 0%, 69% { opacity: 0; } 71%, 80% { opacity: 1; } 82%, 100% { opacity: 0; } }
@keyframes hsf-w4 { 0%, 81% { opacity: 0; } 83%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hsf-c1 { 0%, 34% { opacity: 1; } 37%, 100% { opacity: 0; } }
@keyframes hsf-c2 { 0%, 37% { opacity: 0; } 40%, 55% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes hsf-c3 { 0%, 57% { opacity: 0; } 60%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* 曲庫 API 動態流程圖（P1-T016）：直式，上到下是品牌 → 曲庫 API／爬蟲 → Happy Singing。12 秒一輪三段：
   ① 0–44% 第一次點：Happy Singing → 排隊 → JOYSOUND，答案記下來再送回；② 46–66% 再有人點同一首：直接用記下的答案；
   ③ 68–98% 瑞影、金嗓整批資料 → 核對 → 通知 → Happy Singing（窄版兩家上下疊，只從瑞影下方送出一塊）。
   點和方塊沿線移動的距離寫在各元素的 --dx／--dy，寬、窄版共用同一組 keyframes。沒有動畫時停在第一句說明、所有框不亮。 */
.kcf-lab { fill: var(--muted); font: 400 14px var(--font-mono); }
.kcf-group { fill: var(--muted); font: 400 13px var(--font-mono); letter-spacing: .08em; }
.kcf-box { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.kcf-step { fill: var(--bg); stroke: var(--line); stroke-width: 1.5; }
.kcf-hs { fill: var(--panel); stroke: var(--ok); stroke-width: 1.5; }
.kcf-name { fill: var(--text); font: 700 16px var(--font-sans); }
.kcf-sub { fill: var(--soft); font: 400 13px var(--font-sans); }
.kcf-sub--dim { fill: var(--muted); font-size: 12px; }
.kcf-title { fill: var(--text); font: 700 18px var(--font-sans); }
.kcf-note { fill: var(--soft); font: 400 14px var(--font-sans); }
.kcf-step-t { fill: var(--text); font: 700 15px var(--font-sans); }
.kcf-step-s { fill: var(--soft); font: 400 13px var(--font-sans); }
.kcf-memo { fill: var(--accent); font: 700 14px var(--font-sans); opacity: 0; }
.kcf-q { fill: var(--text); opacity: 0; }
.kcf-a { fill: var(--accent); opacity: 0; }
.kcf-cap { fill: var(--text); font: 400 17px var(--font-sans); }
.kcf-cap--live { fill: var(--accent); font-weight: 700; }
.kcf-c2, .kcf-c3 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.kcf-q1, .kcf-q2, .kcf-a2, .kcf-a1, .kcf-q3, .kcf-a3, .kcf-t1, .kcf-t3, .kcf-g-queue, .kcf-g-joy, .kcf-g-mem, .kcf-g-tw, .kcf-g-check, .kcf-g-notify, .kcf-g-hs, .kcf-memo, .kcf-c1, .kcf-c2, .kcf-c3 { animation: 12s linear infinite; }
	.kcf-q1 { animation-name: kcf-q1; }
	.kcf-q2 { animation-name: kcf-q2; }
	.kcf-a2 { animation-name: kcf-a2; }
	.kcf-a1 { animation-name: kcf-a1; }
	.kcf-q3 { animation-name: kcf-q3; }
	.kcf-a3 { animation-name: kcf-a3; }
	.kcf-t1 { animation-name: kcf-t1; }
	.kcf-t3 { animation-name: kcf-t3; }
	.kcf-g-queue { animation-name: kcf-g-queue; }
	.kcf-g-joy { animation-name: kcf-g-joy; }
	.kcf-g-mem { animation-name: kcf-g-mem; }
	.kcf-g-tw { animation-name: kcf-g-tw; }
	.kcf-g-check { animation-name: kcf-g-check; }
	.kcf-g-notify { animation-name: kcf-g-notify; }
	.kcf-g-hs { animation-name: kcf-g-hs; }
	.kcf-memo { animation-name: kcf-memo; }
	.kcf-c1 { animation-name: kcf-c1; }
	.kcf-c2 { animation-name: kcf-c2; }
	.kcf-c3 { animation-name: kcf-c3; }
}

@keyframes kcf-q1 { 0%, 1% { transform: translate(0, 0); opacity: 0; } 2% { transform: translate(0, 0); opacity: 1; } 8% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 9%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-q2 { 0%, 13% { transform: translate(0, 0); opacity: 0; } 14% { transform: translate(0, 0); opacity: 1; } 20% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 21%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-a2 { 0%, 23% { transform: translate(0, 0); opacity: 0; } 24% { transform: translate(0, 0); opacity: 1; } 30% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 31%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-a1 { 0%, 33% { transform: translate(0, 0); opacity: 0; } 34% { transform: translate(0, 0); opacity: 1; } 40% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 41%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-q3 { 0%, 45% { transform: translate(0, 0); opacity: 0; } 46% { transform: translate(0, 0); opacity: 1; } 52% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 53%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-a3 { 0%, 57% { transform: translate(0, 0); opacity: 0; } 58% { transform: translate(0, 0); opacity: 1; } 64% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 65%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-t1 { 0%, 69% { transform: translate(0, 0); opacity: 0; } 70% { transform: translate(0, 0); opacity: 1; } 76% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 77%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-t3 { 0%, 85% { transform: translate(0, 0); opacity: 0; } 86% { transform: translate(0, 0); opacity: 1; } 92% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 1; } 93%, 100% { transform: translate(var(--dx, 0px), var(--dy, 0px)); opacity: 0; } }
@keyframes kcf-g-queue { 0% { stroke: var(--line); } 8% { stroke: var(--line); } 9%, 13% { stroke: var(--accent); } 14% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-joy { 0% { stroke: var(--line); } 20% { stroke: var(--line); } 21%, 24% { stroke: var(--accent); } 25% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-mem { 0% { stroke: var(--line); } 30% { stroke: var(--line); } 31%, 34% { stroke: var(--accent); } 35% { stroke: var(--line); } 52% { stroke: var(--line); } 53%, 57% { stroke: var(--accent); } 58% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-tw { 0% { stroke: var(--line); } 67% { stroke: var(--line); } 68%, 71% { stroke: var(--accent); } 72% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-check { 0% { stroke: var(--line); } 76% { stroke: var(--line); } 77%, 82% { stroke: var(--accent); } 83% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-notify { 0% { stroke: var(--line); } 82% { stroke: var(--line); } 83%, 86% { stroke: var(--accent); } 87% { stroke: var(--line); } 100% { stroke: var(--line); } }
@keyframes kcf-g-hs { 0% { stroke: var(--ok); } 40% { stroke: var(--ok); } 41%, 44% { stroke: var(--accent); } 45% { stroke: var(--ok); } 64% { stroke: var(--ok); } 65%, 66% { stroke: var(--accent); } 67% { stroke: var(--ok); } 92% { stroke: var(--ok); } 93%, 97% { stroke: var(--accent); } 98% { stroke: var(--ok); } 100% { stroke: var(--ok); } }
@keyframes kcf-memo { 0%, 30% { opacity: 0; } 32%, 97% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes kcf-c1 { 0%, 44% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes kcf-c2 { 0%, 45% { opacity: 0; } 46%, 66% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes kcf-c3 { 0%, 67% { opacity: 0; } 68%, 98% { opacity: 1; } 99%, 100% { opacity: 0; } }

/* 「用 AI 重寫」動態圖（P1-T017）：比前兩張活潑。10 秒一輪：外掛高樓晃一晃（4–24%）、一塊塊掉下去（26–48%），
   「自己寫的主題」彈出（50–56%）、容量數字翻面（46–58%）、硬幣掉下（64–72%）。
   沒有動畫（減少動態效果）時直接顯示「換完之後」：高樓不見、新主題、新容量、硬幣與省下的錢。 */
.raf-lab { fill: var(--muted); font: 400 14px var(--font-mono); }
.raf-ground { stroke: var(--line); stroke-width: 2; }
.raf-blk rect { fill: var(--panel); stroke: #4A4D4A; stroke-width: 2; }
.raf-bt { fill: var(--soft); font: 700 17px var(--font-sans); text-anchor: middle; }
.raf-bt--sm { font-size: 14px; }
.raf-bt--xs { font-size: 12px; }
.raf-blk { opacity: 0; transform-box: fill-box; transform-origin: center; }
.raf-num { fill: var(--soft); font: 700 52px var(--font-mono); text-anchor: middle; transform-box: fill-box; transform-origin: center; }
.raf-num--sm { font-size: 30px; }
.raf-num--new { fill: var(--accent); }
.raf-n1 { opacity: 0; }
.raf-unit { fill: var(--muted); font: 400 14px var(--font-sans); text-anchor: middle; }
.raf-unit--sm { font-size: 12px; }
.raf-coin circle { fill: var(--accent); }
.raf-coin text { fill: var(--bg); font: 700 26px var(--font-mono); text-anchor: middle; }
.raf-coin--sm text { font-size: 20px; }
.raf-save { fill: var(--accent); font: 700 16px var(--font-sans); text-anchor: middle; }
.raf-save--sm { font-size: 13px; }
.raf-new { transform-box: fill-box; transform-origin: 50% 100%; }
.raf-new rect { fill: #1C1A15; stroke: var(--accent); stroke-width: 2; }
.raf-new-t { fill: var(--text); font: 700 18px var(--font-sans); text-anchor: middle; }
.raf-new-t--sm { font-size: 14px; }
.raf-new-s { fill: var(--soft); font: 400 14px var(--font-mono); text-anchor: middle; }
.raf-new-s--sm { font-size: 12px; }
.raf-cap { fill: var(--text); font: 400 19px var(--font-sans); text-anchor: middle; }
.raf-cap--sm { font-size: 16px; }
.raf-cap--live { fill: var(--accent); font-weight: 700; }
.raf-c1 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.raf-tower { animation: raf-wobble 10s ease-in-out infinite; }
	.raf-b7 { animation: raf-b7 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b5 { animation: raf-b5 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b6 { animation: raf-b6 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b4 { animation: raf-b4 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b3 { animation: raf-b3 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b2 { animation: raf-b2 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-b1 { animation: raf-b1 10s cubic-bezier(.5, 0, .9, .5) infinite; }
	.raf-n1 { animation: raf-n1 10s ease-in-out infinite; }
	.raf-n2 { animation: raf-n2 10s ease-in-out infinite; }
	.raf-new { animation: raf-new 10s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.raf-coin { animation: raf-coin 10s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.raf-save { animation: raf-save 10s ease infinite; }
	.raf-c1 { animation: raf-c1 10s ease infinite; }
	.raf-c2 { animation: raf-c2 10s ease infinite; }
}

@keyframes raf-wobble { 0%, 4% { transform: rotate(0); } 8% { transform: rotate(-2deg); } 12% { transform: rotate(2deg); } 16% { transform: rotate(-2.5deg); } 20% { transform: rotate(2.5deg); } 24%, 100% { transform: rotate(0); } }
@keyframes raf-b7 { 0% { transform: none; opacity: 0; } 3%, 26% { transform: none; opacity: 1; } 34%, 100% { transform: translate(10px, 420px) rotate(-80deg); opacity: 0; } }
@keyframes raf-b5 { 0% { transform: none; opacity: 0; } 3%, 28% { transform: none; opacity: 1; } 36%, 100% { transform: translate(-50px, 380px) rotate(-60deg); opacity: 0; } }
@keyframes raf-b6 { 0% { transform: none; opacity: 0; } 3%, 28% { transform: none; opacity: 1; } 36%, 100% { transform: translate(70px, 380px) rotate(70deg); opacity: 0; } }
@keyframes raf-b4 { 0% { transform: none; opacity: 0; } 3%, 31% { transform: none; opacity: 1; } 39%, 100% { transform: translate(40px, 340px) rotate(35deg); opacity: 0; } }
@keyframes raf-b3 { 0% { transform: none; opacity: 0; } 3%, 34% { transform: none; opacity: 1; } 42%, 100% { transform: translate(-60px, 300px) rotate(-40deg); opacity: 0; } }
@keyframes raf-b2 { 0% { transform: none; opacity: 0; } 3%, 37% { transform: none; opacity: 1; } 45%, 100% { transform: translate(50px, 260px) rotate(30deg); opacity: 0; } }
@keyframes raf-b1 { 0% { transform: none; opacity: 0; } 3%, 40% { transform: none; opacity: 1; } 48%, 100% { transform: translate(-30px, 200px) rotate(-25deg); opacity: 0; } }
@keyframes raf-n1 { 0%, 46% { transform: scaleY(1); opacity: 1; } 52%, 100% { transform: scaleY(0); opacity: 0; } }
@keyframes raf-n2 { 0%, 52% { transform: scaleY(0); opacity: 0; } 58%, 96% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
@keyframes raf-new { 0%, 50% { transform: scale(0); opacity: 0; } 56%, 96% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
@keyframes raf-coin { 0%, 64% { transform: translateY(-280px); opacity: 0; } 65% { opacity: 1; } 72%, 96% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes raf-save { 0%, 72% { opacity: 0; } 76%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes raf-c1 { 0%, 46% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes raf-c2 { 0%, 52% { opacity: 0; } 56%, 96% { opacity: 1; } 100% { opacity: 0; } }

/* Galley 動態圖（P1-T018）：AI 機器人在虛線玻璃罩裡（隔離・唯讀）。12 秒一輪：文章滑進罩（0–10%）、丟出三張建議（12–27%）、
   伸手拿罩外的 WordPress 密碼，手臂碰到玻璃壁就彈回（30–42%，不能穿出罩外）、建議逐張標上接受／保留原文（50–63%）、按核准（66–68%）、紙飛機飛進 WordPress（69–82%）。
   機器人上下晃、眨眼是另外兩條短循環。沒有動畫時停在「建議都決定好、碰不到密碼」的畫面。 */
.gaf-lab { fill: var(--muted); font: 400 14px var(--font-mono); }
.gaf-glass { fill: rgba(240, 164, 58, .04); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 8 6; }
.gaf-tagbg { fill: var(--bg); }
.gaf-tag { fill: var(--accent); font: 700 13px var(--font-sans); text-anchor: middle; }
.gaf-tag--sm { font-size: 12px; }
.gaf-ant { fill: var(--soft); }
.gaf-ant-top { fill: var(--ok); }
.gaf-head { fill: var(--panel); stroke: var(--soft); stroke-width: 2; }
.gaf-eye { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
.gaf-name { fill: var(--muted); font: 400 12px var(--font-mono); text-anchor: middle; }
.gaf-name--sm { font-size: 10.5px; }
.gaf-doc > rect:first-child { fill: var(--text); }
.gaf-docline { fill: #9a978e; }
.gaf-arm { fill: var(--soft); transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }
.gaf-key { transform-box: fill-box; transform-origin: center; }
.gaf-key > rect { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.gaf-key-icon { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gaf-key-t { fill: var(--text); font: 700 15px var(--font-sans); }
.gaf-key-t--sm { font-size: 12.5px; }
.gaf-no { fill: var(--accent); font: 900 18px var(--font-sans); transform-box: fill-box; transform-origin: center; }
.gaf-no--sm { font-size: 15px; }
.gaf-sug { transform-box: fill-box; transform-origin: center; }
.gaf-sug > rect { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.gaf-sug-t { fill: var(--text); font: 400 15px var(--font-sans); }
.gaf-mark { transform-box: fill-box; transform-origin: center; }
.gaf-yes { fill: var(--ok); }
.gaf-yes-t { fill: var(--bg); font: 700 13px var(--font-sans); text-anchor: middle; }
.gaf-keep { fill: none; stroke: var(--soft); stroke-width: 1.5; }
.gaf-keep-t { fill: var(--soft); font: 700 13px var(--font-sans); text-anchor: middle; }
.gaf-btn { transform-box: fill-box; transform-origin: center; }
.gaf-btn rect { fill: var(--accent); }
.gaf-btn text { fill: var(--bg); font: 900 20px var(--font-sans); text-anchor: middle; }
.gaf-wp > rect { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.gaf-wp-t { fill: var(--text); font: 700 16px var(--font-sans); text-anchor: middle; }
.gaf-wp-s { fill: var(--muted); font: 400 13px var(--font-sans); text-anchor: middle; }
.gaf-mid { text-anchor: middle; }
.gaf-plane { fill: var(--text); opacity: 0; transform-box: fill-box; transform-origin: center; }
.gaf-cap { fill: var(--text); font: 400 19px var(--font-sans); text-anchor: middle; }
.gaf-cap--sm { font-size: 16px; }
.gaf-cap--live { fill: var(--accent); font-weight: 700; }
.gaf-c1, .gaf-c2 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.gaf-bot { animation: gaf-bob 1.6s ease-in-out infinite; }
	.gaf-eye { animation: gaf-blink 4s infinite; }
	.gaf-doc { animation: gaf-doc 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-s1 { animation: gaf-s1 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-s2 { animation: gaf-s2 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-s3 { animation: gaf-s3 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-arm { animation: gaf-arm 12s ease-in-out infinite; }
	.gaf-glass { animation: gaf-glass 12s ease infinite; }
	.gaf-no { animation: gaf-no 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-m1 { animation: gaf-m1 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-m2 { animation: gaf-m2 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-m3 { animation: gaf-m3 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-btn { animation: gaf-btn 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.gaf-plane { animation: gaf-plane 12s ease-in-out infinite; }
	.gaf-wp > rect { animation: gaf-wp 12s ease infinite; }
	.gaf-c1 { animation: gaf-c1 12s ease infinite; }
	.gaf-c2 { animation: gaf-c2 12s ease infinite; }
	.gaf-c3 { animation: gaf-c3 12s ease infinite; }
}

@keyframes gaf-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes gaf-blink { 0%, 46%, 50%, 100% { transform: scaleY(1); } 48% { transform: scaleY(.1); } }
@keyframes gaf-doc { 0%, 2% { transform: translateX(-300px) rotate(-8deg); } 10%, 96% { transform: none; } 100% { transform: translateX(-300px); } }
@keyframes gaf-s1 { 0%, 12% { opacity: 0; transform: translateX(-150px) scale(.5); } 17%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes gaf-s2 { 0%, 17% { opacity: 0; transform: translateX(-150px) scale(.5); } 22%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes gaf-s3 { 0%, 22% { opacity: 0; transform: translateX(-150px) scale(.5); } 27%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes gaf-arm { 0%, 30% { transform: scaleX(0); } 36% { transform: scaleX(1); } 38% { transform: scaleX(.83); } 42%, 100% { transform: scaleX(0); } }
@keyframes gaf-glass { 0%, 35% { stroke-width: 2; } 37%, 41% { stroke-width: 5; } 45%, 100% { stroke-width: 2; } }
@keyframes gaf-no { 0%, 36% { opacity: 0; transform: scale(.4); } 39%, 48% { opacity: 1; transform: scale(1); } 52%, 100% { opacity: 0; transform: scale(1); } }
@keyframes gaf-m1 { 0%, 50% { opacity: 0; transform: scale(0); } 53%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes gaf-m2 { 0%, 55% { opacity: 0; transform: scale(0); } 58%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes gaf-m3 { 0%, 60% { opacity: 0; transform: scale(0); } 63%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes gaf-btn { 0%, 66% { transform: scale(1); } 68% { transform: scale(.88); } 71%, 100% { transform: scale(1); } }
@keyframes gaf-plane { 0%, 69% { opacity: 0; transform: none; } 71% { opacity: 1; transform: none; } 80% { opacity: 1; transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg)); } 82%, 100% { opacity: 0; transform: translate(var(--px, 0px), var(--py, 0px)) rotate(var(--pr, 0deg)); } }
@keyframes gaf-wp { 0%, 80% { stroke: var(--line); } 83%, 96% { stroke: var(--ok); } 100% { stroke: var(--line); } }
@keyframes gaf-c1 { 0%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes gaf-c2 { 0%, 32% { opacity: 0; } 35%, 48% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes gaf-c3 { 0%, 50% { opacity: 0; } 53%, 97% { opacity: 1; } 100% { opacity: 0; } }

/* COMMEET 動態圖（P1-T019）：一支影片卡依序經過腳本 → 錄影 → 剪輯 → 配音四站（12 秒一輪，每站亮起、各有小動畫），
   做好後縮進「全部一個人完成」，再分成三個播放清單。卡片每站的位移寫在 --c1～--c4，剪輯站中間片段的跳動高度寫在 --sw。
   沒有動畫時停在「一個人完成、三個播放清單」的畫面。 */
.cmf-lab { fill: var(--muted); font: 400 14px var(--font-mono); }
.cmf-st { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.cmf-arrow { fill: var(--muted); font: 400 18px var(--font-mono); text-anchor: middle; }
.cmf-pen rect { fill: var(--soft); transform-box: fill-box; transform-origin: 0 50%; }
.cmf-rec { fill: #c4562d; transform-box: fill-box; transform-origin: center; }
.cmf-clip rect { fill: var(--accent); }
.cmf-clip .cmf-clip-mid { fill: var(--ok); }
.cmf-wave rect { fill: var(--ok); transform-box: fill-box; transform-origin: center; }
.cmf-st-t { fill: var(--text); font: 700 17px var(--font-sans); text-anchor: middle; }
.cmf-st-t--sm { font-size: 14px; }
.cmf-st-s { fill: var(--muted); font: 400 12px var(--font-mono); text-anchor: middle; }
.cmf-st-s--sm { font-size: 10.5px; }
.cmf-card { opacity: 0; transform-box: fill-box; transform-origin: center; }
.cmf-card rect { fill: var(--text); }
.cmf-play { fill: var(--bg); opacity: 0; }
.cmf-me { transform-box: fill-box; transform-origin: center; }
.cmf-me rect { fill: var(--bg); stroke: var(--accent); stroke-width: 2; }
.cmf-me text { fill: var(--accent); font: 900 16px var(--font-sans); text-anchor: middle; }
.cmf-me--sm text { font-size: 14px; }
.cmf-pl { transform-box: fill-box; transform-origin: center; }
.cmf-pl rect { fill: var(--panel); stroke: var(--line); stroke-width: 2; }
.cmf-pl-t { fill: var(--text); font: 700 17px var(--font-sans); text-anchor: middle; }
.cmf-pl-t--sm { font-size: 14px; }
.cmf-pl-s { fill: var(--soft); font: 400 13px var(--font-sans); text-anchor: middle; }
.cmf-pl-s--sm { font-size: 11.5px; }
.cmf-pl-n { fill: var(--accent); font: 700 26px var(--font-mono); text-anchor: middle; }
.cmf-pl-n--sm { font-size: 22px; }
.cmf-cap { fill: var(--text); font: 400 19px var(--font-sans); text-anchor: middle; }
.cmf-cap--sm { font-size: 16px; }
.cmf-cap--live { fill: var(--accent); font-weight: 700; }
.cmf-c1 { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
	.cmf-s1 { animation: cmf-s1 12s ease infinite; }
	.cmf-s2 { animation: cmf-s2 12s ease infinite; }
	.cmf-s3 { animation: cmf-s3 12s ease infinite; }
	.cmf-s4 { animation: cmf-s4 12s ease infinite; }
	.cmf-pen rect { animation: cmf-type 12s steps(4) infinite; }
	.cmf-rec { animation: cmf-rec 1s ease-in-out infinite; }
	.cmf-clip-mid { animation: cmf-swap 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.cmf-wave rect { animation: cmf-wave .7s ease-in-out infinite; }
	.cmf-wave rect:nth-child(2) { animation-delay: .1s; }
	.cmf-wave rect:nth-child(3) { animation-delay: .2s; }
	.cmf-wave rect:nth-child(4) { animation-delay: .3s; }
	.cmf-wave rect:nth-child(5) { animation-delay: .4s; }
	.cmf-card { animation: cmf-card 12s cubic-bezier(.4, 0, .2, 1) infinite; }
	.cmf-play { animation: cmf-play 12s ease infinite; }
	.cmf-me { animation: cmf-me 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.cmf-p1 { animation: cmf-p1 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.cmf-p2 { animation: cmf-p2 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.cmf-p3 { animation: cmf-p3 12s cubic-bezier(.34, 1.56, .64, 1) infinite; }
	.cmf-c1 { animation: cmf-c1 12s ease infinite; }
	.cmf-c2 { animation: cmf-c2 12s ease infinite; }
}

@keyframes cmf-s1 { 0%, 4% { stroke: var(--line); } 6%, 18% { stroke: var(--accent); } 20%, 100% { stroke: var(--line); } }
@keyframes cmf-s2 { 0%, 22% { stroke: var(--line); } 24%, 36% { stroke: var(--accent); } 38%, 100% { stroke: var(--line); } }
@keyframes cmf-s3 { 0%, 40% { stroke: var(--line); } 42%, 54% { stroke: var(--accent); } 56%, 100% { stroke: var(--line); } }
@keyframes cmf-s4 { 0%, 58% { stroke: var(--line); } 60%, 70% { stroke: var(--accent); } 72%, 100% { stroke: var(--line); } }
@keyframes cmf-type { 0%, 4% { transform: scaleX(.1); } 18%, 100% { transform: scaleX(1); } }
@keyframes cmf-rec { 0%, 100% { transform: scale(1); } 50% { transform: scale(.7); } }
@keyframes cmf-swap { 0%, 44% { transform: none; } 48% { transform: translateY(var(--sw, 0px)); } 52%, 100% { transform: none; } }
@keyframes cmf-wave { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@keyframes cmf-card { 0% { transform: none; opacity: 0; } 2%, 18% { transform: none; opacity: 1; } 24%, 36% { transform: translateX(var(--c1, 0px)); opacity: 1; } 42%, 54% { transform: translateX(var(--c2, 0px)); opacity: 1; } 60%, 70% { transform: translateX(var(--c3, 0px)); opacity: 1; } 76%, 100% { transform: translateX(var(--c4, 0px)) scale(.01); opacity: 0; } }
@keyframes cmf-play { 0%, 66% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes cmf-me { 0%, 75% { opacity: 0; transform: scale(.4); } 79%, 96% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes cmf-p1 { 0%, 78% { opacity: 0; transform: translateY(-40px) scale(.5); } 82%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cmf-p2 { 0%, 81% { opacity: 0; transform: translateY(-40px) scale(.5); } 85%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cmf-p3 { 0%, 84% { opacity: 0; transform: translateY(-40px) scale(.5); } 88%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes cmf-c1 { 0%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes cmf-c2 { 0%, 74% { opacity: 0; } 77%, 97% { opacity: 1; } 100% { opacity: 0; } }

.home-project__body {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 1.5rem 1.25rem 1.75rem;
}

.home-project__title {
	margin: 0;
	font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
	font-weight: 700;
	line-height: 1.4;
	/* 只在空格處換行（「WordPress／雲端部署…」），中文詞不被切開；真的放不下才硬斷 */
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.home-project__log {
	display: grid;
	grid-template-columns: 2.5em minmax(0, 1fr);
	align-items: baseline;
	gap: .875rem .875rem;
	margin: 0;
	font-size: .9375rem;
	line-height: 1.8;
}

.home-project__log dt {
	color: var(--accent);
	font-weight: 700;
}

.home-project__log dd {
	margin: 0;
	color: var(--soft);
}

.home-project__tags {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: auto 0 0;
	padding: .25rem 0 0;
	list-style: none;
	font-family: var(--font-mono);
	font-size: .8125rem;
}

.home-project__tags li {
	padding: .25rem .625rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--soft);
}

/* 案卷底部的外部連結（產品介紹頁，另開分頁） */
.home-project__link {
	margin: 0;
	font-family: var(--font-mono);
	font-size: .875rem;
}

.home-project__link a {
	display: inline-flex;
	align-items: center;
	gap: .375rem;
	min-height: 44px;
	color: var(--accent);
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
	text-underline-offset: .3em;
}

.home-project__link a:hover {
	color: var(--text);
	text-decoration-color: currentColor;
}

@media (min-width: 48em) {
	.home-project__body {
		padding: 2rem 2rem 2.25rem;
	}
}

/* 截圖＋文字並排要到 72em：更窄時右欄太窄，專案標題會斷得很難看 */
@media (min-width: 72em) {
	.home-project__grid {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}

	/* 桌面版截圖跟右欄等高；最低高度避免右欄文字少時截圖太扁 */
	.home-project__shot {
		aspect-ratio: auto;
		min-height: 22rem;
		border-right: 1px solid var(--line);
		border-bottom: 0;
	}
}

/* 文字紀錄（git log） ====================================================== */

.home-log__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line);
}

.home-log__item {
	border-bottom: 1px solid var(--line);
}

/* 手機：日期＋類型一列，摘要在下一列；桌面：日期｜類型｜摘要｜箭頭 */
.home-log__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"date type"
		"text text";
	align-items: baseline;
	gap: .25rem 1rem;
	min-height: 44px;
	padding: 1rem 0 1.125rem;
	color: var(--text);
	text-decoration: none;
}

.home-log__date {
	grid-area: date;
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .8125rem;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
}

.home-log__type {
	grid-area: type;
	font-family: var(--font-mono);
	font-size: .8125rem;
}

.home-log__type--diary {
	color: var(--accent);
}

.home-log__type--read-think {
	color: var(--ok);
}

.home-log__text {
	grid-area: text;
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: break-word;
	transition: color .15s ease;
}

.home-log__arrow {
	display: none;
	grid-area: arrow;
	color: var(--muted);
	font-family: var(--font-mono);
	transition: color .15s ease, transform .15s var(--ease);
}

.home-log__link:hover {
	color: var(--text);
}

.home-log__link:hover .home-log__text,
.home-log__link:hover .home-log__arrow {
	color: var(--accent);
}

.home-log__link:hover .home-log__arrow {
	transform: translateX(4px);
}

.home-log__empty {
	margin: 0;
	padding-block: 1.5rem;
	border-block: 1px solid var(--line);
	color: var(--soft);
}

.home-log__more {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 1rem;
	margin-top: 2rem;
}

@media (min-width: 48em) {
	.home-log__link {
		grid-template-columns: 7rem 6.5rem minmax(0, 1fr) 1.5rem;
		grid-template-areas: "date type text arrow";
		column-gap: 1.5rem;
		padding-block: 1.25rem;
	}

	/* 桌面一行一筆，太長的摘要用刪節號收尾 */
	.home-log__text {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.home-log__arrow {
		display: block;
		text-align: right;
	}
}

/*
 * 觸控裝置沒有滑過（同日記列表，theme.md「日記」）：手機也顯示 →，看得出整列能點；
 * 按下去的那一刻摘要與箭頭變強調色。iOS 的 :active 靠 nav.js 的 touchstart 監聽。
 */
@media (hover: none) and (max-width: 47.99em) {
	.home-log__link {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"date type arrow"
			"text text arrow";
	}

	.home-log__arrow {
		display: block;
		align-self: center;
	}
}

@media (hover: none) {
	.home-log__link {
		-webkit-tap-highlight-color: transparent;
	}

	.home-log__link:active .home-log__text,
	.home-log__link:active .home-log__arrow {
		color: var(--accent);
	}
}