/* 都督抓漏｜動效層（動畫與互動特效）
   🔴 全站動效集中於本檔，改動效只改這裡
   🔴 三條鐵律：
      ① 只動 transform / opacity（不動 width/height/top），避免影響手機版版面與量測
      ② 必須支援 prefers-reduced-motion（使用者關掉動畫時自動停用）
      ③ 不覆蓋既有樣式的版面屬性（position、width、padding 一律不動） */

/* ===== 1) 進場動畫基礎 ===== */
@keyframes dodoFadeUp {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dodoFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes dodoZoomIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(.965); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes dodoSlideL {
  from { opacity: 0; transform: translate3d(-22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dodoSlideR {
  from { opacity: 0; transform: translate3d(22px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes dodoSealDrop {
  0%   { opacity: 0; transform: translate3d(0, -14px, 0) rotate(-14deg) scale(.7); }
  60%  { opacity: 1; transform: translate3d(0, 2px, 0) rotate(2deg) scale(1.06); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes dodoWaveDrift {
  0%   { background-position-x: 0; }
  100% { background-position-x: -1440px; }
}

/* ===== 2) 捲動進場（由 site.js 加 .dodo-in 類別觸發）===== */
.dodo-rv{opacity:0}
.dodo-rv.dodo-in{animation:dodoFadeUp .72s cubic-bezier(.22,.68,.32,1) forwards}
.dodo-rv.dodo-in.dodo-rv-1{animation-name:dodoFadeUp}
.dodo-rv.dodo-in.dodo-rv-2{animation-name:dodoZoomIn}
.dodo-rv.dodo-in.dodo-rv-3{animation-name:dodoSlideL}
.dodo-rv.dodo-rv-4{animation-name:dodoSlideR}
.dodo-rv.dodo-in.dodo-rv-5{animation-name:dodoFadeIn}

/* 首屏元素不進場動畫（避免使用者看到空白） */
.hero .in > *{animation:dodoFadeUp .8s cubic-bezier(.22,.68,.32,1) backwards}
.hero .in > *:nth-child(1){animation-delay:.05s}
.hero .in > *:nth-child(2){animation-delay:.16s}
.hero .in > *:nth-child(3){animation-delay:.27s}
.hero .in > *:nth-child(4){animation-delay:.38s}
.phead .in > *{animation:dodoFadeUp .7s cubic-bezier(.22,.68,.32,1) backwards}
.phead .in > *:nth-child(1){animation-delay:.05s}
.phead .in > *:nth-child(2){animation-delay:.14s}
.phead .in > *:nth-child(3){animation-delay:.23s}

/* 朱砂方印蓋章 */
.hd .t .seal{animation:dodoSealDrop .68s cubic-bezier(.34,1.4,.5,1) .5s backwards}

/* ===== 3) hero 水波紋流動 ===== */
.hero:after{animation:dodoWaveDrift 18s linear infinite}
.hero .ph{animation:dodoZoomIn .9s cubic-bezier(.22,.68,.32,1) .3s backwards}

/* ===== 4) 卡片微互動 ===== */
.card:hover,.art:hover,.kitem:hover{transition:transform .28s cubic-bezier(.22,.68,.32,1), box-shadow .28s ease}
.card:hover{transform:translateY(-5px)}
.art:hover{transform:translateY(-5px)}
.kitem:hover{transform:translateY(-4px)}
/* 朱砂方印編號：滑過時翻轉一下 */
.card .n,.tf .n{transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.card:hover .n,.tf:hover .n{transform:rotate(-8deg) scale(1.1)}

/* ===== 5) 數字計數 ===== */
.dodo-count{font-variant-numeric:tabular-nums}

/* ===== 6) 服務地區 chips 逐一浮現 ===== */
.ar a{transition:transform .25s cubic-bezier(.22,.68,.32,1), background-color .25s ease, color .25s ease}
.ar a:hover{transform:translateY(-3px)}

/* ===== 7) 捲動進度條 ===== */
#dodo-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  background:linear-gradient(90deg,var(--blue-d),var(--seal));transition:width .12s linear}

/* ===== 8) 返回頂部 ===== */
#dodo-top{position:fixed;right:18px;bottom:84px;width:46px;height:46px;border-radius:8px;
  background:var(--blue-d);color:#fff;border:0;font-size:20px;font-weight:800;cursor:pointer;
  box-shadow:0 6px 18px rgba(10,46,54,.28);opacity:0;pointer-events:none;
  transform:translateY(12px);transition:opacity .3s ease,transform .3s ease;z-index:98}
#dodo-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
#dodo-top:hover{background:var(--seal)}

/* ===== 9) FAQ 手風琴 ===== */
.fitem{transition:box-shadow .25s ease,border-color .25s ease}
.fitem:hover{box-shadow:0 8px 22px rgba(10,46,54,.14)}
.fitem b{transition:color .2s ease}

/* ===== 10) 照片浮框 ===== */
.case-photos img{transition:transform .45s cubic-bezier(.22,.68,.32,1), box-shadow .3s ease}
.case-photos figure{overflow:hidden;border-radius:6px}
.case-photos img:hover{transform:scale(1.045);box-shadow:0 10px 26px rgba(10,46,54,.22)}

/* ===== 11) 診斷選項（已有 .dopt.on）動態回饋 ===== */
.dopt{transition:background-color .22s ease,border-color .22s ease,transform .22s cubic-bezier(.22,.68,.32,1)}
.dopt:hover{transform:translateX(4px)}
.dres{animation:dodoFadeUp .42s cubic-bezier(.22,.68,.32,1)}

/* ===== 12) 底部行動列呼吸 ===== */
.mfix .l{animation:dodoBreathe 2.6s ease-in-out infinite}
@keyframes dodoBreathe{0%,100%{filter:brightness(1)}50%{filter:brightness(1.1)}}

/* ===== 13) 減少動態偏好：全站停用 ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .dodo-rv{opacity:1 !important}
  .hero:after{animation:none !important}
  #dodo-progress{display:none !important}
  #dodo-top{display:none !important}
}