/* /history/ 的版面。色票與字體家族全部來自 ../shared/brand.css，這裡沒有寫死的色碼、沒有寫死的字體家族。
   深淺一律 fill-opacity 或 rgba 的品牌色。 */
*{box-sizing:border-box}
:root{--gut:clamp(16px,4vw,56px);--strip-h:64px}
html{overflow-x:clip;scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;overflow-x:clip}
html[data-lang="zh"] .en,html[data-lang="en"] .zh{display:none}
.sr{position:absolute;left:-9999px}
.skip{position:absolute;left:-9999px;top:0;z-index:90;background:var(--bt-navy);color:var(--bt-cream);padding:12px 18px;text-decoration:none}
.skip:focus{left:0}

/* ── 頂欄：左 logo、中標題、右兩顆。浮在場景上面，不是玻璃，因為底下是淺色的天空，一塊白玻璃會跟天空黏在一起。 ── */
.top{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;gap:14px;padding:12px var(--gut);pointer-events:none}
.top>*{pointer-events:auto}
.home{display:flex;align-items:center;flex:0 0 auto;position:relative}
.home img{height:30px;width:auto;display:block}
.home::after{content:"";position:absolute;inset:-8px -6px}
.title{flex:1 1 auto;min-width:0}
.title h1{margin:0;font:700 clamp(20px,2.4vw,28px)/1.1 var(--display);letter-spacing:.02em;color:var(--ink)}
html[data-lang="zh"] .title h1{font-family:var(--han);font-weight:900;letter-spacing:.06em}
.title .sub{margin:2px 0 0;font-size:13.5px;line-height:1.3;color:rgba(16,42,134,.8)}
.tools{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.play,.lang{min-height:36px;min-width:44px;border:1px solid rgba(16,42,134,.32);border-radius:999px;background:rgba(237,229,216,.85);color:var(--ink);cursor:pointer;
  font:700 13px/1 var(--display);letter-spacing:.1em;padding:9px 14px;position:relative;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.play::after,.lang::after{content:"";position:absolute;left:0;right:0;top:calc(50% - 22px);height:44px}
.play:hover,.lang:hover{background:var(--bt-navy);color:var(--bt-cream)}
.play[aria-pressed="true"]{background:var(--bt-orange);color:var(--bt-navy);border-color:transparent}

/* ── 場景 ── */
.road-wrap{position:relative}
.stage{position:relative;height:100svh;min-height:420px;width:100%;overflow:hidden}
.scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
/* 3D 的顏色不在 CSS：main.js 開頁把 --bt-* 七色讀出來丟給 scene.js。 */
/* 整個世界（場景與卡）靠近一站時一起稍微放大；原點放在畫面中偏下，也就是路上那一站附近。 */
.world{position:absolute;inset:0;transform-origin:62% 64%;will-change:transform}
/* 左上淡淡的大年份：參考站的節奏。不是給人讀的（aria-hidden），年份帶與卡才是。 */
.ghost{position:absolute;left:var(--gut);top:72px;font-family:var(--display);font-weight:700;font-size:clamp(120px,22vw,300px);line-height:1;letter-spacing:-.02em;color:var(--bt-navy);opacity:.09;pointer-events:none;user-select:none;transition:opacity var(--dur-3) var(--ease)}
/* 室內那兩段（航廈與空橋）大年份淡一半（main.js 掛 inside）。 */
html.inside .ghost{opacity:.045}
/* 捲得快：頂欄與年份帶淡一點，停下來就回來。只動透明度。 */
.top,.strip{transition:opacity var(--dur-2) var(--ease)}
html.rushing .top,html.rushing .strip{opacity:.45}

/* 卡站在小場景上方。--x --y 是這一幀 3D 錨點投到螢幕的像素（--s 固定 1，留著是批 3 的介面）。卡本身不隨遠近縮放（字要讀得到），只有靠近才浮出來。 */
.cards{position:absolute;inset:0;pointer-events:none;--s:1}
.card{position:absolute;pointer-events:auto;
  left:calc(var(--x) * var(--s) * 1px);top:calc(var(--y) * var(--s) * 1px);
  transform:translate(-50%,-100%) translateY(14px);opacity:0;visibility:hidden;
  display:flex;align-items:center;gap:12px;min-height:60px;width:max-content;max-width:min(340px,82vw);
  padding:10px 16px 10px 12px;border:1px solid rgba(16,42,134,.16);border-radius:14px;
  background:rgba(237,229,216,.97);color:var(--ink);text-align:left;cursor:pointer;
  box-shadow:0 14px 36px rgba(16,42,134,.16),0 2px 6px rgba(16,42,134,.08);
  font:400 15px/1.3 var(--body);
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3),box-shadow var(--dur-2) var(--ease)}
.card.near{opacity:1;visibility:visible;transform:translate(-50%,-100%) translateY(0);transition-delay:0s}
.card:hover{box-shadow:0 20px 48px rgba(16,42,134,.24),0 2px 6px rgba(16,42,134,.1)}
.card-thumb{flex:0 0 auto;width:56px;height:56px;border-radius:10px;object-fit:cover;background:rgba(16,42,134,.08)}
.card-plus{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--bt-orange);color:var(--bt-navy);
  display:grid;place-items:center;font:700 20px/1 var(--display)}
.card-text{display:flex;flex-direction:column;min-width:0;gap:1px}
.card-year{font:700 12px/1 var(--display);letter-spacing:.16em;color:rgba(16,42,134,.78)}
.card-title{font-weight:600;font-size:16px;line-height:1.25}
html[data-lang="zh"] .card-title{font-size:16px}
.card-sub{font-size:12.5px;line-height:1.3;color:rgba(16,42,134,.78);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;max-width:240px}
/* 卡片底下一條小尾巴指到站。 */
.card::after{content:"";position:absolute;left:50%;bottom:-9px;width:14px;height:14px;transform:translateX(-50%) rotate(45deg);
  background:rgba(237,229,216,.97);border-right:1px solid rgba(16,42,134,.16);border-bottom:1px solid rgba(16,42,134,.16)}

/* 最後一站之後那一句：畫面中偏下，飛機與最後一站的卡在它上面。 */
.end{position:absolute;left:50%;top:70%;transform:translate(-50%,-50%) translateY(16px);text-align:center;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease),visibility 0s linear var(--dur-3)}
.end.show{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition-delay:0s}
.end-line{margin:0;font:700 clamp(32px,5vw,56px)/1.1 var(--display);letter-spacing:.02em;color:var(--ink)}
html[data-lang="zh"] .end-line{font-family:var(--han);font-weight:900;letter-spacing:.08em}
.end-sub{margin:8px 0 0;font-size:16px;color:rgba(16,42,134,.8)}

/* 一進來先站著的骨架卡：形狀跟真的卡一樣，呼吸一下。資料到了就拿掉。 */
.skeleton-wrap{position:absolute;inset:0;pointer-events:none}
.skeleton-wrap:empty{display:none}
.card-skeleton{position:absolute;left:62%;top:50%;transform:translate(-50%,-100%);display:flex;align-items:center;gap:12px;min-height:60px;width:min(300px,78vw);
  padding:10px 16px 10px 12px;border:1px solid rgba(16,42,134,.12);border-radius:14px;background:rgba(237,229,216,.9);box-shadow:0 14px 36px rgba(16,42,134,.1)}
.sk-plus{width:30px;height:30px;border-radius:50%;background:rgba(255,196,108,.6);flex:0 0 auto}
.sk-text{display:flex;flex-direction:column;gap:7px;flex:1 1 auto}
.sk-line{display:block;height:10px;border-radius:5px;background:rgba(16,42,134,.1);animation:sk-breathe 1.3s var(--ease) infinite}
.sk-year{width:44px}.sk-title{width:78%}
@keyframes sk-breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* 第一次進來的提示。捲一點就消失。 */
.hint{position:absolute;left:50%;bottom:calc(var(--strip-h) + 18px);transform:translateX(-50%);margin:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;font:700 12px/1 var(--display);letter-spacing:.16em;text-transform:uppercase;
  color:rgba(16,42,134,.8);transition:opacity var(--dur-3) var(--ease)}
.hint-arrow{width:1px;height:28px;background:var(--bt-navy);position:relative;animation:hint-bob 1.6s var(--ease) infinite}
.hint-arrow::after{content:"";position:absolute;left:-4px;bottom:0;width:9px;height:9px;border-right:1px solid var(--bt-navy);border-bottom:1px solid var(--bt-navy);transform:rotate(45deg)}
.hint.gone{opacity:0;visibility:hidden}
@keyframes hint-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ── 底部年份帶：大年份、小標籤、橘線，一顆點隨捲動滑。 ── */
.strip{position:fixed;left:0;right:0;bottom:0;z-index:55;height:var(--strip-h);display:flex;align-items:center;gap:10px;
  padding:0 var(--gut);background:linear-gradient(180deg,rgba(237,229,216,.6),rgba(237,229,216,.96));
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid rgba(16,42,134,.1)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.strip{background:var(--bt-cream)}}
.strip-stops{position:relative;display:flex;align-items:stretch;gap:4px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;padding:6px 0 4px}
.strip-stops::-webkit-scrollbar{display:none}
.strip-stops::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:rgba(16,42,134,.14)}
.strip-dot{position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--bt-orange);border:2px solid var(--bt-cream);box-shadow:0 0 0 1px rgba(16,42,134,.25);
  transform:translate(-50%,0);transition:left var(--dur-1) linear;pointer-events:none;z-index:1}
.strip-stop{flex:0 0 auto;min-height:44px;min-width:72px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;
  padding:6px 12px 4px;border:0;border-radius:8px 8px 0 0;background:none;color:var(--ink);cursor:pointer;text-align:left;scroll-snap-align:center;
  border-bottom:2px solid transparent;transition:background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.strip-stop:hover{background:rgba(255,196,108,.26)}
.strip-stop.on{border-bottom-color:var(--bt-orange)}
.strip-year{font:700 22px/1 var(--display);letter-spacing:.01em;color:rgba(16,42,134,.72)}
.strip-stop.on .strip-year{color:var(--ink)}
.strip-title{font:600 10.5px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:rgba(16,42,134,.74);white-space:nowrap}
html[data-lang="zh"] .strip-title{letter-spacing:.08em;font-size:11.5px}
.strip-stop.on .strip-title{color:var(--ink)}
.strip-progress{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--display);letter-spacing:.14em;background:var(--bt-navy);color:var(--bt-cream);border-radius:999px;padding:9px 13px;white-space:nowrap}
.strip-progress::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--bt-orange)}

/* ── 覆蓋層：正中間一張大卡，後面的場景模糊、留一點看得到（Paul 2026-11-07，照參考站） ── */
.panel{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:24px;overflow-y:auto;
  background:rgba(16,42,134,.34);backdrop-filter:blur(10px) saturate(90%);-webkit-backdrop-filter:blur(10px) saturate(90%);
  opacity:0;transition:opacity var(--dur-3) var(--ease)}
.panel.in{opacity:1}
.panel[hidden]{display:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{background:rgba(16,42,134,.6)}}
.panel-card{position:relative;width:min(860px,100%);max-height:calc(100vh - 48px);overflow-y:auto;border-radius:22px;color:var(--ink);
  background:rgba(237,229,216,.9);box-shadow:0 30px 80px rgba(16,42,134,.35),0 0 0 1px rgba(255,255,255,.5) inset;
  transform:translateY(16px) scale(.97);transition:transform var(--dur-3) var(--ease)}
.panel.in .panel-card{transform:none}
html.panel-open .stage,html.panel-open .static{filter:saturate(.7) brightness(.85);transition:filter var(--dur-3) var(--ease)}
html.panel-open .strip,html.panel-open .top{visibility:hidden}
.panel-head{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:16px 16px 0;pointer-events:none}
.back{pointer-events:auto;width:44px;height:44px;border:1px solid rgba(16,42,134,.24);border-radius:50%;background:var(--bt-cream);color:var(--ink);cursor:pointer;
  font:400 26px/1 var(--display);display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
.back:hover{background:var(--bt-navy);color:var(--bt-cream)}
.panel-body{padding:0 clamp(24px,6vw,64px) 48px;margin-top:-8px}
.panel-date{margin:0 0 6px;font:700 15px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(16,42,134,.8)}
.panel-title{margin:0 0 14px;font:700 clamp(28px,4.4vw,40px)/1.12 var(--display);letter-spacing:.01em}
html[data-lang="zh"] .panel-title{font-family:var(--han);font-weight:900;letter-spacing:.03em;font-size:clamp(26px,4vw,34px)}
.panel-summary{margin:0 0 18px;font-size:18px;line-height:1.6;font-weight:500}
.panel-text p{margin:0 0 1em}
.panel-photos-h{margin:28px 0 10px;font:700 13px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(16,42,134,.8)}
.no-photos{margin:0;color:rgba(16,42,134,.8);font-size:15px}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.shot{margin:0}
.shot-btn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:rgba(16,42,134,.06)}
.shot-btn img{display:block;width:100%;height:100%;object-fit:cover}
.shot figcaption{margin-top:6px;font-size:13.5px;line-height:1.4;color:rgba(16,42,134,.82)}

/* ── 燈箱（桌機） ── */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(16,42,134,.92);display:grid;place-items:center;padding:24px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-width:min(1200px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox img{max-width:100%;max-height:calc(100vh - 110px);display:block;border-radius:6px}
.lightbox figcaption{color:var(--bt-cream);font-size:15px;text-align:center}
.lb-close{position:absolute;top:16px;right:16px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(237,229,216,.5);background:none;color:var(--bt-cream);
  font:400 28px/1 var(--display);cursor:pointer;transition:background var(--dur-2) var(--ease)}
.lb-close:hover{background:rgba(237,229,216,.18)}

/* ── 載入中、錯誤、空 ── */
.state-wrap:empty{display:none}
.state{margin:0;padding:calc(90px + 10vh) var(--gut) 40px;text-align:center;font-size:16px;color:var(--ink);display:flex;justify-content:center;align-items:center;gap:10px}
.state.err{font-weight:500}
.state .dot{width:10px;height:10px;border-radius:50%;background:var(--bt-orange);animation:pulse 1.2s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* ── 減少動態效果、?motion=off、沒有 WebGL、Three 或 gsap 沒載到：直立時間軸 ── */
.static{padding:96px 0 calc(var(--strip-h) + 20px)}
.timeline{list-style:none;margin:0;padding:28px var(--gut) 20px;max-width:720px;position:relative}
.timeline::before{content:"";position:absolute;left:calc(var(--gut) + 15px);top:0;bottom:0;width:2px;background:rgba(16,42,134,.22)}
.tl-item{position:relative;padding:0 0 18px 48px}
.tl-item::before{content:"";position:absolute;left:9px;top:22px;width:14px;height:14px;border-radius:50%;background:var(--bt-orange);box-shadow:0 0 0 4px var(--paper)}
.timeline .card{position:static;opacity:1;visibility:visible;transform:none;width:100%;max-width:none;transition:box-shadow var(--dur-2) var(--ease)}
.timeline .card::after{display:none}

/* ── 手機 ── */
@media (max-width:760px){
  :root{--strip-h:60px}
  .top{gap:10px;padding:10px var(--gut)}
  .home img{height:26px}
  .title .sub{display:none}
  .title h1{font-size:18px}
  .play{padding:9px 11px;font-size:12px}
  .card{max-width:min(280px,84vw);padding:9px 12px 9px 10px;gap:10px}
  .card-title{font-size:15px}
  .card-sub{display:none}
  .card-thumb{width:44px;height:44px}
  .ghost{top:60px;font-size:30vw}
  .strip-year{font-size:19px}
  .strip-stop{min-width:64px;padding:6px 10px 4px}
  .strip-progress{font-size:12px;padding:8px 10px}
  /* 手機上照片橫著滑，一張一屏，用手指掃。 */
  .gallery{display:flex;overflow-x:auto;gap:10px;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -24px;padding:0 24px}
  .panel-card{border-radius:18px}
  .gallery::-webkit-scrollbar{display:none}
  .shot{flex:0 0 86%;scroll-snap-align:center}
  .shot-btn{cursor:default}
}

/* ═════════ 點下去要有回饋（2026-09-08）═════════ */
/* 跟每一頁同一段：按下去立刻縮，不加 transition。 */
button{cursor:pointer}
button[disabled]{cursor:default}
button:not([disabled]):active{transform:scale(.97)}
.card:not([disabled]):active{transform:translate(-50%,-100%) scale(.97)}
.timeline .card:not([disabled]):active{transform:scale(.97)}
.play:active,.lang:active,.back:active,.strip-stop:active{background:rgba(255,196,108,.38)}

/* ═════════ 減少動態效果 ═════════ */
/* 釘住與視差在 main.js 就不會開（走直立時間軸）。這裡把剩下的 CSS 動畫與位置過渡一起關掉。 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .card{transform:translate(-50%,-100%)}
  .world{will-change:auto}
}