/* 城市數據敘事：漸進增強，不隱藏尚未播放的內容。 */
.motion-city {position:relative;overflow:hidden;background:#eef3f3;isolation:isolate}
.motion-city>img {display:block;width:100%}
.motion-city-color,.motion-city-light {display:none;position:absolute;inset:0;pointer-events:none}
.motion-city-color img {display:block;width:100%;height:100%}
.motion-city-controls {display:flex;justify-content:flex-end;min-height:36px}
.motion-city-controls[hidden] {display:none}
.motion-city-controls button,.motion-toggle,.motion-show-all {font:inherit;font-size:12px;color:#637478;background:none;border:0;min-height:44px;padding:8px 0;cursor:pointer}
.motion-city-controls button:hover,.motion-toggle:hover,.motion-show-all:hover {color:#0d4d5e}
.motion-toggle {margin-left:auto;white-space:nowrap}
.motion-toggle:focus-visible,.motion-city-controls button:focus-visible,.motion-show-all:focus-visible {outline:2px solid #0d4d5e;outline-offset:4px}
.motion-process {margin:0 0 24px;max-width:360px}
.motion-process svg {display:block;width:100%;height:auto;fill:none;stroke:#729699;stroke-width:1.2}
.motion-process figcaption {font-size:12px;color:#637478;margin-top:6px;letter-spacing:.02em}
.process-grid {stroke:#dbe5e5}
.process-muted circle {fill:#dbe5e5;stroke:none}
.process-picked circle,.layer-top circle {fill:#0d4d5e;stroke:white;stroke-width:2}
.process-result {fill:#f4f8f8}
.process-check {stroke:#947b55;stroke-width:2.5;fill:none}
.process-scan {stroke:#947b55;stroke-width:2}
.layer-base {fill:#edf3f3;stroke:#c2d4d5}
.layer-middle {fill:#ffffffa6}
.layer-top {fill:#e8f2f27a;stroke:#4d888e}
.flow-track {stroke:#947b55;stroke-dasharray:3 5}
.metric-number {font-variant-numeric:tabular-nums}
.metric-number .motion-number-source,.tr-number-value .motion-number-source {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.motion-number-value {font:inherit;color:inherit}
.motion-tablist {display:flex;gap:12px 26px;flex-wrap:wrap}
.motion-tabs~.pp-analysis {scroll-margin-top:205px}
.motion-tabs~.pp-analysis .pp-analysis-heading {scroll-margin-top:var(--motion-tab-offset,185px)}
.metric-detail-link {font-size:12px;color:#0d4d5e;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;text-decoration:underline;text-underline-offset:5px}
.motion-tabs {position:sticky;top:88px;z-index:12;background:#fffffff2;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);gap:12px 26px;flex-wrap:wrap;align-items:center}
.motion-tabs a[role=tab] {border-bottom:2px solid transparent;font-size:13px}
.motion-tabs a[aria-selected=true] {color:#0d4d5e;border-bottom-color:#0d4d5e}
.motion-tabs a:focus-visible {outline:2px solid #0d4d5e;outline-offset:3px}
.pp-analysis[hidden] {display:none!important}
.motion-mode .site-header {transition:background .25s,box-shadow .25s;}
.motion-mode .site-header.motion-scrolled {background:#fffffff0;box-shadow:0 4px 20px #123e480a}
.motion-mode .site-header .brand {transform-origin:left center;transition:transform .25s}
.motion-mode .site-header.motion-scrolled .brand {transform:scale(.95)}
.motion-mode .studio-link {transition:color .2s,gap .2s}
.motion-mode .studio-link:hover {gap:30px}
.motion-mode .pp-figure img {transition:opacity .2s}
.motion-mode .data-feature .metric {transition:background .25s}
.motion-mode .data-feature .metric:hover {background:#edf4f480}
.motion-mode .motion-city.is-playing>img {filter:saturate(.2);opacity:.55}
.motion-mode .motion-city.is-playing .motion-city-color {display:block;animation:city-resolve 4.5s cubic-bezier(.22,.61,.36,1) both}
.motion-mode .motion-city.is-playing .motion-city-light {display:block;background:linear-gradient(110deg,transparent 40%,#ffffff70 50%,transparent 60%);animation:city-light 4.5s ease-out both}
.motion-mode .opening-copy {animation:copy-arrive .85s ease-out both}
.motion-mode .is-revealing {animation:section-arrive .65s ease-out both}
.motion-mode .motion-process.is-playing .process-scan {animation:process-scan 2.4s ease-in-out both}
.motion-mode .motion-process.is-playing .process-result {animation:process-result 2.4s ease-out both}
.motion-mode .motion-process.is-playing .flow-track {animation:process-flow 2.4s linear both}
.motion-mode .motion-process.is-playing .process-muted {animation:process-filter 2.4s ease-out both}
.motion-mode .motion-process.is-playing .layer-top {animation:process-layer 2.4s ease-out both}
.motion-mode .motion-process.is-playing .layer-middle {animation:process-layer 2.4s .1s ease-out both}
.motion-mode .pp-analysis.is-switching {animation:result-arrive .35s ease-out both}
.motion-suspended *, .motion-suspended *:before, .motion-suspended *:after {animation-play-state:paused!important}
@keyframes city-resolve {from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes city-light {from{transform:translateX(-100%);opacity:0}20%{opacity:.7}to{transform:translateX(100%);opacity:0}}
@keyframes copy-arrive {from{opacity:.6;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes section-arrive {from{opacity:.55;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes result-arrive {from{opacity:.45}to{opacity:1}}
@keyframes process-scan {0%{transform:translateY(0);opacity:0}20%{opacity:1}85%{transform:translateY(61px);opacity:1}100%{transform:translateY(61px);opacity:0}}
@keyframes process-result {0%,35%{opacity:.2}100%{opacity:1}}
@keyframes process-flow {to{stroke-dashoffset:-48}}
@keyframes process-filter {0%,30%{opacity:1}100%{opacity:.3}}
@keyframes process-layer {from{transform:translateY(14px);opacity:.3}to{transform:none;opacity:1}}
@media(max-width:800px){
 .pp-page .motion-tabs {top:88px;flex-wrap:nowrap;overflow-x:auto;gap:22px;scrollbar-width:thin;padding-block:8px}
 .motion-tabs a,.motion-tabs button {flex-shrink:0;white-space:nowrap}
 .motion-tablist {flex-wrap:nowrap;flex-shrink:0;gap:22px}
 .motion-tabs~.pp-analysis {scroll-margin-top:165px}
 .motion-process {max-width:280px}
 .motion-mode .motion-city.is-playing .motion-city-color,.motion-mode .motion-city.is-playing .motion-city-light {animation-duration:2.5s}
 .motion-toggle {margin-left:0}
}
@media(prefers-reduced-motion:reduce){
 .motion-mode *, .motion-mode *:before,.motion-mode *:after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .motion-city-color,.motion-city-light {display:none!important}
 .motion-mode .motion-city.is-playing>img {filter:none;opacity:1}
}