/* ============================================================
   animations.css — 絲滑動態層
   1) Hero 進場編排（巨字逐行遮罩滑入、圖片滑入）
   2) 捲動進場 reveal（文字遮罩上滑 / 圖片裁切縮放）
   3) 捲動連動視差 parallax（照片、巨型浮水印）
   技術：CSS transition/keyframes + scroll-driven(view/scroll timeline) + jQuery rAF
   ============================================================ */

/* ---------- 共用 easing 變數 ---------- */
:root{
  --ease-out-soft: cubic-bezier(.22,1,.36,1);
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

/* ============ 1) HERO 進場編排 ============ */
/* 巨字：每行包一層遮罩(overflow hidden)，內層由下往上滑入 */
.hero-giant{ }
.hero-giant .gline{ display:block; overflow:hidden; }
.hero-giant .gline > b{
  display:block; font-weight:inherit; will-change:transform;
  transform:translateY(116%);
}
.hero-kicker{ opacity:0; transform:translateY(26px); }
.hero-cta{ opacity:0; transform:translateY(26px); }
.hero-photos img{ opacity:0; transform:translateY(60px) scale(1.04); will-change:transform,opacity; }

/* 觸發：body.hero-in（main.js 於載入後加上） */
body.hero-in .hero-giant .gline > b{
  transform:translateY(0);
  transition:transform 1.15s var(--ease-out-soft);
}
body.hero-in .hero-giant .gline:nth-child(1) > b{ transition-delay:.15s; }
body.hero-in .hero-giant .gline:nth-child(2) > b{ transition-delay:.27s; }
body.hero-in .hero-giant .gline:nth-child(3) > b{ transition-delay:.39s; }
body.hero-in .hero-kicker{ opacity:1; transform:none; transition:opacity .9s var(--ease-out-expo), transform .9s var(--ease-out-soft); transition-delay:.05s; }
body.hero-in .hero-cta{ opacity:1; transform:none; transition:opacity .9s var(--ease-out-expo) .55s, transform .9s var(--ease-out-soft) .55s; }
body.hero-in .hero-photos img{ opacity:1; transform:none; transition:opacity 1.1s var(--ease-out-expo), transform 1.2s var(--ease-out-soft); }
body.hero-in .hero-photos img:nth-child(1){ transition-delay:.10s; }
body.hero-in .hero-photos img:nth-child(2){ transition-delay:.22s; }
body.hero-in .hero-photos img:nth-child(3){ transition-delay:.34s; }
body.hero-in .hero-photos img:nth-child(4){ transition-delay:.46s; }

/* ============ 2) 捲動進場 REVEAL ============ */
/* 預設：上滑＋淡入 */
[data-reveal]{ opacity:0; transform:translateY(48px); transition:opacity 1s var(--ease-out-expo), transform 1.1s var(--ease-out-soft); will-change:transform,opacity; }
[data-reveal].in{ opacity:1; transform:none; }

/* 純淡入（不位移） */
[data-reveal="fade"]{ transform:none; }

/* 圖片/卡片：裁切上掀 + 輕微縮放（更有層次） */
[data-reveal="img"]{ opacity:0; transform:scale(1.06); clip-path:inset(14% 0 14% 0 round 2px); transition:opacity 1.1s var(--ease-out-expo), transform 1.3s var(--ease-out-soft), clip-path 1.3s var(--ease-out-soft); }
[data-reveal="img"].in{ opacity:1; transform:none; clip-path:inset(0 0 0 0 round 0); }

/* 由左 / 由右滑入 */
[data-reveal="left"]{ opacity:0; transform:translateX(-60px); }
[data-reveal="left"].in{ opacity:1; transform:none; }
[data-reveal="right"]{ opacity:0; transform:translateX(60px); }
[data-reveal="right"].in{ opacity:1; transform:none; }

/* 文字遮罩上滑（單行） */
[data-reveal="mask"]{ opacity:1; transform:none; }
[data-reveal="mask"] .gline{ display:block; overflow:hidden; }
[data-reveal="mask"] .gline > *{ display:block; transform:translateY(110%); transition:transform 1.1s var(--ease-out-soft); }
[data-reveal="mask"].in .gline > *{ transform:none; }

/* stagger 延遲 */
[data-reveal-delay="1"]{ transition-delay:.12s; }
[data-reveal-delay="2"]{ transition-delay:.24s; }
[data-reveal-delay="3"]{ transition-delay:.36s; }
[data-reveal-delay="4"]{ transition-delay:.48s; }
[data-reveal-delay="5"]{ transition-delay:.60s; }

/* 子元素自動 stagger（容器加 data-stagger） */
[data-stagger] > *{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out-expo), transform 1s var(--ease-out-soft); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].in > *:nth-child(2){ transition-delay:.15s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.25s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.35s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.45s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.55s; }

/* ============ 3) 捲動連動視差 PARALLAX ============ */
/* main.js 以 rAF 設 --p（-1..1），元素依 data-parallax 強度位移 */
[data-parallax]{ will-change:transform; }

/* hero 照片條稍微加高，視差位移時不露出白邊 */
.hero-photos{ top:-6%; height:112%; bottom:auto; }

/* 巨型浮水印：原生 scroll-driven 視差（支援的瀏覽器更絲滑） */
@supports (animation-timeline: view()){
  .our-services-giant, .journey-giant{
    animation: drift-x linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
  @keyframes drift-x{ from{ transform:translateY(-50%) translateX(-6%); } to{ transform:translateY(-50%) translateX(4%); } }
  .journey-giant{ animation-name: drift-x2; }
  @keyframes drift-x2{ from{ transform:translateX(-6%); } to{ transform:translateX(5%); } }
}

/* ---------- 尊重「減少動態」偏好 ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  [data-reveal],[data-stagger] > *{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero-giant .gline > b,.hero-kicker,.hero-cta,.hero-photos img{ opacity:1 !important; transform:none !important; }
}