/* 福來偉 預覽特效 fx-flow（2026-11-01，Grok Bot，僅本機預覽，未上線）
   沿用 fx-mid 的淡金色 rgba(var(--fx-gold),…) 與 fx- 命名。只改呈現，不改文字、價格與數據。
   A1) 圖解線條描繪：圖解捲進畫面時，卡片外框與箭頭用淡金線「一筆一筆畫出來」，圖片同時由淡轉清楚。
   A2) 光點流動：細小金色光點沿圖解的卡片外框、箭頭與量尺線慢慢流動（只在線條上，不放在任何圖示或人物上）。
   B6) 右下浮動 LINE 按鈕：沿用網站原本的按鈕與連結，加上緩慢的金色呼吸光暈；避開手機安全區域，看到「送出」按鈕時自動讓開。
   C)  中國大陸館：同一份檔案；大陸館沒有 LINE，浮動按鈕改為連到既有的「联系」頁。
   只動 transform / opacity / stroke-dashoffset；進入畫面才開始；分頁切走就暫停；「減少動態」全部關閉。 */

:root { --fx-gold: 232,192,104; }

/* ---------- A1 + A2 圖解 ---------- */
.fx-flow-host { position: relative; display: block; }
.fx-flow-svg {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;           /* 不擋「點圖放大」 */
  overflow: hidden; border-radius: 16px;
}
/* 圖片：進場前淡一點，線條畫完時回到原樣 */
.fx-flow-img { transition: opacity 1.3s ease .15s; }
.fx-flow-wait .fx-flow-img { opacity: .28; }

/* 描繪線：pathLength=1，dashoffset 1 → 0 */
.fx-flow-line {
  fill: none;
  stroke: rgb(var(--fx-gold));
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  opacity: .9;
  transition: stroke-dashoffset 1.25s cubic-bezier(.55,0,.25,1), opacity 1.2s ease;
  transition-delay: var(--fx-d, 0s), calc(var(--fx-d, 0s) + 1.4s);
}
.fx-flow-line.fx-flow-thin { opacity: .55; }
.fx-flow-in .fx-flow-line { stroke-dashoffset: 0; opacity: .5; }
.fx-flow-in .fx-flow-line.fx-flow-thin { opacity: .3; }

/* 光點：用 SVG animateMotion 移動，這裡只管外觀與淡入 */
.fx-flow-dots { opacity: 0; transition: opacity .8s ease 1.2s; }
.fx-flow-in .fx-flow-dots { opacity: 1; }

/* ---------- B6 浮動 LINE / 聯絡按鈕 ---------- */
.fx-fab {
  /* 原本的 inline style 是 right:18px;bottom:18px，這裡加上安全區域（iPhone 底部橫條） */
  right: calc(18px + env(safe-area-inset-right, 0px)) !important;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  transition: opacity .35s ease, transform .35s ease;
}
.fx-fab::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(var(--fx-gold),.75), 0 0 16px 3px rgba(var(--fx-gold),.55), 0 0 34px 8px rgba(var(--fx-gold),.22);
  opacity: 0; pointer-events: none;
  animation: fxFabBreath 3.8s ease-in-out infinite;
}
@keyframes fxFabBreath { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
/* 看到表單「送出」按鈕時讓開，避免蓋住 */
.fx-fab.fx-fab-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
/* 頁面原本沒有浮動按鈕時（部落格、大陸館）才新增；外觀比照網站原按鈕 */
.fx-fab-new {
  position: fixed; z-index: 9999;
  display: flex; align-items: center; gap: 8px;
  padding: 12px 18px; border-radius: 999px;
  font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  border: 1px solid rgba(var(--g1),var(--g2),var(--g3),.6);
}
.fx-fab-line { background: #06C755; color: #fff; }
.fx-fab-cn { background: var(--bg900); color: var(--fw-gold-soft); letter-spacing: 2px; }
.fx-fab-new svg { flex: 0 0 auto; }
@media (max-width: 767px) {
  .fx-fab-new { padding: 11px 16px; font-size: 14px; }
}

/* 手機：圖解下方留空間，避免浮動按鈕蓋住圖下小字（2026-11-01 上線小修） */
@media (max-width: 640px) {
  figure.guide-figure { margin-bottom: 3.5rem !important; } /* 圖解原本有 inline style padding:0 1rem; margin:2rem auto，需 !important 才生效 */
}

/* 分頁切到背景：全部暫停 */
.fx-flow-paused .fx-fab::after { animation-play-state: paused; }

/* 減少動態：全部關閉，圖片照原樣顯示 */
@media (prefers-reduced-motion: reduce) {
  .fx-flow-svg { display: none !important; }
  .fx-flow-wait .fx-flow-img, .fx-flow-img { opacity: 1 !important; transition: none !important; }
  .fx-fab::after { animation: none !important; opacity: 0 !important; }
  .fx-fab { transition: none !important; }
}