/* =====================================================================
   bhb-motion.css —— 全站動效（2026-08-31）

   老闆：「全站加一個動畫效果。」

   為什麼要獨立一支：這幾條規則原本住在 bhb-web.css 裡，而 bhb-web.css
   只有 /websites、/account、/styles 載。首頁、MotiLearn 那頁、三頁法律
   條款都沒有載它 —— 在那些頁面上掛 bhb-motion.js 等於什麼都不做。
   拆出來之後，任何一頁只要 <link> 這一支 + <script> bhb-motion.js
   就有一樣的動效。

   全部只動 transform / opacity —— 不觸發 layout，滾動時不會掉幀。
   整份包在 prefers-reduced-motion: no-preference 裡：使用者在系統層關掉
   動畫時，.reveal 的初始隱藏也一併失效，內容直接是最終狀態（不會有
   「動畫關了所以內容永遠不出現」這種災難）。
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ── 按鈕 ──────────────────────────────────────────────────────
     :hover 抬 2px；:active 縮到 .94；放開時 cubic-bezier 的 overshoot
     把它彈回去。JS 另外加 .is-pop 做一次完整的縮→脹→歸位，
     這樣即使點完就開彈窗（付款鍵）也看得到回饋。 */
  .btn-solid, .btn-line, .paygate-go, .paygate-cancel, .feedback-again {
    transition: transform 240ms cubic-bezier(.34, 1.56, .64, 1),
                box-shadow 240ms ease, background-color 180ms ease,
                color 180ms ease, border-color 180ms ease;
  }
  .btn-solid:hover, .btn-line:hover,
  .paygate-go:hover, .paygate-cancel:hover { transform: translateY(-2px); }
  .btn-solid:active, .btn-line:active,
  .paygate-go:active, .paygate-cancel:active { transform: scale(.94); transition-duration: 90ms; }

  .is-pop { animation: btn-pop 400ms cubic-bezier(.34, 1.56, .64, 1); }
  @keyframes btn-pop {
    0%   { transform: scale(.93); }
    45%  { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  /* ── 進場：由 bhb-motion.js 掛 .reveal / .is-in，--i 做階梯延遲 ── */
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 620ms ease, transform 620ms cubic-bezier(.2, .8, .3, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .reveal.is-in { opacity: 1; transform: none; }

  /* ── 卡片 hover：整張輕輕浮起來 ── */
  .feature, .price-card, .step {
    transition: transform 300ms cubic-bezier(.2, .8, .3, 1), box-shadow 300ms ease;
  }
  .feature:hover, .price-card:hover { transform: translateY(-4px); }

}

/* ══════════════════════════════════════════════════════════════════
   按鈕的「正在處理」轉圈（2026-08-31）

   老闆：「所有的按鈕都要弄一個加載，就是轉圈圈那個加載按鈕，
          不然的話網絡延遲，按下去沒有任何反應，用戶就會按很多次。」

   他說的是真的會發生的事：登入、註冊、驗碼、存資料這幾支都要跑一趟伺服器，
   慢的時候一兩秒。那一兩秒裡按鈕長得跟沒按過一樣，人自然會再按 ——
   而重複送出的後果不只是難看：驗碼那支每按一次就吃掉一次猜錯額度
   （一組碼只有五次）。

   **這一段刻意放在 prefers-reduced-motion 的媒體查詢外面。**
   轉圈不是裝飾，是「系統正在做事」唯一的訊號；使用者關掉動畫效果不代表
   他願意對著一個沒反應的按鈕。關掉動畫時圈圈不轉，但仍然畫出來（見文末）。

   用法：JS 給按鈕加上 .is-busy 就好（順便設 disabled）。
   顏色寫死不吃 currentColor —— 底下把文字設成透明，
   currentColor 會跟著變透明，圈圈就消失了。
   ══════════════════════════════════════════════════════════════════ */
.is-busy {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  /* 共用的 :disabled 樣式會把按鈕調淡、游標變 progress。
     正在轉圈的按鈕不該同時是半透明的 —— 那看起來像壞了。 */
  opacity: 1 !important;
  cursor: progress;
}
.is-busy::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .34);
  border-top-color: #fff;
  animation: bhb-spin .7s linear infinite;
}
/* 淺底 / 描邊款的按鈕要用深色的圈，白圈在白底上等於沒有 */
.btn-line.is-busy::after,
.auth-link.is-busy::after,
.acct-edit.is-busy::after,
.price-block .btn-solid.pay.is-busy::after {
  border-color: rgba(23, 26, 25, .22);
  border-top-color: #171a19;
}
@keyframes bhb-spin { to { transform: rotate(360deg); } }

/* 關掉動畫的人：圈圈不轉，但畫成一條缺口環，仍然看得出「在忙」。 */
@media (prefers-reduced-motion: reduce) {
  .is-busy::after { animation: none; opacity: .75; }
}

/* ══════════════════════════════════════════════════════════════════
   載入進度條（2026-08-31）

   老闆：「剛開始就在一半的那個地方，減速加載，直到完全加載好……那個波浪。」

   進度的推進在 assets/bhb-motion.js（一出現就 50%，之後越爬越慢，
   載完才推到 100%）。這裡負責長相：一條 3px 的青色細線貼在頁面最上面，
   裡面有一道斜紋在跑 —— 那就是老闆說的「波浪」。

   **和轉圈按鈕一樣放在 prefers-reduced-motion 外面**：它是狀態回饋不是裝飾。
   關掉動畫的人一樣看得到條子在推進，只是斜紋不跑（見文末）。
   ══════════════════════════════════════════════════════════════════ */
.bhb-load {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 2147483000;          /* 壓在所有東西上面，包括 <dialog> 的 backdrop */
  background: rgba(39, 141, 130, .13);
  pointer-events: none;         /* 它只是看的，不要擋住底下的連結 */
  transition: opacity .35s ease .12s;
}
.bhb-load.is-done { opacity: 0; }

.bhb-load-fill {
  display: block; height: 100%; width: 0;
  background:
    /* 跑動的斜紋（波浪） */
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .00) 0 10px,
      rgba(255, 255, 255, .38) 10px 20px,
      rgba(255, 255, 255, .00) 20px 30px),
    linear-gradient(90deg, #278d82, #38b3a4);
  background-size: 60px 100%, 100% 100%;
  /* width 的過渡比 JS 的 tick（120ms）長一點，兩格之間才不會一頓一頓的 */
  transition: width .26s cubic-bezier(.2, .8, .3, 1);
  animation: bhb-wave 1.1s linear infinite;
  box-shadow: 0 0 10px rgba(39, 141, 130, .55);
}
@keyframes bhb-wave { to { background-position: 60px 0, 0 0; } }

@media (prefers-reduced-motion: reduce) {
  .bhb-load-fill { animation: none; }
}