/* ============================================
   首頁招牌動作 (fx.css) — E 奶油晴空
   ① Logo 展開＋照片窗框（C）  ② 手機底部按鈕列（C）
   ③ 流程線捲動填滿（B）        ④ 數字儀表（B）
   ⑤ 橫幅氣流粒子（B）          ⑥ 標語逐字亮起（A）
   ⑦ 案例橫向長廊（A）
   ============================================ */

/* ---------- 選單 logo 圖 ---------- */
.nav-logo{flex-direction:row!important;align-items:center;gap:10px!important;}
.nav-logo-img{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:0 0 0 1px rgba(0,0,0,.06);}
.nav-logo-txt{display:flex;flex-direction:column;gap:1px;}
#nav.shrink .nav-logo-img{width:30px;height:30px;}
.nav-logo-img{transition:width .3s,height .3s;}

/* ---------- ① 照片窗框：進場停在圓角窗，往下捲展開成滿版 ---------- */
:root{--hx:1;}
.hero-slides{
  --wt:calc(var(--nav-h) + 14px);--ws:20px;--wb:20px;--wr:28px;
  clip-path:inset(calc(var(--wt) * (1 - var(--hx))) calc(var(--ws) * (1 - var(--hx))) calc(var(--wb) * (1 - var(--hx))) calc(var(--ws) * (1 - var(--hx))) round calc(var(--wr) * (1 - var(--hx))));
}
@media(max-width:768px){
  .hero-slides{--wt:8px;--ws:12px;--wb:0px;--wr:22px;}
}
.ix-bg{position:absolute;inset:0;background:linear-gradient(140deg,#78AADC 0%,#609BD6 55%,#5690CF 100%);opacity:0;pointer-events:none;z-index:0;}
.hero-slide{z-index:1;}

/* 進場圖層 */
.ix{position:fixed;inset:0;z-index:300;pointer-events:none;}
.ix-mk{position:absolute;left:0;top:0;will-change:transform;transform-origin:0 0;}
.ix-mbg{position:absolute;inset:0;background:linear-gradient(140deg,#78AADC,#5690CF);}
.ix-sh{position:absolute;inset:0;box-shadow:0 18px 40px -18px rgba(44,106,168,.6);}
.ix-mk svg{position:absolute;inset:0;width:100%;height:100%;display:block;}
html.ixh body{opacity:0;}
html.ix-run .hero-slide img{transition:none!important;}
html.ix-run .hero-slide{transition:none!important;}

/* ---------- ② 手機底部按鈕列 ---------- */
.fx-dock{display:none;}
@media(max-width:768px){
  .fx-dock{
    display:grid;grid-template-columns:1fr 1.7fr 1fr;gap:8px;align-items:center;
    position:fixed;left:0;right:0;bottom:0;z-index:98;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
    box-shadow:0 -1px 0 var(--line-2,#DCD5BA),0 -10px 24px -16px rgba(29,42,54,.25);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
  }
  .fx-dock a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;border-radius:14px;font-size:13px;font-weight:500;color:var(--ink,#1D2A36);letter-spacing:.02em;}
  .fx-dock a svg{width:19px;height:19px;flex:none;}
  .fx-dock .d-line{background:#04873A;color:#fff;font-size:14.5px;font-weight:600;border-radius:50px;box-shadow:0 6px 14px -8px rgba(4,135,58,.8);}
  .fx-dock .d-sub{flex-direction:column;gap:3px;font-size:11.5px;color:#45525E;}
  .fx-dock .d-sub svg{color:var(--sky,#2C6AA8);}
  .fx-dock a:active{transform:scale(.97);}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px));}
  .float-btns{display:none!important;}
  /* 公告卡改放在按鈕列上方、橫跨全寬 */
  .notice-float{left:12px!important;right:12px!important;max-width:none!important;bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;}
}

/* ---------- ③ 流程線捲動填滿 ---------- */
#workflow{--wf:0;}
@media(min-width:1025px){
  .workflow-steps::after{transition:none!important;width:calc(80% * var(--wf))!important;background:var(--sky,#2C6AA8)!important;box-shadow:none!important;}
  .workflow-flow-dot{animation:none!important;opacity:calc(min(1, var(--wf) * 20) * (1 - max(0, var(--wf) * 20 - 19)))!important;left:calc(10% + 80% * var(--wf))!important;background:var(--sky,#2C6AA8)!important;box-shadow:0 0 0 6px rgba(44,106,168,.18),0 0 14px rgba(44,106,168,.45)!important;}
}
.workflow-step .step-circle{transition:opacity .55s,transform .6s cubic-bezier(.2,.7,.2,1.5),border-color .35s,background .35s,box-shadow .35s!important;}
.workflow-step.on .step-circle{border-color:var(--sky,#2C6AA8);background:var(--sky,#2C6AA8);box-shadow:0 8px 18px -10px rgba(44,106,168,.8);}
.workflow-step.on .step-num{color:#fff;}
/* 手機：改成直向時間軸，左邊一條線跟著捲動填滿 */
@media(max-width:768px){
  .workflow-steps{display:flex!important;flex-direction:column;gap:0;padding-left:0;}
  .workflow-steps::before{display:block!important;left:27px!important;right:auto!important;top:28px!important;bottom:28px;width:2px!important;height:auto!important;background:var(--line-2,#DCD5BA)!important;}
  .workflow-steps::after{display:block!important;content:'';position:absolute;left:27px!important;top:28px!important;width:2px!important;height:calc((100% - 56px) * var(--wf))!important;background:var(--sky,#2C6AA8)!important;box-shadow:none!important;transition:none!important;z-index:1;}
  .workflow-step{display:grid!important;grid-template-columns:56px 1fr;column-gap:16px;align-items:start;text-align:left!important;padding:0 0 26px!important;}
  .workflow-step:last-child{padding-bottom:0!important;}
  .workflow-step .step-circle{width:56px;height:56px;margin:0!important;grid-row:span 2;position:relative;z-index:2;}
  .workflow-step .step-num{font-size:19px;}
  .workflow-step .step-title{margin:6px 0 4px!important;font-size:15px;}
  .workflow-step .step-desc{font-size:13px;line-height:1.75;}
}

/* ---------- ④ 數字儀表：冷媒壓力錶式指針 ---------- */
.about-stats.fx-g{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 20px!important;}
.about-stats.fx-g .stat{display:flex;flex-direction:column;align-items:flex-start;border-left:0!important;padding-left:0!important;}
.fx-dial{display:block;width:84px;height:auto;margin:0 0 10px -2px;overflow:visible;}
.fx-dial .arc-bg{fill:none;stroke:var(--line-2,#DCD5BA);stroke-width:3;stroke-linecap:round;}
.fx-dial .arc{fill:none;stroke:var(--sky,#2C6AA8);stroke-width:3;stroke-linecap:round;}
.fx-dial .tk{stroke:var(--muted,#5F676C);stroke-width:1.2;stroke-linecap:round;opacity:.45;}
.fx-dial .tk.mj{stroke-width:1.6;opacity:.75;}
.fx-dial .nd{stroke:var(--ink,#1D2A36);stroke-width:2;stroke-linecap:round;}
.fx-dial .hub{fill:var(--ink,#1D2A36);}
.fx-dial .hub2{fill:var(--hi,#F4F0B8);}
.about-stats.fx-g .stat-num{font-size:26px;}
@media(max-width:1180px){.about-stats.fx-g{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:480px){.about-stats.fx-g{gap:22px 14px!important;}.fx-dial{width:76px;}.about-stats.fx-g .stat-num{font-size:24px;}.about-stats.fx-g .stat-label{font-size:12px;}}

/* ---------- ⑤ 橫幅氣流粒子 ---------- */
.fx-air{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;}
.cta-card .cta-inner{z-index:2;}

/* ---------- ⑥ 標語逐字亮起 ---------- */
.fx-manifesto{max-width:980px;margin:-12px 0 48px;font-family:'Noto Serif TC',serif;font-weight:700;font-size:clamp(24px,3.4vw,42px);line-height:1.6;letter-spacing:.02em;color:var(--ink,#1D2A36);text-wrap:balance;}
.fx-manifesto .ch{opacity:.16;transition:opacity .25s linear;}
.fx-manifesto .ch.on{opacity:1;}
.fx-manifesto .ch.hl{background:linear-gradient(transparent 62%,var(--hi,#F4F0B8) 62%);}
@media(max-width:768px){.fx-manifesto{margin:-8px 0 32px;}}

/* ---------- ⑦ 案例橫向長廊 ---------- */
@media(min-width:1025px){
  #cases.fx-h{padding-top:0;padding-bottom:0;}
  #cases.fx-h .fx-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-top:var(--nav-h);}
  #cases.fx-h .cases-grid{display:flex!important;gap:24px;width:max-content;will-change:transform;}
  #cases.fx-h .case-card{width:min(520px,38vw);flex:none;}
  #cases.fx-h .case-img{aspect-ratio:3/2;}
  #cases.fx-h .case-title{font-size:16px;}
  .fx-hbar{display:flex;align-items:center;gap:14px;margin-top:28px;font:italic 700 15px/1 'Playfair Display',serif;color:var(--muted);}
  .fx-hbar i{position:relative;flex:0 0 220px;height:2px;background:var(--line-2,#DCD5BA);border-radius:2px;overflow:hidden;}
  .fx-hbar i b{position:absolute;inset:0;background:var(--sky,#2C6AA8);transform-origin:0 50%;transform:scaleX(var(--cp,0));}
}
@media(max-width:768px){
  #cases .cases-grid{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -24px;padding:2px 24px 8px;scroll-padding-inline:24px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
  #cases .cases-grid::-webkit-scrollbar{display:none;}
  #cases .case-card{flex:0 0 80%;scroll-snap-align:start;}
  .fx-hbar{display:flex;align-items:center;gap:10px;margin-top:14px;font:italic 700 13px/1 'Playfair Display',serif;color:var(--muted);}
  .fx-hbar i{position:relative;flex:0 0 120px;height:2px;background:var(--line-2,#DCD5BA);border-radius:2px;overflow:hidden;}
  .fx-hbar i b{position:absolute;inset:0;background:var(--sky,#2C6AA8);transform-origin:0 50%;transform:scaleX(var(--cp,0));}
}
@media(min-width:769px) and (max-width:1024px){.fx-hbar{display:none;}}

/* ---------- demo 標記 ---------- */
.fx-tag{position:absolute;z-index:40;top:10px;left:10px;display:inline-flex;align-items:center;gap:6px;padding:6px 10px 6px 7px;border-radius:50px;background:var(--hi,#F4F0B8);color:var(--on-hi,#4A4510);font:600 12px/1 'Noto Sans TC',sans-serif;letter-spacing:.04em;box-shadow:0 0 0 1px rgba(74,69,16,.15),0 6px 14px -8px rgba(74,69,16,.5);pointer-events:none;}
.fx-tag b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--on-hi,#4A4510);color:var(--hi,#F4F0B8);font-size:11.5px;}
.fx-host{position:relative;}
.fx-replay{position:fixed;z-index:310;right:12px;top:calc(var(--nav-h) + 10px);display:flex;align-items:center;gap:6px;border:0;border-radius:50px;padding:9px 14px;font:500 12.5px/1 'Noto Sans TC',sans-serif;letter-spacing:.06em;color:var(--ink,#1D2A36);background:rgba(255,255,255,.9);box-shadow:0 0 0 1px rgba(29,42,54,.12),0 6px 16px -8px rgba(29,42,54,.4);cursor:pointer;}
.fx-dock .fx-tag{top:-34px;left:12px;}

@media(prefers-reduced-motion:reduce){
  .fx-manifesto .ch{opacity:1!important;}
}

/* 進場播放時先把公告、demo 標記收起來，播完再淡入 */
.notice-float,.notice-bar{transition:opacity .6s ease .2s;}
html.ix-run .notice-float,html.ix-run .notice-bar,html.ixh .notice-float,html.ixh .notice-bar{opacity:0!important;pointer-events:none;transition:none;}
html.ix-run .fx-tag,html.ix-run .fx-replay{opacity:0;}
.fx-tag,.fx-replay{transition:opacity .4s;}