/* issue 193 場景 cloudcoffer-airgap：封閉內網／旁接分析兩張概念示意圖。只讀官網 token 與 --accent*。
   圖是 SVG；沒有 JS 也完整。虛線流動只在沒有減少動態與暫停動態時才跑。
   issue 317：closed 版條列前三點對應圖的三層（.ca-layer[data-l]），JS 依序加 is-on；is-cycling 時其餘層與條列退暗、條列底部細線倒數。 */
.page-blocks .pp-scene--cloudcoffer-airgap { --ca-fg: var(--ink); --ca-mute: var(--muted); --ca-edge: var(--line); --ca-hi: var(--accent-ink); --ca-node: var(--paper); --ca-panel: var(--surface-sunken); --ca-glow: color-mix(in srgb, var(--accent) 18%, transparent); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--cloudcoffer-airgap { --ca-fg: var(--paper); --ca-mute: var(--muted-on-dark); --ca-edge: var(--on-dark-line); --ca-hi: var(--accent-dark); --ca-node: var(--deeper); --ca-panel: color-mix(in srgb, var(--paper) 6%, var(--deeper)); --ca-glow: color-mix(in srgb, var(--accent) 14%, transparent); }
.page-blocks .ca { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.page-blocks .ca-copy { min-width: 0; }
.page-blocks .ca-list { display: grid; gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.page-blocks .ca-list li { padding-left: 1.25rem; border-left: 2px solid var(--ca-hi); color: var(--ca-mute); line-height: 1.7; }
.page-blocks .ca-list b { color: var(--ca-fg); font-weight: 700; }
.page-blocks .ca-fig { position: relative; min-width: 0; margin: 0; padding: clamp(.75rem, 2vw, 1.25rem) clamp(.75rem, 2vw, 1.25rem) 3rem; border: 1px solid var(--ca-edge); border-radius: var(--radius-l); background: var(--ca-panel); }
.page-blocks .ca-fig figcaption { position: absolute; left: 0; right: 0; bottom: .75rem; color: var(--ca-fg); font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-align: center; }
.page-blocks .ca-svg { display: block; width: 100%; height: auto; }
.page-blocks .ca-svg .a0 { stop-color: color-mix(in srgb, var(--accent) 16%, transparent); }
.page-blocks .ca-svg .a1 { stop-color: transparent; }
.page-blocks .ca-svg .agb circle { fill: var(--ca-mute); opacity: .45; }
.page-blocks .ca-svg .agr { fill: none; stroke: var(--ca-mute); stroke-width: 1.5; stroke-dasharray: 2 7; }
.page-blocks .ca-svg .agr2 { fill: none; stroke: var(--ca-edge); stroke-width: 1; }
.page-blocks .ca-svg .agl line { stroke: var(--ca-mute); stroke-width: 2; stroke-dasharray: 6 8; }
.page-blocks .ca-svg .stop { fill: none; stroke: var(--ca-fg); stroke-width: 3; stroke-linecap: round; }
.page-blocks .ca-svg .agh0 { fill: none; stroke: var(--ca-edge); stroke-width: 1.5; stroke-linejoin: round; }
.page-blocks .ca-svg .agh { fill: color-mix(in srgb, var(--accent) 8%, transparent); stroke: var(--ca-hi); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 10px var(--ca-glow)); }
.page-blocks .ca-svg .agh2 { fill: none; stroke: var(--ca-mute); stroke-width: 1.5; }
.page-blocks .ca-svg .agd circle { fill: var(--ca-mute); }
.page-blocks .ca-svg .bpl { stroke: var(--ca-mute); stroke-width: 7; stroke-linecap: round; }
.page-blocks .ca-svg .bpl2 { stroke: var(--ca-node); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 14; }
.page-blocks .ca-svg .bph { fill: var(--ca-mute); }
.page-blocks .ca-svg .bpt { fill: var(--ca-mute); font-size: 17px; font-weight: 600; }
.page-blocks .ca-svg .bpd { stroke: var(--ca-hi); stroke-width: 3; stroke-dasharray: 6 8; }
.page-blocks .ca-svg .bpa { fill: var(--ca-hi); }
.page-blocks .ca-svg .bpb { fill: var(--ca-node); stroke: var(--ca-hi); stroke-width: 2; }
.page-blocks .ca-svg .bpb2 { fill: none; stroke: var(--ca-mute); stroke-width: 1; }
.page-blocks .ca-svg .bpx { fill: var(--ca-fg); font-size: 22px; font-weight: 700; text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .ca-svg .bpd { animation: ca-flow 1.4s linear infinite; }
}
@keyframes ca-flow { to { stroke-dashoffset: -28; } }
@media (min-width: 62rem) {
  /* issue 324：全站圖文並排一律標題在左、圖在右，圖照 DOM 順序排在文字之後。 */
  .page-blocks .ca { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* 窄螢幕：文字以 viewBox 單位放大，渲染後仍有 12px 以上 */
@media (max-width: 40rem) {
  .page-blocks .ca-svg .bpt { font-size: 24px; }
  .page-blocks .ca-svg .bpx { font-size: 28px; }
}

/* issue 317：條列編號、層名與按鈕（JS 把對應三層的條列包成按鈕）。 */
.page-blocks .ca--closed .ca-list li[data-l] { display: block; padding: 0; border-left: 0; }
.page-blocks .ca-no { display: inline-block; min-width: 2.25rem; color: var(--ca-mute); font-size: .8125rem; font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; transition: color .5s var(--ease); }
.page-blocks .ca-lv { display: inline-block; margin-right: .5rem; color: var(--ca-mute); font-size: .75rem; font-weight: 700; letter-spacing: .1em; transition: color .5s var(--ease); }
.page-blocks .ca--closed .ca-list li[data-l] > .ca-txt, .page-blocks .ca-btn > .ca-txt { display: block; margin-top: .25rem; padding-left: 2.25rem; }
.page-blocks .ca--closed .ca-list li[data-l]:not(:has(.ca-btn)) { padding: .875rem 1.125rem; border-left: 2px solid var(--ca-hi); }
.page-blocks .ca-btn { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; padding: .875rem 1.125rem; border: 1px solid transparent; border-radius: var(--radius-m); color: var(--ca-mute); line-height: 1.7; cursor: pointer; overflow: hidden; transition: background .5s var(--ease), border-color .5s var(--ease); }
.page-blocks .ca-btn:focus-visible { outline: 3px solid var(--ca-hi); outline-offset: 3px; }
.page-blocks .ca-btn b { color: var(--ca-fg); }
.page-blocks .ca-list li.is-on .ca-btn { border-color: color-mix(in srgb, var(--ca-hi) 55%, transparent); background: color-mix(in srgb, var(--ca-hi) 7%, transparent); }
.page-blocks .ca-list li.is-on :is(.ca-no, .ca-lv) { color: var(--ca-hi); }
.page-blocks .ca-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ca-hi); transform-origin: left; scale: 0 1; pointer-events: none; }
.page-blocks .ca.is-cycling .ca-list li[data-l]:not(.is-on) .ca-btn { color: color-mix(in srgb, var(--ca-mute) 60%, transparent); }
.page-blocks .ca.is-cycling .ca-list li[data-l]:not(.is-on) .ca-btn b { color: color-mix(in srgb, var(--ca-fg) 60%, transparent); }

/* 圖的三層：輪播時其餘層退暗；目前層的強調。 */
.page-blocks .ca-svg .ca-layer { transition: opacity .6s var(--ease); }
.page-blocks .ca.is-cycling .ca-svg .ca-layer:not(.is-on) { opacity: .28; }
.page-blocks .ca-svg .agscan { fill: none; stroke: var(--ca-hi); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 1000; opacity: 0; }
.page-blocks .ca-svg .aglk line { stroke: var(--ca-hi); stroke-width: 1.6; opacity: 0; transition: opacity .6s var(--ease); }
.page-blocks .ca-svg .ca-layer[data-l="0"].is-on .agr { stroke: var(--ca-hi); stroke-width: 2.2; }
.page-blocks .ca-svg .ca-layer[data-l="0"].is-on .agl line { stroke: color-mix(in srgb, var(--ca-hi) 70%, transparent); }
.page-blocks .ca-svg .ca-layer[data-l="0"].is-on .stop { stroke: var(--ca-hi); filter: drop-shadow(0 0 6px var(--ca-hi)); }
.page-blocks .ca-svg .ca-layer[data-l="1"].is-on :is(.agh0, .agh2) { stroke: color-mix(in srgb, var(--ca-hi) 60%, transparent); }
.page-blocks .ca-svg .ca-layer[data-l="2"].is-on .agd circle { fill: var(--ca-fg); }
.page-blocks .ca-svg .ca-layer[data-l="2"].is-on .aglk line { opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .ca.is-cycling.is-run .ca-list li.is-on .ca-timer { animation: ca-timer 3.4s linear forwards; }
  html:not([data-motion="off"]) .page-blocks .ca-svg .ca-layer[data-l="0"].is-on .agl line { animation: ca-inward 1s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .ca-svg .ca-layer[data-l="0"].is-on .agr { transform-box: fill-box; transform-origin: center; animation: ca-spin 18s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .ca-svg .ca-layer[data-l="0"].is-on .stop { animation: ca-bump 1s var(--ease) infinite; }
  html:not([data-motion="off"]) .page-blocks .ca-svg .ca-layer[data-l="1"].is-on .agscan { opacity: 1; animation: ca-scan 1.6s linear infinite; }
  html:not([data-motion="off"]) .page-blocks .ca-svg .ca-layer[data-l="2"].is-on .agc { transform-box: fill-box; transform-origin: center; animation: ca-pulse 1.6s var(--ease) infinite; }
}
@keyframes ca-timer { to { scale: 1 1; } }
@keyframes ca-inward { to { stroke-dashoffset: -14; } }
@keyframes ca-spin { to { rotate: 360deg; } }
@keyframes ca-bump { 50% { opacity: .55; } }
@keyframes ca-scan { to { stroke-dashoffset: -1060; } }
@keyframes ca-pulse { 50% { scale: 1.35; } }