/* 全鑫分會管理系統 動態層（第二版，2026-10-06）：所有頁面在 site.css（或自己的樣式）之後載入。
   滿版影片首頁、呼吸感動態、平滑捲動、統一內頁版型 ───────── */
:root{--ease:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);--top-h:64px;
  --g-green:#1f7a4a;--g-yellow:#d99a00;--g-red:#cf2030;--g-gray:#8a8a87}
/* Lenis 平滑捲動（assets/vendor/lenis.min.js，MIT） */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
/* 使用者輸入的長網址、長 Email 要能斷行，否則手機上會把版面撐寬、頁首被擠出畫面 */
[style*="pre-wrap"],.review-a{overflow-wrap:anywhere}

/* 頁首：有滿版標頭的頁面（body.overlay-top）浮在畫面上；往下捲變成霧面底、往下滑隱藏、往上滑出現 */
.overlay-top .top{position:fixed;left:0;right:0;top:0}
.top{z-index:30;transition:transform .7s var(--ease),background-color .5s,box-shadow .5s,backdrop-filter .5s}
.overlay-top .top .wrap{max-width:none;min-height:var(--top-h)}
.overlay-top .top.solid{background:rgba(219,219,218,.78);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);box-shadow:0 1px 0 rgba(32,32,32,.12)}
.top.hide{transform:translateY(-102%)}
/* 用鍵盤移到頁首的連結時，下滑隱藏的頁首要出現（焦點不能藏在畫面外） */
.top.hide:focus-within{transform:none}
/* 手機上頁首一律不收（2026-10-24 使用者選）：motion.js 在觸控裝置不加 .hide，這裡再保險一次 */
@media(pointer:coarse){.top.hide{transform:none}}
.brand{text-decoration:none}
.top .clock{margin-left:auto}

/* 呼吸：紅色方塊、主按鈕方塊、捲動提示 */
@keyframes breathe{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.62);opacity:.55}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.motion .sq,.motion .btn.primary::after{animation:breathe 3.6s var(--ease-io) infinite}

/* 滿版首頁（影片背景） */
.hero-full{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
  padding:calc(var(--top-h) + 24px + env(safe-area-inset-top,0px)) var(--gutter) calc(26px + env(safe-area-inset-bottom,0px))}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--base)}
/* 影片與首格已把原本的疊色（#dbdbda 底上 multiply、不透明度 0.92）燒進畫面，不用即時混色：手機捲動、播放比較省力 */
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* 首頁：影片開始播放（motion.js 加 .playing）才顯示影片、藏起靜態首格（藏起後不再繪製） */
.hero-media video{opacity:0;transition:opacity .45s var(--ease)}
.hero-media img{transition:opacity .45s var(--ease),visibility 0s}
.hero-media.playing video{opacity:1}
.hero-media.playing img{opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
/* 背景影片不加縮放動畫：持續縮放會讓細粒子影片在電腦大螢幕上看起來晃動（2026-10-07 使用者回報） */
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(219,219,218,.55) 0%,rgba(219,219,218,0) 22%,rgba(219,219,218,0) 48%,rgba(219,219,218,.72) 82%,var(--base) 100%)}
.hero-body{position:relative;will-change:transform,opacity}
.fit{font-family:var(--display);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.84;letter-spacing:-.025em;margin:0;white-space:nowrap;
  font-size:calc((100vw - 2 * var(--gutter)) / 5.9)}
.fit .ln{display:block;overflow:hidden;padding-bottom:.03em;margin-bottom:-.03em}
.fit .lt{display:inline-block}
.fit .ch{display:inline-block;will-change:transform}
.motion .fit .ch{transform:translate3d(0,108%,0);transition:transform 1.25s var(--ease);transition-delay:calc(var(--i,0) * 38ms + .1s)}
.motion .fit.in .ch{transform:none}
.hero-foot{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:18px 32px;align-items:end;margin-top:clamp(18px,3vw,34px)}
.hero-foot p{margin:0;max-width:460px}
.hero-foot .meta{text-align:right}
.hero-cta{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.zh-sub{font-family:var(--zh);font-weight:900;font-size:clamp(28px,5.4vw,72px);line-height:1.02;margin:clamp(14px,2vw,22px) 0 0;letter-spacing:.01em}
/* 首頁大標正下方左側的小副標（2026-10-09 使用者：「不動產兩岸貿易金融生態圈」放在 GOLD CHAPTER 下面左手邊，字比「全鑫分會管理系統」小） */
.zh-tag{font-family:var(--zh);font-weight:700;font-size:clamp(15px,2vw,28px);line-height:1.2;margin:clamp(8px,1.2vw,14px) 0 0;letter-spacing:.06em}
.cue{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);text-decoration:none}
.cue i{display:block;width:1px;height:38px;background:var(--ink)}
.motion .cue i{animation:cue 2.6s var(--ease-io) infinite}

/* 內頁標頭（靜態影格當背景、同樣呼吸放大） */
.hero-page{position:relative;min-height:clamp(360px,62svh,620px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate;
  padding:calc(var(--top-h) + 28px + env(safe-area-inset-top,0px)) var(--gutter) 22px;margin-bottom:8px}
.hero-page .fit{font-size:calc((100vw - 2 * var(--gutter)) / 7.2)}
.hero-page .kicker{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hero-page .hero-foot{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}

/* 捲動進場：淡入上移、細線由左畫出、依序出現 */
.motion [data-rv]{opacity:0;transform:translate3d(0,34px,0);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease);transition-delay:var(--d,0s)}
.motion [data-rv].in{opacity:1;transform:none}
.item,.panel{border-top:0!important;position:relative}
.item::before,.panel::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left}
.motion .item::before,.motion .panel::before{transform:scaleX(0);transition:transform 1.5s var(--ease);transition-delay:var(--d,0s)}
.motion .item.in::before,.motion .panel.in::before{transform:scaleX(1)}
.list{border-bottom:0}
/* 清單標題排法一致：中文標題（＋待上線標記）一行、英文小字一行，不因字數長短換行位置不同 */
.item h2,.item h3{gap:4px 10px}
.item h2 small,.item h3 small{order:3;flex-basis:100%}

/* 按鈕：黑色底色由下往上填滿；主按鈕平常紅底白字（呼吸的白方塊）。
   site.css 與委員會頁的 :hover 用 background 簡寫，會清掉底圖、尺寸與位置（曾造成滑過時字和底色同色、看不到），
   所以每個狀態的底圖都在這裡寫齊。 */
.btn,.btn:hover,.btn.primary,.btn.primary:hover{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 100%;background-size:100% 0}
.btn{transition:background-size .55s var(--ease),color .35s var(--ease),border-color .35s}
.btn.primary,.btn.primary:hover{background-color:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.primary::after,.btn.primary:hover::after{background:var(--on-red)}
/* 滑過才填色：只給有滑鼠的裝置（2026-10-24：手機點過按鈕會一直停在 :hover 的黑底） */
@media(hover:hover){
.btn:hover,.btn.primary:hover{background-size:100% 100%}
.btn:hover{background-color:transparent;color:var(--base)}
.btn.primary:hover{border-color:var(--ink)}
.btn.primary:disabled:hover{background-color:var(--red);border-color:var(--red);color:var(--on-red)}
}
.btn.lg{padding:14px 20px;font-size:13px}
.card{transition:background .5s var(--ease),color .5s var(--ease)}

/* 頁尾：階梯從平地長出來、字標滑入 */
.foot .steps-edge{transition:clip-path 1.6s var(--ease)}
.motion .foot:not(.in) .steps-edge{clip-path:polygon(0 100%,6% 100%,6% 100%,18% 100%,18% 100%,24% 100%,24% 100%,30% 100%,30% 100%,36% 100%,36% 100%,48% 100%,48% 100%,54% 100%,54% 100%,66% 100%,66% 100%,72% 100%,72% 100%,78% 100%,78% 100%,84% 100%,84% 100%,90% 100%,90% 100%,100% 100%,100% 100%,0 100%)}
.wordmark span{display:inline-block;transition:transform 1.4s var(--ease) .25s}
.motion .foot:not(.in) .wordmark span{transform:translate3d(0,105%,0)}

/* 換頁：淡出淡入 */
/* 只動透明度、播完就不再作用：body 有 transform 動畫時，裡面的 position:fixed（明細抽屜、對話框）會跑位 */
@keyframes page-in{from{opacity:0}to{opacity:1}}
.motion body{animation:page-in .8s var(--ease-io) backwards}
/* 2026-10-24：不再淡到全透明（慢網路時一片空白像當掉）：蓋一層六成的底色（內容約剩 0.4），換頁中也不會誤點；
   0.6 秒還沒換頁，motion.js 在畫面中央加「載入中」（#page-wait，套 site.css 的 .loading），浮在這一層上面 */
@keyframes leave-dim{from{opacity:0}to{opacity:.6}}
html.leaving body::after{content:"";position:fixed;inset:0;z-index:390;background:var(--base);opacity:.6;animation:leave-dim .15s var(--ease-io)}
.page-wait{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:400;margin:0;padding:14px 20px!important;background:var(--base);color:var(--ink);border:1px solid var(--ink);white-space:nowrap;pointer-events:none}

/* 首頁功能清單：滑過時整列輕微推移 */
.item > div:nth-child(2){transition:transform .6s var(--ease)}
@media(hover:hover){.item:hover > div:nth-child(2){transform:translateX(8px)}}
.overlay-top main.wrap{padding-top:clamp(18px,3vw,40px)}
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 14px}

/* 數字 */
.num{font-family:var(--display);font-weight:900;font-stretch:125%;line-height:.9;letter-spacing:-.02em}

/* 底部抽屜（手機明細） */
.sheet{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;justify-content:center;background:rgba(5,5,5,0);transition:background .45s var(--ease)}
.sheet.open{background:rgba(5,5,5,.5)}
.sheet > .sheet-body{background:var(--base);width:100%;max-width:760px;max-height:92svh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px var(--gutter) calc(24px + env(safe-area-inset-bottom,0px));
  transform:translate3d(0,100%,0);transition:transform .6s var(--ease);border-top:1px solid var(--ink);position:relative}
.sheet.open > .sheet-body{transform:none}
.sheet .grab{width:44px;height:4px;background:var(--ink);opacity:.35;margin:0 auto 14px}
@media(min-width:761px){.sheet{align-items:center}.sheet > .sheet-body{max-height:86vh;border:1px solid var(--ink);transform:translate3d(0,40px,0) scale(.98);opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease)}.sheet.open > .sheet-body{transform:none;opacity:1}.sheet .grab{display:none}}

@media(max-width:760px){
  :root{--top-h:56px}
  .hero-foot{grid-template-columns:1fr}
  .hero-foot .meta{text-align:left}
  .hero-cta{justify-content:flex-start}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .fit{font-size:calc((100vw - 2 * var(--gutter)) / 5.6)}
  .hero-page{min-height:clamp(300px,52svh,460px)}
  .hero-page .hero-foot{grid-template-columns:1fr}
  .cue{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-media video{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}