/* issue 193 場景 cloudcoffer-vault：金庫轉盤六場景。只讀官網 token 與 --accent*；警示用 --arch-coral、提醒用 --arch-orange。
   issue 332：不再釘住。寬螢幕標題＋列表在左、轉盤在右；手機依序標題、轉盤、列表。轉盤 data-s（0–5）＝目前場景，中央與節點依場景換意義；
   沒有 JS（或減少動態）停在場景 1 的完成畫面、六段說明全展開。step-player：.is-armed／.is-auto／.is-run，列表 .is-on。 */
.page-blocks .pp-scene--cloudcoffer-vault { --cv-fg: var(--ink); --cv-mute: var(--muted); --cv-edge: var(--line); --cv-hi: var(--accent-ink); --cv-node: var(--paper); --cv-panel: var(--surface-sunken); --cv-glow: color-mix(in srgb, var(--accent) 22%, transparent); --cv-hot: var(--arch-coral); --cv-warn: var(--arch-orange); }
.page-blocks :is(.pp-section--band, .pp-section--image) .pp-scene--cloudcoffer-vault { --cv-fg: var(--paper); --cv-mute: var(--muted-on-dark); --cv-edge: var(--on-dark-line); --cv-hi: var(--accent-dark); --cv-node: var(--deeper); --cv-panel: color-mix(in srgb, var(--paper) 6%, var(--deeper)); --cv-glow: color-mix(in srgb, var(--accent) 16%, transparent); }
.page-blocks .cv-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "dial" "list"; row-gap: clamp(1.25rem, 3vw, 2rem); }
.page-blocks .cv-head { grid-area: head; }
.page-blocks .cv-head .pp-head { margin-bottom: 0; }
.page-blocks .cv-top { grid-area: dial; }
.page-blocks .cv-list { grid-area: list; }
/* 桌機：標題＋列表在左、轉盤在右（issue 324 原則）。 */
@media (min-width: 62rem) {
  .page-blocks .cv-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "head dial" "list dial"; column-gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .page-blocks .cv-head { align-self: end; }
  .page-blocks .cv-list { align-self: start; }
}

.page-blocks .cv-dial { position: relative; width: min(100%, 31rem); margin-inline: auto; }
.page-blocks .cv-dial svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; filter: drop-shadow(0 0 26px var(--cv-glow)); }
.page-blocks .cv-dial .ring0 { fill: none; stroke: var(--cv-mute); stroke-width: 1.4; }
.page-blocks .cv-dial .ring { fill: none; stroke: var(--cv-edge); stroke-width: 1.2; }
.page-blocks .cv-dial .ring2 { fill: none; stroke: var(--cv-mute); stroke-width: .8; stroke-dasharray: 1.5 5; }
.page-blocks .cv-dial .wheel { transform: rotate(0deg); }
.page-blocks .cv-dial .tk line { stroke: var(--cv-mute); stroke-width: 1; }
.page-blocks .cv-dial .rim0 { fill: none; stroke: var(--cv-edge); stroke-width: 7; }
.page-blocks .cv-dial .rim { fill: none; stroke: var(--cv-mute); stroke-width: 3; }
.page-blocks .cv-dial .spoke { stroke: var(--cv-mute); stroke-width: 4; stroke-linecap: round; }
.page-blocks .cv-dial .bolt { fill: var(--cv-hi); }
.page-blocks .cv-dial .hubo { fill: none; stroke: var(--cv-mute); stroke-width: 1.5; }
.page-blocks .cv-dial .hub { stroke: var(--cv-mute); stroke-width: 2; }
.page-blocks .cv-dial .v0 { stop-color: color-mix(in srgb, var(--accent) 30%, var(--cv-panel)); }
.page-blocks .cv-dial .v1 { stop-color: var(--cv-panel); }
/* 節點與字：預設（場景 1 完成）全亮。 */
.page-blocks .cv-dial .vn circle { fill: var(--cv-node); stroke: var(--cv-hi); stroke-width: 1.4; transition: fill .45s var(--ease), stroke .45s var(--ease), opacity .45s var(--ease); }
.page-blocks .cv-dial .vn { transition: opacity .6s var(--ease); }
.page-blocks .cv-dial .vt { fill: var(--cv-hi); font-size: 9px; font-weight: 800; text-anchor: middle; dominant-baseline: central; }
.page-blocks .cv-dial .vt.sm { font-size: 7px; }
.page-blocks .cv-dial .vc { fill: var(--cv-fg); font-size: 30px; font-weight: 900; text-anchor: middle; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.page-blocks .cv-dial .vc.sm { font-size: 14px; font-weight: 800; }
.page-blocks .cv-dial .vl { opacity: 0; transition: opacity .35s var(--ease); }
.page-blocks .cv-dial[data-s="0"] .vl[data-s="0"], .page-blocks .cv-dial[data-s="1"] .vl[data-s="1"], .page-blocks .cv-dial[data-s="2"] .vl[data-s="2"],
.page-blocks .cv-dial[data-s="3"] .vl[data-s="3"], .page-blocks .cv-dial[data-s="4"] .vl[data-s="4"], .page-blocks .cv-dial[data-s="5"] .vl[data-s="5"] { opacity: 1; }
.page-blocks .cv-dial .vc-n { opacity: 0; }
.page-blocks .cv-dial .vc-n:last-child { opacity: 1; }
.page-blocks .cv-dial .cv-flow line { stroke: var(--cv-warn); stroke-width: 1.6; stroke-dasharray: 3 3; opacity: 0; transition: opacity .4s var(--ease); }
.page-blocks .cv-dial .cv-doc { opacity: 0; transition: opacity .5s var(--ease); }
.page-blocks .cv-dial .cv-doc rect { fill: var(--cv-node); stroke: var(--cv-hi); stroke-width: 1.6; }
.page-blocks .cv-dial .cv-doc line { stroke: var(--cv-mute); stroke-width: 1.8; stroke-linecap: round; }
/* 中輪每換一場景轉 30 度。 */
.page-blocks .cv-dial[data-s="1"] .wheel { transform: rotate(30deg); } .page-blocks .cv-dial[data-s="2"] .wheel { transform: rotate(60deg); }
.page-blocks .cv-dial[data-s="3"] .wheel { transform: rotate(90deg); } .page-blocks .cv-dial[data-s="4"] .wheel { transform: rotate(120deg); } .page-blocks .cv-dial[data-s="5"] .wheel { transform: rotate(150deg); }
/* 2–5：沒標記的節點退暗；標記依場景上色。 */
.page-blocks .cv-dial:is([data-s="1"], [data-s="2"], [data-s="3"], [data-s="4"]) .vn circle { stroke: var(--cv-edge); opacity: .55; }
.page-blocks .cv-dial[data-s="1"] .vl[data-s="1"] .vt { fill: var(--cv-mute); }
.page-blocks .cv-dial[data-s="1"] .vn--3 circle, .page-blocks .cv-dial[data-s="3"] :is(.vn--2, .vn--6) circle, .page-blocks .cv-dial[data-s="4"] .vn--4 circle { stroke: var(--cv-hot); fill: color-mix(in srgb, var(--cv-hot) 22%, var(--cv-node)); opacity: 1; stroke-width: 2; }
.page-blocks .cv-dial[data-s="1"] .vn--5 circle { stroke: var(--cv-mute); stroke-dasharray: 3 3; fill: transparent; opacity: 1; }
.page-blocks .cv-dial[data-s="2"] :is(.vn--2, .vn--5) circle, .page-blocks .cv-dial[data-s="3"] .vn--4 circle { stroke: var(--cv-warn); fill: color-mix(in srgb, var(--cv-warn) 18%, var(--cv-node)); opacity: 1; stroke-width: 2; }
.page-blocks .cv-dial[data-s="1"] .vl[data-s="1"] .vg:nth-child(3) .vt, .page-blocks .cv-dial[data-s="3"] .vl[data-s="3"] .vg:is(:nth-child(2), :nth-child(6)) .vt, .page-blocks .cv-dial[data-s="4"] .vl[data-s="4"] .vt { fill: var(--cv-hot); }
.page-blocks .cv-dial[data-s="2"] .vl[data-s="2"] .vt, .page-blocks .cv-dial[data-s="3"] .vl[data-s="3"] .vg:nth-child(4) .vt { fill: var(--cv-warn); }
.page-blocks .cv-dial[data-s="3"] .vl[data-s="3"] .vg:is(:nth-child(1), :nth-child(3), :nth-child(5)) .vt { fill: var(--cv-mute); }
.page-blocks .cv-dial[data-s="2"] .cv-flow line { opacity: .9; }
.page-blocks .cv-dial[data-s="5"] .vn { opacity: 0; }
.page-blocks .cv-dial[data-s="5"] .cv-doc { opacity: 1; }

/* 列表 */
.page-blocks .cv-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cv-edge); }
.page-blocks .cv-item { position: relative; padding: .875rem 1rem 1rem 1.125rem; border-bottom: 1px solid var(--cv-edge); border-left: 3px solid transparent; transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.page-blocks .cv-t { margin: 0; color: var(--cv-fg); font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.35; }
.page-blocks .cv-t button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 2.5em minmax(0, 1fr); width: 100%; cursor: pointer; }
.page-blocks .cv-t button:focus-visible { outline: 3px solid var(--cv-hi); outline-offset: 4px; border-radius: var(--radius-m); }
.page-blocks .cv-i { color: var(--cv-hi); font-size: .8125rem; font-weight: 800; letter-spacing: .1em; line-height: 1.9; font-variant-numeric: tabular-nums; }
.page-blocks .cv-item p { margin: .375rem 0 0 2.5em; color: var(--cv-mute); font-size: clamp(.875rem, 1.05vw, 1rem); line-height: 1.75; }
.page-blocks .cv-timer { position: absolute; left: 1.125rem; right: 1rem; bottom: -1px; height: 2px; background: var(--cv-hi); opacity: 0; transform: scaleX(0); transform-origin: left; }
.page-blocks .cv-item:hover { background: color-mix(in srgb, var(--cv-fg) 3%, transparent); }
.page-blocks .cv-item.is-on { border-left-color: var(--cv-hi); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.page-blocks .cv-grid.is-armed .cv-item:not(.is-on) .cv-t { color: var(--cv-mute); }
.page-blocks .cv-grid.is-armed .cv-item:not(.is-on) .cv-i { color: var(--cv-mute); }
/* 輪播時只展開目前場景的說明（沒有 JS、減少動態、點選停住後全展開）。 */
.page-blocks .cv-grid.is-armed .cv-item:not(.is-on) p { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) .page-blocks .cv-dial .wheel { transition: transform 1s cubic-bezier(.6, 0, .2, 1); }
  html.js:not([data-motion="off"]) .page-blocks .cv-grid.is-auto.is-run .cv-item.is-on .cv-timer { opacity: .8; animation: cv-timer 3.8s linear forwards; }
  /* 場景 1：端點逐一點亮、中央數字跟著數到 6。 */
  html.js:not([data-motion="off"]) .page-blocks .cv-grid.is-armed .cv-dial[data-s="0"] .vn circle { animation: cv-lit .35s var(--ease) both; }
  html.js:not([data-motion="off"]) .page-blocks .cv-grid.is-armed .cv-dial[data-s="0"] .vl[data-s="0"] .vt { animation: cv-show .35s var(--ease) both; }
  html.js:not([data-motion="off"]) .page-blocks .cv-grid.is-armed .cv-dial[data-s="0"] .vc-n { animation: cv-count .38s steps(1); }
  html.js:not([data-motion="off"]) .page-blocks .cv-grid.is-armed .cv-dial[data-s="0"] .vc-n:last-child { animation: cv-show .2s steps(1) both; }
  html.js:not([data-motion="off"]) .page-blocks .cv-dial[data-s="2"] .cv-flow line { animation: cv-flow 1s linear infinite; }
  html.js:not([data-motion="off"]) .page-blocks .cv-dial[data-s="4"] .vn--4 circle { animation: cv-blink 1s steps(2, jump-none) infinite; }
}
.page-blocks .cv-dial .vn--1 circle, .page-blocks .cv-dial .vg:nth-child(1) .vt, .page-blocks .cv-dial .vc-n[data-n="1"] { animation-delay: .2s; }
.page-blocks .cv-dial .vn--2 circle, .page-blocks .cv-dial .vg:nth-child(2) .vt, .page-blocks .cv-dial .vc-n[data-n="2"] { animation-delay: .58s; }
.page-blocks .cv-dial .vn--3 circle, .page-blocks .cv-dial .vg:nth-child(3) .vt, .page-blocks .cv-dial .vc-n[data-n="3"] { animation-delay: .96s; }
.page-blocks .cv-dial .vn--4 circle, .page-blocks .cv-dial .vg:nth-child(4) .vt, .page-blocks .cv-dial .vc-n[data-n="4"] { animation-delay: 1.34s; }
.page-blocks .cv-dial .vn--5 circle, .page-blocks .cv-dial .vg:nth-child(5) .vt, .page-blocks .cv-dial .vc-n[data-n="5"] { animation-delay: 1.72s; }
.page-blocks .cv-dial .vn--6 circle, .page-blocks .cv-dial .vg:nth-child(6) .vt, .page-blocks .cv-dial .vc-n[data-n="6"] { animation-delay: 2.1s; }
@keyframes cv-timer { to { transform: scaleX(1); } }
@keyframes cv-lit { from { stroke: var(--cv-edge); fill: var(--cv-node); } }
@keyframes cv-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-count { 0%, 100% { opacity: 1; } }
@keyframes cv-flow { to { stroke-dashoffset: -12; } }
@keyframes cv-blink { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .page-blocks .cv-dial :is(.wheel, .vn, .vn circle, .vl, .cv-flow line, .cv-doc) { transition: none; } }
html[data-motion="off"] .page-blocks .cv-dial :is(.wheel, .vn, .vn circle, .vl, .cv-flow line, .cv-doc) { transition: none; }
@media (max-width: 61.99rem) { .page-blocks .cv-dial { width: min(100%, 19rem); } }