/* ==========================================================
   品芯 — 進場動畫（data-in 版）
   搭配 Bricks 互動：進入視口 → 設定屬性 data-in = true
   貼到：子主題 style.css 或 Bricks > 設定 > 自訂 CSS
   ========================================================== */

:root {
  --reveal-dur:    0.9s;
  --reveal-dur-lg: 1.2s;
  --reveal-ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-shift:  24px;
  --stagger:       0.12s;
}


/* ==========================================================
   1. 淡入上移　class：u-reveal
   用在：標題、段落、卡片、按鈕、一般區塊
   ========================================================== */
.u-reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition:
    opacity   var(--reveal-dur) var(--reveal-ease),
    transform var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform;
}
.u-reveal[data-in] {
  opacity: 1;
  transform: translateY(0);
}

/* 位移大一點（大標題用）　加 class：u-reveal--lg */
.u-reveal--lg { --reveal-shift: 40px; --reveal-dur: var(--reveal-dur-lg); }

/* 只淡入不位移　加 class：u-reveal--fade */
.u-reveal--fade { --reveal-shift: 0px; }


/* ==========================================================
   2. 圖片遮罩掀起　class：u-wipe
   用在：Hero 大圖、氛圍橫幅、診所環境照
   ========================================================== */
.u-wipe {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--reveal-dur-lg) var(--reveal-ease);
  will-change: clip-path;
}
.u-wipe[data-in] {
  clip-path: inset(0 0 0 0);
}

/* 由左往右揭開　加 class：u-wipe--x */
.u-wipe--x { clip-path: inset(0 100% 0 0); }
.u-wipe--x[data-in] { clip-path: inset(0 0 0 0); }


/* ==========================================================
   3. 逐項延遲（stagger）
   父層加 u-stagger，子元素各自加 u-reveal
   子元素的互動可只設在父層，子層靠 delay 依序出現
   ========================================================== */
.u-stagger > *:nth-child(1)  { transition-delay: calc(var(--stagger) * 0); }
.u-stagger > *:nth-child(2)  { transition-delay: calc(var(--stagger) * 1); }
.u-stagger > *:nth-child(3)  { transition-delay: calc(var(--stagger) * 2); }
.u-stagger > *:nth-child(4)  { transition-delay: calc(var(--stagger) * 3); }
.u-stagger > *:nth-child(5)  { transition-delay: calc(var(--stagger) * 4); }
.u-stagger > *:nth-child(6)  { transition-delay: calc(var(--stagger) * 5); }
.u-stagger > *:nth-child(7)  { transition-delay: calc(var(--stagger) * 6); }
.u-stagger > *:nth-child(8)  { transition-delay: calc(var(--stagger) * 7); }

/* 父層有 data-in 時，帶動所有子元素 */
.u-stagger[data-in] .u-reveal { opacity: 1; transform: translateY(0); }
.u-stagger[data-in] .u-wipe   { clip-path: inset(0 0 0 0); }

/* 手動指定延遲 */
.u-delay-1 { transition-delay: 0.12s; }
.u-delay-2 { transition-delay: 0.24s; }
.u-delay-3 { transition-delay: 0.36s; }
.u-delay-4 { transition-delay: 0.48s; }
.u-delay-5 { transition-delay: 0.60s; }
.u-delay-6 { transition-delay: 0.72s; }


/* ==========================================================
   4. 英文襯底大字橫向滑入　class：u-reveal-deco
   用在：ABOUT PINSIN、SERVICES 這類半透明大字
   ========================================================== */
.u-reveal-deco {
  opacity: 0;
  transform: translateX(-40px);
  transition:
    opacity   var(--reveal-dur-lg) var(--reveal-ease),
    transform var(--reveal-dur-lg) var(--reveal-ease);
  will-change: opacity, transform;
}
.u-reveal-deco[data-in] {
  opacity: 0.12;              /* 維持襯底透明度 */
  transform: translateX(0);
}

/* 深色底上的襯底字　加 class：u-reveal-deco--light */
.u-reveal-deco--light[data-in] { opacity: 0.08; }

/* 父層帶動 */
.u-stagger[data-in] .u-reveal-deco { opacity: 0.12; transform: translateX(0); }


/* ==========================================================
   5. 背景圖緩慢放大（Hero 可選）　class：u-kenburns
   ========================================================== */
.u-kenburns { overflow: hidden; }
.u-kenburns > img,
.u-kenburns::before {
  transform: scale(1.06);
  transition: transform 6s var(--reveal-ease);
}
.u-kenburns[data-in] > img,
.u-kenburns[data-in]::before {
  transform: scale(1);
}


/* ==========================================================
   無障礙：使用者關閉動畫時全部停用
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .u-reveal,
  .u-wipe,
  .u-reveal-deco,
  .u-kenburns > img {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
  .u-reveal-deco { opacity: 0.12 !important; }
}


/* ==========================================================
   效能與行動裝置調整（2026-09-24 追加）
   放在檔案最後，靠 CSS 層疊覆蓋上方規則，不更動原有內容。
   ========================================================== */

/* 1. 移除常駐的 will-change
   原本每個待播元素都常駐 will-change，瀏覽器會為它們預先建立
   合成層；頁面元素一多，手機記憶體吃重、捲動反而卡。
   改由 reveal.js 在元素即將播放前才動態加上，播完立刻移除。 */
.u-reveal,
.u-wipe,
.u-reveal-deco {
  will-change: auto;
}

/* 2. 手機（< 768px）：縮短距離與時間，捲動時比較跟得上 */
@media (max-width: 767px) {
  :root {
    --reveal-dur:    0.55s;
    --reveal-dur-lg: 0.7s;
    --reveal-shift:  14px;
    --stagger:       0.07s;
  }

  /* clip-path 動畫在中低階 Android 上成本偏高，改用單純淡入 */
  .u-wipe,
  .u-wipe--x {
    clip-path: none;
    opacity: 0;
    transition: opacity var(--reveal-dur) var(--reveal-ease);
  }
  .u-wipe[data-in],
  .u-wipe--x[data-in],
  .u-stagger[data-in] .u-wipe {
    clip-path: none;
    opacity: 1;
  }

  /* 6 秒的背景縮放在手機幾乎看不出來，卻要持續重繪，直接關掉 */
  .u-kenburns > img,
  .u-kenburns::before,
  .u-kenburns[data-in] > img,
  .u-kenburns[data-in]::before {
    transform: none;
    transition: none;
  }

  /* 延遲層次壓縮，避免最後一項等太久 */
  .u-delay-1 { transition-delay: 0.07s; }
  .u-delay-2 { transition-delay: 0.14s; }
  .u-delay-3 { transition-delay: 0.21s; }
  .u-delay-4 { transition-delay: 0.26s; }
  .u-delay-5 { transition-delay: 0.30s; }
  .u-delay-6 { transition-delay: 0.34s; }
}

/* 3. 極窄螢幕（< 478px）再收斂一次 */
@media (max-width: 477px) {
  :root {
    --reveal-dur:    0.45s;
    --reveal-dur-lg: 0.55s;
    --reveal-shift:  10px;
  }
}