/* issue 314 場景 cloudcoffer-chain：攻擊路徑一字排開、依序點亮。只讀官網 token 與 --accent*；後果用 --arch-orange。
   預設（沒有 JS、減少動態、暫停動態）全部亮著；JS 加 .is-armed 後先暗，依序加 .is-lit（亮）與 .is-go（填線），結論加 .is-on。 */
.page-blocks .pp-scene--cloudcoffer-chain { --cc-fg: var(--ink); --cc-mute: var(--muted); --cc-edge: var(--line); --cc-hi: var(--accent-ink); --cc-risk: var(--arch-orange); --cc-panel: var(--surface-sunken); --cc-gap: clamp(.875rem, 1.6vw, 1.75rem); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--cloudcoffer-chain { --cc-fg: var(--paper); --cc-mute: var(--muted-on-dark); --cc-edge: var(--on-dark-line); --cc-hi: var(--accent-dark); --cc-panel: color-mix(in srgb, var(--deeper) 70%, transparent); }
.page-blocks .cc { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.page-blocks .cc-steps { display: grid; grid-template-columns: repeat(var(--cc-cols, 5), minmax(0, 1fr)); column-gap: var(--cc-gap); margin: 0; padding: 0; list-style: none; }
.page-blocks .cc-steps--n2 { --cc-cols: 2; } .page-blocks .cc-steps--n3 { --cc-cols: 3; } .page-blocks .cc-steps--n4 { --cc-cols: 4; } .page-blocks .cc-steps--n6 { --cc-cols: 6; }
.page-blocks .cc-step { position: relative; min-width: 0; }
.page-blocks .cc-mk { display: flex; align-items: center; height: 1.625rem; }
.page-blocks .cc-node { flex: none; width: 1.375rem; height: 1.5rem; fill: none; stroke: var(--cc-hi); stroke-width: 3; overflow: visible; transition: stroke .8s var(--ease), filter .8s var(--ease); }
.page-blocks .cc-seg { position: relative; flex: 1 1 auto; height: 2px; margin: 0 calc(var(--cc-gap) * -1) 0 .75rem; background: var(--cc-edge); }
.page-blocks .cc-seg i { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--cc-hi); }
.page-blocks .cc-n { margin: 1.375rem 0 0; color: var(--cc-hi); font-size: clamp(2.125rem, 3vw, 3rem); font-weight: 900; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .8s var(--ease); }
.page-blocks .cc-t { margin: .875rem 0 .5rem; color: var(--cc-fg); font-size: clamp(1.1875rem, 1.5vw, 1.5rem); line-height: 1.3; letter-spacing: -.01em; transition: color .8s var(--ease); }
.page-blocks .cc-b { margin: 0; color: var(--cc-mute); font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.75; transition: color .8s var(--ease); }
.page-blocks .cc-step.is-risk .cc-node { stroke: var(--cc-risk); }
.page-blocks .cc-step.is-risk .cc-n { color: var(--cc-risk); }
.page-blocks .cc-badge { display: inline-block; margin-left: .5rem; padding: .125rem .5rem; border: 1px solid var(--cc-risk); border-radius: var(--r-pill); color: var(--cc-risk); font-size: .75rem; font-weight: 700; letter-spacing: .08em; vertical-align: .2em; }
.page-blocks .cc-sum { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .625rem; margin: 0; padding: clamp(1.125rem, 2vw, 1.625rem) clamp(1.25rem, 2.2vw, 1.875rem); border: 1px solid var(--cc-edge); border-radius: var(--r-card); background: var(--cc-panel); color: var(--cc-mute); font-size: clamp(.9375rem, 1.15vw, 1.125rem); }
.page-blocks .cc-chip { padding: .375rem .75rem; border: 1px solid color-mix(in srgb, var(--cc-hi) 60%, transparent); border-radius: var(--r-pill); background: color-mix(in srgb, var(--cc-hi) 16%, transparent); color: var(--cc-fg); font-size: .875rem; font-weight: 700; transition: background .6s var(--ease); }
.page-blocks .cc-x { color: var(--cc-hi); font-weight: 900; }

@media (prefers-reduced-motion: no-preference) {
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step:not(.is-lit) .cc-node { stroke: color-mix(in srgb, var(--cc-hi) 28%, transparent); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step:not(.is-lit) .cc-n { color: color-mix(in srgb, var(--cc-hi) 28%, transparent); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step:not(.is-lit) .cc-t { color: color-mix(in srgb, var(--cc-fg) 34%, transparent); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step:not(.is-lit) .cc-b { color: color-mix(in srgb, var(--cc-mute) 40%, transparent); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step:not(.is-lit) .cc-badge { opacity: .3; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step.is-lit .cc-node { filter: drop-shadow(0 0 .45rem var(--cc-hi)); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step.is-risk.is-lit .cc-node { filter: drop-shadow(0 0 .55rem var(--cc-risk)); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-seg i { width: 0; transition: width .75s cubic-bezier(.3, .1, .3, 1); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step.is-go .cc-seg i { width: 100%; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum { opacity: .35; transition: opacity .9s var(--ease); }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum.is-on { opacity: 1; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum:not(.is-on) .cc-chip { background: transparent; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum .cc-chip[data-k="1"] { transition-delay: .12s; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum .cc-chip[data-k="2"] { transition-delay: .24s; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum .cc-chip[data-k="3"] { transition-delay: .36s; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum .cc-chip[data-k="4"] { transition-delay: .48s; }
  html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-sum .cc-chip[data-k="5"] { transition-delay: .6s; }
}

/* 窄螢幕：直排，節點與步驟線在左側。 */
@media (max-width: 53.75rem) {
  .page-blocks .cc-steps { grid-template-columns: minmax(0, 1fr); row-gap: 1.75rem; padding-left: 2.25rem; }
  .page-blocks .cc-mk { position: absolute; left: -2.25rem; top: 0; bottom: 0; height: auto; flex-direction: column; width: 1.375rem; }
  .page-blocks .cc-seg { flex: 1 1 auto; width: 2px; height: auto; margin: .5rem 0 -1.75rem; }
  .page-blocks .cc-seg i { inset: 0 0 auto 0; width: 100%; height: 100%; }
  .page-blocks .cc-n { margin-top: 0; }
  @media (prefers-reduced-motion: no-preference) {
    html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-seg i { width: 100%; height: 0; transition: height .75s cubic-bezier(.3, .1, .3, 1); }
    html.js:not([data-motion="off"]) .page-blocks .cc.is-armed .cc-step.is-go .cc-seg i { height: 100%; }
  }
}