/* ============================================================
   fx.css — 特效疊加層樣式（自包含、零外部資源）
   與 fx.js 成對使用；由 fx/inject.py 注入目標頁 </body> 前。
   版本相依的選擇器（hero／大標／金暈／照片格／section）不寫在這裡，
   一律由 fx.js 依「版本適配表」動態產生 <style data-fx-overlay>。
   本檔只放與版本無關的東西：變數、花瓣系統、霧面遮罩、金暈呼吸、評估面板。
   ============================================================ */

/* ===== 變數：深底版（預設） ===== */
:root{
  --fx-ease:cubic-bezier(0.16,1,0.3,1);
  --fx-gold:#C8A962;
  /* 花瓣漸層三段（瓣根深 → 中 → 瓣尖亮） */
  --fxp-c1:#B8934E; --fxp-c2:#C8A962; --fxp-c3:#EFDFB8; --fxp-c4:#F6EBCC;
  --fxp-core:#F3E6C4;      /* 花心 */
  --fxp-throat:#8E6E36;    /* 側視花內喉 */
  --fxp-mid:#A8823E;       /* 落瓣中脈 */
  --fxp-spec:#FFFFFF;      /* 水晶球高光 */
  /* 烘焙光暈（花）：三段 stop-opacity */
  --fxp-ga0:0.40; --fxp-ga1:0.20; --fxp-ga2:0.06;
  /* 烘焙光暈（水晶球） */
  --fxp-oga0:0.55; --fxp-oga1:0.26; --fxp-oga2:0.09;
  /* 球體玻璃 */
  --fxp-gl0:0.16; --fxp-gl1:0.07; --fxp-gl2:0.14;
  --fxp-rima:0.38;   /* 球緣描邊 */
  --fxp-refa:0.30;   /* 球底反光 */
  --fxp-speca:0.62;  /* 球面高光 */
}

/* ===== 變數：白底版覆寫 =====
   白底頁（v2）用亮金會整片糊掉，故漸層改深金 #B8934E → #8E6F35，
   並全面壓低光暈／高光的不透明度，避免在淺色紙感底上糊成一團霧。 */
body.fx-lightbg{
  --fxp-c1:#8E6F35; --fxp-c2:#A38142; --fxp-c3:#B8934E; --fxp-c4:#B8934E;
  --fxp-core:#8E6F35;
  --fxp-throat:#6B5327;
  --fxp-mid:#7A5F2E;
  --fxp-spec:#FFFFFF;
  --fxp-ga0:0.16; --fxp-ga1:0.08; --fxp-ga2:0.03;
  --fxp-oga0:0.20; --fxp-oga1:0.10; --fxp-oga2:0.04;
  --fxp-gl0:0.05; --fxp-gl1:0.06; --fxp-gl2:0.12;
  --fxp-rima:0.62;
  --fxp-refa:0.26;
  --fxp-speca:0.24;
}

/* ===== SVG 符號庫著色：全部改吃變數，才能一鍵切深／淺底 ===== */
.fx-svgdefs{position:absolute;width:0;height:0;overflow:hidden;}
.fx-svgdefs symbol{overflow:visible;}
.fxs-c1{stop-color:var(--fxp-c1);}
.fxs-c2{stop-color:var(--fxp-c2);}
.fxs-c3{stop-color:var(--fxp-c3);}
.fxs-g0{stop-color:var(--fxp-c3);stop-opacity:var(--fxp-ga0);}
.fxs-g1{stop-color:var(--fxp-c2);stop-opacity:var(--fxp-ga1);}
.fxs-g2{stop-color:var(--fxp-c2);stop-opacity:var(--fxp-ga2);}
.fxs-g3{stop-color:var(--fxp-c2);stop-opacity:0;}
.fxs-o0{stop-color:var(--fxp-c4);stop-opacity:var(--fxp-oga0);}
.fxs-o1{stop-color:var(--fxp-c3);stop-opacity:var(--fxp-oga1);}
.fxs-o2{stop-color:var(--fxp-c2);stop-opacity:var(--fxp-oga2);}
.fxs-l0{stop-color:var(--fxp-spec);stop-opacity:var(--fxp-gl0);}
.fxs-l1{stop-color:var(--fxp-c3);stop-opacity:var(--fxp-gl1);}
.fxs-l2{stop-color:var(--fxp-c2);stop-opacity:var(--fxp-gl2);}
.fxk-c3{stroke:var(--fxp-c3);}
.fxf-c3{fill:var(--fxp-c3);}
.fxf-core{fill:var(--fxp-core);}
.fxf-throat{fill:var(--fxp-throat);}
.fxk-mid{stroke:var(--fxp-mid);}
.fxk-spec{stroke:var(--fxp-spec);opacity:var(--fxp-speca);}
.fxk-rim{stroke:var(--fxp-c3);opacity:var(--fxp-rima);}
.fxk-ref{stroke:var(--fxp-c3);opacity:var(--fxp-refa);}

/* ===== 落花雨：三層分工 =====
   外層 .fx-petal＝落下（translateY）＋閃爍（opacity）
   中層 .fx-petal-s＝左右擺（translateX）；內層 .fx-petal-i＝自轉（rotate）
   三個 transform 動畫不能掛同一元素（會互相覆蓋），故分三層。
   效能紅線：光暈已烘焙進 symbol，全系統零 filter，只動 transform／opacity。 */
.fx-petal{position:absolute;top:0;z-index:1;--szx:1.1;
  width:calc(var(--sz) * var(--szx,1));height:calc(var(--sz) * var(--szx,1));
  opacity:0;pointer-events:none;will-change:transform,opacity;}
.fx-petal-s{display:block;width:100%;height:100%;will-change:transform;}
.fx-petal-i{display:block;width:100%;height:100%;overflow:visible;will-change:transform;}
/* 尺寸隨視窗放大：手機基準 --sz 7〜15px ×1.1（手機視距近，加大 10% 才看得清），
   平板 ×1.6、桌機 ×2.2（兩者維持原倍率不變） */
@media(min-width:768px){ .fx-petal{--szx:1.6;} }
@media(min-width:1100px){ .fx-petal{--szx:2.2;} }
/* 兩樣式二選一：飄花／水晶球（同一套落下系統，只換 symbol） */
body.fx-petal-orb .fx-u-bloom{display:none;}
body.fx-petal-bloom .fx-u-orb{display:none;}
body.fx-motes .fx-petal{animation:fxFall var(--dur) linear var(--delay) infinite,
  fxTwinkle var(--tdur) ease-in-out var(--tdelay) infinite;}
body.fx-motes .fx-petal-s{animation:fxSway var(--sdur) ease-in-out var(--delay) infinite;}
body.fx-motes .fx-petal-i{animation:fxSpin var(--rdur) linear var(--delay) infinite;}
body:not(.fx-motes) .fx-petal{display:none;}
@keyframes fxFall{
  from{transform:translate3d(0,-16vh,0)}
  to{transform:translate3d(0,116vh,0)}
}
@keyframes fxSway{
  0%,100%{transform:translate3d(calc(-1 * var(--sx)),0,0)}
  50%{transform:translate3d(var(--sx),0,0)}
}
@keyframes fxSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(var(--spin))}
}
@keyframes fxTwinkle{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ===== 金暈呼吸（掛載選擇器由 fx.js 依版本產生） ===== */
@keyframes fxBreathe{0%,100%{opacity:.62}50%{opacity:1}}

/* ===== 主標聚光（只用於深色版 v3／v4；淺色版 v2 不適用） =====
   .fx-h1-shine 是 hero 主標的「亮版」副本：由 fx.js 以 innerHTML 原樣複製主標內容
   （原節點零修改，副本一律建成 <p> 以免多出第二個 h1，並掛 aria-hidden），
   絕對定位精準疊在原主標之上，再用 radial-gradient mask 只露出一顆光斑。
   光斑位置由註冊變數 --fx-spot-x/--fx-spot-y 驅動 mask-position，
   預設在版面外（整層看不見）；變數名加 fx- 前綴，避免與目標頁既有變數撞名。
   副本同時帶著原主標的 class，故字型／字級／字距／換行與原標題完全一致，
   面板切換大標字型時亮層自動跟著換。
   效能紅線：每幀只改兩個長度變數（mask-position），零 filter、零外部資源。 */
@property --fx-spot-x{syntax:"<length>";inherits:true;initial-value:-4000px;}
@property --fx-spot-y{syntax:"<length>";inherits:true;initial-value:-4000px;}
.fx-h1-shine{position:absolute !important;margin:0 !important;z-index:3;
  pointer-events:none;user-select:none;-webkit-user-select:none;
  opacity:0;transition:opacity .8s var(--fx-ease);--fx-spot-r:8rem;
  -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 58%,rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.92) 26%,rgba(0,0,0,.48) 58%,rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:calc(var(--fx-spot-r) * 2) calc(var(--fx-spot-r) * 2);
          mask-size:calc(var(--fx-spot-r) * 2) calc(var(--fx-spot-r) * 2);
  -webkit-mask-position:calc(var(--fx-spot-x) - var(--fx-spot-r)) calc(var(--fx-spot-y) - var(--fx-spot-r));
          mask-position:calc(var(--fx-spot-x) - var(--fx-spot-r)) calc(var(--fx-spot-y) - var(--fx-spot-r));}
@media(min-width:768px){ .fx-h1-shine{--fx-spot-r:10rem;} }
/* 亮版字面：鎏金亮漸層＋柔金光暈（text-shadow 不受 background-clip 裁切，故能透出暈圈）。
   子元素（如 <em> 副標行）各自持有漸層背景，否則 inline-block／block 子層會不可見。 */
.fx-h1-shine,.fx-h1-shine *{
  background:linear-gradient(180deg,#F6E9C6 0%,#E8D5A8 82%);
  -webkit-background-clip:text;background-clip:text;color:#F6E9C6;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(246,233,198,.45),0 0 34px rgba(200,169,98,.30);}
body.fx-spot .fx-h1-shine.fx-lit{opacity:1;}
/* 特效開關關閉：亮層完全不亮（JS 端亦停掃光，此處為雙保險） */
body:not(.fx-spot) .fx-h1-shine{opacity:0 !important;}

/* ===== 觸按光暈（只用於深色版 v3／v4；淺色版 v2 不適用） =====
   粗指標裝置上，手指按到頁面任何一處就在觸點生成一團柔金光暈，隨即擴散淡出後自動移除。
   效能紅線：只動 transform／opacity 兩個合成屬性，零 filter；pointer-events:none
   且事件全程 passive、不 preventDefault，故不影響捲動與點擊。
   z-index 低於評估面板（2147483000），故不會蓋住面板操作。
   注意：光暈元素的 class 是 .fx-tap-orb，與 body 的狀態 class .fx-tapglow 刻意不同名——
   同名會讓 body 自己吃到這條 position:fixed／9rem 的規則，整頁版面當場崩掉。 */
.fx-tap-orb{position:fixed;left:0;top:0;width:9rem;height:9rem;margin:-4.5rem 0 0 -4.5rem;
  border-radius:50%;pointer-events:none;z-index:2147482000;opacity:0;
  background:radial-gradient(closest-side,rgba(246,233,198,.55),rgba(200,169,98,.28) 42%,rgba(200,169,98,0) 72%);
  will-change:transform,opacity;}

/* ===== 影像霧面：遮罩層（掛載選擇器由 fx.js 依版本產生） ===== */
.fx-veil{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:rgba(138,134,126,.26);transition:opacity .8s var(--fx-ease);}
body.fx-lightbg .fx-veil{background:rgba(120,116,106,.30);}

/* ===== 評估面板（永遠用系統字型，不吃質感字型） ===== */
/* 高度封頂：選項變多時整塊不得超出視窗（扣掉 bottom .7rem 與頂端等距留白＝1.4rem），
   面板本身是 flex column：收合鈕固定不捲，只有 .fx-panel-body 捲動，
   故收合鈕永遠留在畫面內可點。dvh 版放在後面覆寫，手機網址列伸縮時才不會誤差。 */
.fx-panel{position:fixed;right:.7rem;bottom:.7rem;z-index:2147483000;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC",sans-serif;
  font-size:12px;line-height:1.6;letter-spacing:0;color:#E4E0D8;
  background:rgba(20,19,18,.94);border:1px solid rgba(200,169,98,.35);border-radius:4px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);max-width:15rem;
  display:flex;flex-direction:column;
  max-height:calc(100vh - 1.4rem);max-height:calc(100dvh - 1.4rem);}
.fx-panel-tg{display:block;width:100%;flex:0 0 auto;background:transparent;border:0;color:#C8A962;
  font:inherit;letter-spacing:.08em;padding:.5rem .8rem;text-align:left;cursor:pointer;}
.fx-panel-tg::after{content:"\25BE";float:right;opacity:.8;}
.fx-panel.fx-closed .fx-panel-tg::after{content:"\25B8";}
.fx-panel.fx-closed .fx-panel-body{display:none;}
/* min-height:0 是關鍵：flex 子項預設 min-height:auto，不寫這行就不會縮、也就捲不動 */
.fx-panel-body{padding:.1rem .8rem .7rem;border-top:1px solid rgba(200,169,98,.2);
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(200,169,98,.45) transparent;}
.fx-panel-body::-webkit-scrollbar{width:6px;}
.fx-panel-body::-webkit-scrollbar-track{background:transparent;}
.fx-panel-body::-webkit-scrollbar-thumb{background:rgba(200,169,98,.45);border-radius:3px;}
.fx-panel .fx-grp{display:block;color:#8A867E;letter-spacing:.1em;margin:.5rem 0 .25rem;
  font-size:11px;}
.fx-panel .fx-grp-s{display:block;color:#8A867E;letter-spacing:.06em;margin:.35rem 0 .1rem;
  font-size:11px;padding-left:.1rem;}
.fx-panel .fx-sub label{padding-left:.15rem;}
.fx-panel label{display:block;color:#E4E0D8;padding:.12rem 0;cursor:pointer;}
.fx-panel label.fx-off{color:#6E6A63;cursor:not-allowed;}
.fx-panel input{accent-color:#C8A962;margin-right:.4rem;vertical-align:-1px;}
.fx-panel .fx-note{color:#8A867E;font-size:11px;margin:.5rem 0 0;}
.fx-panel .fx-ver{color:#C8A962;letter-spacing:.06em;}

/* ===== 無障礙：減少動態 ===== */
@media (prefers-reduced-motion: reduce){
  .fx-petal,.fx-petal-s,.fx-petal-i,.fx-veil{animation:none !important;transition:none !important;}
  /* 落花靜止但仍可見（--sty 為各元素的靜止落點，避免全擠在頂端） */
  body.fx-motes .fx-petal{opacity:.75 !important;top:var(--sty,20%) !important;}
  /* 主標聚光層完全不亮（JS 端亦不掛事件與計時器，此處為雙保險） */
  .fx-h1-shine{opacity:0 !important;transition:none !important;}
  /* 觸按光暈不生成（JS 端不掛事件；此處為雙保險） */
  .fx-tap-orb{display:none !important;}
}