/* 全鑫分會管理網站 動態層（第二版，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}
body{overflow-x:clip}

/* 頁首：有滿版標頭的頁面（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%)}
.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 breathe-zoom{0%{transform:scale(1.02)}100%{transform:scale(1.1)}}
@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)}
.hero-media video,.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;opacity:.92;will-change:transform}
.motion .hero-media video,.motion .hero-media img{animation:breathe-zoom 18s var(--ease-io) infinite alternate}
.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}
.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}

/* 按鈕：底色由下往上填滿 */
.btn{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 100%;background-size:100% 0;
  transition:background-size .55s var(--ease),color .35s var(--ease),border-color .35s}
.btn:hover{background-color:transparent;background-size:100% 100%;color:var(--base)}
.btn.primary{background-color:var(--ink);background-image:linear-gradient(var(--red),var(--red))}
.btn.primary:hover{background-color:var(--ink);border-color:var(--red);color:var(--on-red)}
.btn.red{background-color:var(--red);background-image:linear-gradient(var(--ink),var(--ink))}
.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}
html.leaving body{opacity:0;transition:opacity .3s var(--ease-io)}

/* 首頁功能清單：滑過時整列輕微推移 */
.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){
  .hero-media video{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
}