/* ============================================================
   SiteVance — 17 項動效
   ------------------------------------------------------------
   通則：全部只動 transform 與 opacity（box-shadow 過渡只在 hover 觸發），
        不碰 width / top / left，所以不會觸發 layout 重算。
        捲動監聽在 motion.js 裡是單一 passive listener + rAF 節流。
   ============================================================ */

/* ① 捲動進場（含錯開延遲）
   用法：<div class="sv-rv" style="--sv-d:120ms"> 或 data-sv-rv="left|right|scale" */
.sv-rv{
  opacity:0; transform:translateY(26px);
  transition:opacity 620ms var(--sv-ease-out), transform 620ms var(--sv-ease-out);
  transition-delay:var(--sv-d,0ms);
  will-change:opacity, transform;
}
.sv-rv.is-in{ opacity:1; transform:none; will-change:auto; }
.sv-rv[data-sv-rv="left"]{  transform:translateX(-26px); }
.sv-rv[data-sv-rv="right"]{ transform:translateX(26px); }
.sv-rv[data-sv-rv="scale"]{ transform:scale(.955); }

/* ② 標題逐行揭露
   中文只做「逐行」不做「逐字」—— 逐字會讓斷行與標點跑掉
   用法：<span class="sv-line"><span>這一行</span></span> */
.sv-line{ display:block; overflow:hidden; }
.sv-line > span{
  display:block; transform:translateY(105%);
  transition:transform 760ms var(--sv-ease-out);
  transition-delay:var(--sv-d,0ms);
}
.sv-line.is-in > span{ transform:none; }

/* ③ SVG 連線繪製（Hero 節點網、流程連接線）
   用法：<path class="sv-draw" style="--sv-len:900" …> */
.sv-draw{
  stroke-dasharray:var(--sv-len,1000);
  stroke-dashoffset:var(--sv-len,1000);
  transition:stroke-dashoffset 1500ms var(--sv-ease-out);
}
.sv-draw.is-in{ stroke-dashoffset:0; }

/* ④ 節點呼吸 */
.sv-breathe{
  animation:sv-breathe 3.2s var(--sv-ease-out) infinite;
  transform-box:fill-box; transform-origin:center;
}
@keyframes sv-breathe{
  0%,100%{ transform:scale(1);    opacity:.9; }
  50%    { transform:scale(1.22); opacity:1;  }
}

/* ⑤ 狀態呼吸點（Hero eyebrow 的小綠點） */
.sv-pulse{
  display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--sv-success); animation:sv-pulse 2s var(--sv-ease-out) infinite;
}
@keyframes sv-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:.4; transform:scale(1.4); }
}

/* ⑥ Hero 微視差（motion.js 寫入 --sv-py） */
[data-sv-para]{ translate:0 var(--sv-py,0px); will-change:translate; }

/* ⑦ 捲動進度條 */
.sv-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:9999;
  background:linear-gradient(90deg,var(--sv-teal-500),var(--sv-teal-300));
  transition:width 90ms linear; pointer-events:none;
}

/* ⑧ 導覽列捲動縮放（由 motion.js 加 .is-shrunk 到 body）
   淺色導覽列捲動後用陰影，不要用底線 —— 1px 灰線看起來很「網頁模板」 */
body.is-shrunk .sv-header,
body.is-shrunk [data-elementor-type="header"]{
  box-shadow:var(--sv-shadow-sm);
  background:rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px);
}

/* ⑨ 卡片浮起：已寫在 components.css 的 .sv-card:hover */
/* ⑩ 按鈕箭頭滑動：已寫在 components.css 的 .sv-btn:hover .sv-ar */

/* ⑪ 比較表逐列進場：在 <tr> 上掛 .sv-rv 與 --sv-d 即可 */

/* ⑫ FAQ 展開（Elementor Accordion 與原生 details 都吃） */
.elementor-tab-content, .sv-faq[open] > .sv-faq__ans{
  animation:sv-fade-down 420ms var(--sv-ease-out);
}
@keyframes sv-fade-down{
  from{ opacity:0; transform:translateY(-8px); }
  to  { opacity:1; transform:none; }
}
.sv-faq summary{ cursor:pointer; list-style:none; }
.sv-faq summary::-webkit-details-marker{ display:none; }
.sv-faq summary .sv-ar{ transition:transform var(--sv-dur-base) var(--sv-ease-out); }
.sv-faq[open] summary .sv-ar{ transform:rotate(180deg); }

/* ⑬ 頁尾連結位移 */
.sv-ink a:not(.sv-btn){ transition:color var(--sv-dur-fast), transform var(--sv-dur-fast); display:inline-block; }
.sv-ink a:not(.sv-btn):hover{ color:var(--sv-teal-300); transform:translateX(3px); }

/* ⑭ 健檢卡右滑（深色區塊內） */
.sv-ink .sv-card--ghost{
  background:rgba(255,255,255,.05); border:1px solid rgba(103,194,195,.2);
  box-shadow:none; transition:all var(--sv-dur-base) var(--sv-ease-out);
}
.sv-ink .sv-card--ghost:hover{
  background:rgba(255,255,255,.09); border-color:rgba(103,194,195,.45);
  transform:translateX(5px);
}
.sv-ink .sv-card--ghost::after{ display:none; }

/* ⑮ 跑馬燈 ⑯ Logo 輪播 ⑰ 線框大字：已寫在 components.css */

/* ============================================================
   無障礙：使用者要求減少動態時，全部關閉並直接顯示終態
   Elementor 的 Motion Effects 不會自動處理這段，一定要自己寫
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .sv-rv{ opacity:1 !important; transform:none !important; }
  .sv-line > span{ transform:none !important; }
  .sv-draw{ stroke-dashoffset:0 !important; }
  [data-sv-para]{ translate:none !important; }
}