/* issue 431：頁首效果「紅色供應鏈：程式碼視窗與紅光」。右側程式碼視窗（官網品牌頁的右側動畫圖排法）、紅色光暈、眉標紅線、頁首警示句。
   色碼只在 design-tokens.css（--rs-*）；頁首內容 z-index 2，裝飾層 0；只動 translate／opacity／scale，減少動態與暫停動態時靜止。 */
.page-head:has(.rs-glow) { background: radial-gradient(60% 70% at 85% 45%, rgb(var(--rs-glow-rgb) / .55), transparent 70%), linear-gradient(180deg, var(--rs-bg-top), var(--rs-bg)); }
.page-head:has(.rs-glow)::before { display: none; }
.page-head > .rs-glow { position: absolute; z-index: 0; max-width: none; pointer-events: none; }
.page-head:has(.rs-glow) > :not(.rs-glow, .hero-bg) { position: relative; z-index: 2; }
.rs-glow { right: -10%; top: 10%; width: 60vw; height: 60vw; max-width: 900px; max-height: 900px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--rs-red-rgb) / .22), transparent 62%); filter: blur(10px); animation: rs-pulse 6s ease-in-out infinite; }
@keyframes rs-pulse { 50% { opacity: .6; scale: .94; } }
/* 眉標：紅色粗線加光暈，粗體淺紅字（頁首本來就把眉標排在大標上方） */
#main .page-head:has(.rs-glow) > .eyebrow { gap: .9rem; margin-bottom: 1.25rem; color: var(--rs-red-soft); font-size: clamp(1rem, 1.6vw, 1.375rem); font-weight: 800; letter-spacing: .06em; text-transform: none; }
#main .page-head:has(.rs-glow) > .eyebrow::before { width: 3.25rem; height: .32rem; border-radius: 9px; background: var(--rs-red); box-shadow: 0 0 18px rgb(var(--rs-red-rgb) / .45); }
.page-head:has(.rs-glow) > h1 em { font-style: normal; color: var(--rs-red); text-shadow: 0 0 34px rgb(var(--rs-red-rgb) / .45); background: none; -webkit-text-fill-color: currentColor; }
.page-head:has(.rs-glow) > h1 { max-width: 11.5em; margin: 0; font-size: clamp(2.6rem, 7.4vw, 6.6rem); line-height: 1.08; letter-spacing: -.02em; }
.page-head:has(.rs-glow) > .lead { max-width: 40em; margin: clamp(1.25rem, 2.6vw, 2rem) 0 0; color: var(--rs-muted); font-size: clamp(1.05rem, 1.7vw, 1.5rem); }
.page-head:has(.rs-glow) .lead strong { color: var(--paper); font-weight: 800; }
/* 頁首警示句：警示三角＋白字，強調詞用警示紅 */
.rs-warn { display: flex; align-items: center; gap: clamp(.8rem, 1.6vw, 1.4rem); margin: clamp(1.75rem, 4vw, 3rem) 0 clamp(1.5rem, 3vw, 2.25rem); color: var(--paper); font-size: clamp(1.5rem, 3.4vw, 2.9rem); font-weight: 900; line-height: 1.15; }
.rs-warn svg { flex: none; width: clamp(2.6rem, 5vw, 4.4rem); color: var(--rs-red); filter: drop-shadow(0 0 12px rgb(var(--rs-red-rgb) / .45)); }
.rs-warn em { font-style: normal; color: var(--rs-red); }
.page-head > .rs-warn { order: 5; }
/* 右側程式碼視窗：HTML 視窗不是 SVG，取消動畫圖共用的 700/650 比例；寬螢幕由 catalog-interactions.css 放到右欄並垂直置中。
   一輪 10 秒：0～2.4 秒逐行出現（每行 0.3 秒），3 秒起掃描線由上往下（每行 0.3 秒），掃到壞行時標紅並閃一下，掃完防護行亮藍，最後一起淡出重來。 */
.page-head > .hfx.hfx-rs { aspect-ratio: auto; max-width: 38rem; --rs-cycle: 10s; --rs-step: .3s; --rs-scan-start: 3s; }
.rs-win { position: relative; overflow: hidden; border: 1px solid var(--rs-line-hi); border-radius: 1.25rem; background: linear-gradient(180deg, var(--rs-card-top), var(--rs-well)); box-shadow: 0 30px 80px -30px rgb(0 0 0 / .7); }
.rs-win-bar { display: flex; gap: .45rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rs-line); }
.rs-win-bar i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--rs-line-hi); }
.rs-win-bar i:first-child { background: var(--rs-red); }
.rs-lines { margin: 0; padding: 1rem 0 1.25rem; list-style: none; counter-reset: rs-ln; font: 500 clamp(.78rem, 1.05vw, 1rem) / 1 var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace); }
.rs-lines > li { position: relative; display: flex; align-items: center; gap: 1rem; padding: .55rem 1.25rem; overflow: hidden; color: var(--rs-pkg-ink); white-space: nowrap; text-overflow: ellipsis; }
.rs-lines > li::before { counter-increment: rs-ln; content: counter(rs-ln); flex: none; width: 1.4em; color: var(--rs-line-hi); text-align: right; }
.rs-lines > li:nth-child(1) { --i: 0; } .rs-lines > li:nth-child(2) { --i: 1; } .rs-lines > li:nth-child(3) { --i: 2; } .rs-lines > li:nth-child(4) { --i: 3; }
.rs-lines > li:nth-child(5) { --i: 4; } .rs-lines > li:nth-child(6) { --i: 5; } .rs-lines > li:nth-child(7) { --i: 6; } .rs-lines > li:nth-child(8) { --i: 7; }
.rs-lines > li:nth-child(9) { --i: 8; } .rs-lines > li:nth-child(10) { --i: 9; } .rs-lines > li:nth-child(11) { --i: 10; } .rs-lines > li:nth-child(12) { --i: 11; }
/* 完成樣子（沒有 JS、減少動態、暫停動態都停在這裡） */
.rs-lines > li.is-bad { color: var(--rs-red-pale); background: linear-gradient(90deg, rgb(var(--rs-red-rgb) / .2), rgb(var(--rs-red-rgb) / .04)); box-shadow: inset 3px 0 0 var(--rs-red); }
.rs-lines > li.is-guard { color: var(--paper); background: linear-gradient(90deg, rgb(var(--rs-blue-rgb) / .18), transparent); box-shadow: inset 3px 0 0 var(--rs-blue); }
.rs-scanline { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .rs-lines > li { animation: rs-line-in var(--rs-cycle) linear infinite; animation-delay: calc(var(--i, 0) * var(--rs-step) - var(--rs-cycle)); }
  html.js:not([data-motion="off"]) .rs-lines > li:is(.is-bad, .is-guard) { animation-name: rs-line-in, rs-scan-flag; animation-duration: var(--rs-cycle), var(--rs-cycle); animation-timing-function: linear, linear; animation-iteration-count: infinite, infinite;
    animation-delay: calc(var(--i, 0) * var(--rs-step) - var(--rs-cycle)), calc(var(--rs-scan-start) + (var(--i, 0) + .75) * var(--rs-step) - var(--rs-cycle)); }
  html.js:not([data-motion="off"]) .rs-lines > li.is-guard { animation-name: rs-line-in, rs-guard-on; animation-delay: calc(var(--i, 0) * var(--rs-step) - var(--rs-cycle)), calc(var(--rs-scan-start) + 8.5 * var(--rs-step) - var(--rs-cycle)); }
  html.js:not([data-motion="off"]) .rs-scanline { display: block; position: absolute; left: 0; right: 0; top: 3.4rem; height: 2px; will-change: top, opacity; background: linear-gradient(90deg, transparent, var(--rs-red) 20%, var(--rs-red) 80%, transparent); box-shadow: 0 0 16px rgb(var(--rs-red-rgb) / .8); opacity: 0; animation: rs-scanline var(--rs-cycle) linear infinite; }
}
/* 延遲一律減掉一輪（負值）：網頁一打開就從這一輪該在的位置開始，不會在延遲期間先露出「完成樣子」。
   行：0～3% 淡入，留到 92%，再淡出（每行依 --i 錯開出現） */
@keyframes rs-line-in { 0% { opacity: 0; translate: -.5rem 0; } 3%, 92% { opacity: 1; translate: 0 0; } 97%, 100% { opacity: 0; translate: 0 0; } }
/* 壞行：掃到的那一刻閃一下，標紅留到這一輪行淡出前（55%＝5.5 秒），其餘時間是一般行色（涵蓋下一輪被掃到之前） */
@keyframes rs-scan-flag {
  0% { color: var(--paper); background: linear-gradient(90deg, rgb(var(--rs-red-rgb) / .45), rgb(var(--rs-red-rgb) / .08)); box-shadow: inset 3px 0 0 var(--rs-red), 0 0 18px rgb(var(--rs-red-rgb) / .6); }
  4%, 55% { color: var(--rs-red-pale); background: linear-gradient(90deg, rgb(var(--rs-red-rgb) / .2), rgb(var(--rs-red-rgb) / .04)); box-shadow: inset 3px 0 0 var(--rs-red); }
  56%, 100% { color: var(--rs-pkg-ink); background: transparent; box-shadow: inset 0 0 0 transparent; }
}
/* 防護行：掃描結束後亮藍，留到這一輪行淡出前 */
@keyframes rs-guard-on {
  0%, 38% { color: var(--paper); background: linear-gradient(90deg, rgb(var(--rs-blue-rgb) / .18), transparent); box-shadow: inset 3px 0 0 var(--rs-blue); }
  39%, 100% { color: var(--rs-pkg-ink); background: transparent; box-shadow: inset 0 0 0 transparent; }
}
/* 掃描線：3 秒（30%）起，用 2.4 秒（8 行 × 0.3 秒）由第一行掃到最後一行 */
@keyframes rs-scanline { 0%, 29.9% { opacity: 0; top: 3.4rem; } 30% { opacity: 1; top: 3.4rem; } 54% { opacity: 1; top: calc(100% - 1.6rem); } 55%, 100% { opacity: 0; top: calc(100% - 1.6rem); } }
@media (max-width: 40rem) { .rs-lines > li { padding-inline: .9rem; gap: .7rem; } }
html[data-motion="off"] .rs-glow { animation: none; }
@media (prefers-reduced-motion: reduce) { .rs-glow { animation: none; } }

/* 使用者 2026-11-05：防火牆圖（.hfx-rsf，有 src｜ 行時取代程式碼視窗）。尺寸沿用 .hfx 共用的 700/650；色碼只用 --rs-*。 */
.hfx-rsf text { font-family: var(--font-body); }
.hfx-rsf .rsf-bg { fill: url(#rsf-dots); }
.hfx-rsf #rsf-dots circle { fill: var(--rs-line-hi); opacity: .35; }
.hfx-rsf .rsf-glow-in { stop-color: var(--rs-red); stop-opacity: .35; }
.hfx-rsf .rsf-glow-out { stop-color: var(--rs-red); stop-opacity: 0; }
.hfx-rsf .rsf-src rect, .hfx-rsf .rsf-stage rect { fill: var(--rs-card); stroke: var(--rs-line-hi); }
.hfx-rsf .rsf-stage rect { stroke: var(--rs-blue); stroke-opacity: .6; }
.hfx-rsf .rsf-src text, .hfx-rsf .rsf-tag text, .hfx-rsf .rsf-gate-s { font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace); font-size: 15px; font-weight: 700; text-anchor: middle; fill: var(--rs-text); }
.hfx-rsf .rsf-stage text { fill: var(--paper); font-size: 19px; font-weight: 800; text-anchor: middle; }
.hfx-rsf .rsf-in path { fill: none; stroke: var(--rs-line-hi); stroke-width: 1.5; stroke-dasharray: 3 6; }
.hfx-rsf .rsf-out { fill: none; stroke: var(--rs-blue); stroke-width: 2; stroke-dasharray: 4 6; }
.hfx-rsf .rsf-ring { fill: none; stroke: var(--rs-red); stroke-opacity: .35; stroke-width: 2; }
/* 攔截閃光：紅點抵達外圈時亮起並向外擴散（SMIL 控制透明度與半徑）；平常外圈不自己閃。 */
.hfx-rsf .rsf-catch { fill: rgb(var(--rs-red-rgb) / .12); stroke: var(--rs-red); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 10px rgb(var(--rs-red-rgb) / .8)); }
.hfx-rsf .rsf-core { fill: var(--rs-card-top); stroke: var(--rs-red); stroke-width: 2.5; }
.hfx-rsf .rsf-shield { fill: var(--rs-red-fill); }
.hfx-rsf .rsf-check { fill: none; stroke: var(--paper); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hfx-rsf .rsf-gate-t { fill: var(--paper); font-size: 22px; font-weight: 900; text-anchor: middle; }
.hfx-rsf .rsf-gate-s { fill: var(--rs-muted); }
.hfx-rsf .rsf-tag--1 rect { fill: rgb(var(--rs-red-rgb) / .2); stroke: var(--rs-red); }
.hfx-rsf .rsf-tag--1 text { fill: var(--rs-red-soft); }
.hfx-rsf .rsf-tag--2 rect { fill: rgb(var(--rs-warn-rgb, 255 200 107) / .15); stroke: var(--rs-warn); }
.hfx-rsf .rsf-tag--2 text { fill: var(--rs-warn); }
.hfx-rsf .rsf-ok, .hfx-rsf .rsf-go circle { fill: var(--rs-blue); }
.hfx-rsf .rsf-go circle { filter: drop-shadow(0 0 5px rgb(var(--rs-blue-rgb) / .8)); }
.hfx-rsf .rsf-bad { fill: var(--rs-red); }
@media (prefers-reduced-motion: reduce) { .hfx-rsf .rsf-pk, .hfx-rsf .rsf-go { display: none; } }
html[data-motion="off"] .rsf-pk, html[data-motion="off"] .rsf-go { display: none; }