/*
 * 互動層：滑鼠效果。
 *
 * 為什麼是一支獨立的 CSS 而不是寫在元件裡：這裡要處理的目標（分類頁籤、
 * 全螢幕選單）用的都是 Webflow 匯出的 class，散在 SiteHeader 與各列表頁。
 * 集中在一個檔案，之後要調整動態手感只要看這裡一個地方。
 *
 * ⚠️ 載入順序很重要：這支必須排在 bootstrap 與 zonetai.webflow.css 後面
 * （見 src/app/(frontend)/layout.tsx），因為下面有幾條是專門用來蓋掉它們的。
 *
 * 動態原則：
 *   - 只動 transform / opacity / color，不動 width、top、left
 *     —— 這三個屬性瀏覽器可以直接交給合成器，捲動時滑過去不會頓。
 *   - 一律用 cubic-bezier(0.16, 1, 0.3, 1)：起步快、收尾慢，這是「絲滑」的來源，
 *     線性或 ease 都會有明顯的機械感。
 *   - 全部包在 prefers-reduced-motion 的退路裡。
 */

/* ─────────────────────────────────────────────
 * 1. 拿掉滑過去就冒出來的底線
 * ───────────────────────────────────────────── */

/*
 * 底線的來源是 bootstrap：`a:hover { color:#0056b3; text-decoration:underline }`。
 *
 * 正式站只有首頁、關於中泰、聯絡我們三頁載入 bootstrap，v2 卻在 layout 裡
 * 全站載入，所以這條規則漏到了每一頁的每一個連結上 —— 列表卡片、分類頁籤
 * 滑過去都會出現一條底線，那不是設計，是外溢。
 *
 * 不動 bootstrap 檔案本身（它還有別的樣式在用），只把這個副作用關掉。
 */
a:hover {
  text-decoration: none;
}

/* ─────────────────────────────────────────────
 * 2. 列表頁的分類頁籤（臺北市／新北市／新竹市）
 * ───────────────────────────────────────────── */

/*
 * Webflow 的 markup 本來就準備好了一組「遮罩式文字替換」：
 * .tab-wrapper 是固定高度 ＋ overflow:hidden 的直向容器，裡面疊了兩份一樣的
 * 文字（灰的、綠的）。原本的設計顯然是滑過去時整疊往上推、換成綠色那一份，
 * 只是這個動作當初是掛在 Webflow 的互動引擎上，v2 沒有接。
 *
 * 這裡把它補起來 —— 不是另外發明一套效果，是把既有結構本來就要做的事做完。
 */
.tab-team-tab-1 .tab-wrapper .tab-text {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

.tab-team-tab-1:hover .tab-wrapper .tab-text,
.tab-team-tab-1:focus-visible .tab-wrapper .tab-text {
  /* .tab-wrapper 高 2rem，推一格剛好換成下面那份 */
  transform: translateY(-2rem);
}

/* 下面那一份用品牌綠，替換上來才看得出變化 */
.tab-team-tab-1 .tab-text.green {
  color: var(--z, #004e59);
}

/*
 * 底色的藥丸。目前所在的分類（.w--current）本來就有深色藥丸了，
 * 只有其他分類需要這個提示，不然兩種狀態會互相打架。
 */
.tab-team-tab-1:not(.w--current) {
  border-radius: 999px;
  transition:
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tab-team-tab-1:not(.w--current):hover {
  background-color: rgb(0 78 89 / 7%);
}

/* 按下去有一點回饋，手感才踏實 */
.tab-team-tab-1:not(.w--current):active {
  transform: scale(0.97);
}

.tab-team-tab-1:focus-visible {
  outline: 2px solid var(--z, #004e59);
  outline-offset: 3px;
}

/* ─────────────────────────────────────────────
 * 3. 全螢幕選單（右上角三條線展開的那一頁）
 * ───────────────────────────────────────────── */

/*
 * 原本滑過去只會冒出一條底線（.menu-all-link:hover 的 text-decoration）。
 * 換成從右邊長出來的細線：選單本身是靠右對齊的，線從右往左展開，
 * 方向跟閱讀的視線一致。
 *
 * 用 ::after ＋ scaleX 而不是 border-bottom，是為了不動到版面
 * （加邊框會把文字往上推 1px，八個項目一起抖）。
 */
.menu-all-link {
  position: relative;
  display: inline-block;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.menu-all-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35em;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Webflow 那條 .menu-all-link:hover 的底線要關掉，不然會跟這條線疊在一起 */
.menu-all-link:hover,
.menu-all-link.no-hover:hover {
  text-decoration: none;
}

.menu-all-link:hover::after,
.menu-all-link:focus-visible::after {
  transform: scaleX(1);
}

.menu-all-link:hover,
.menu-all-link:focus-visible {
  /* 往左挪一點點，配合線展開的方向 */
  transform: translateX(-4px);
}

/* 滑到其中一項時，其餘幾項稍微退後，被指到的那一項就浮出來了 */
.menu-all:hover .menu-all-link {
  opacity: 0.55;
}

.menu-all:hover .menu-all-link:hover {
  opacity: 1;
}

.menu-all-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

/* 選單裡的地址／電話／信箱 */
.navigation-menu .link-2 {
  display: inline-block;
  transition:
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease;
}

.navigation-menu .link-2:hover {
  transform: translateX(3px);
  opacity: 0.75;
}

/* 選單裡的社群圖示 */
.add-fb-line-menu a {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.add-fb-line-menu a:hover {
  transform: translateY(-3px) scale(1.08);
}

/* ─────────────────────────────────────────────
 * 4. 首頁左側的次要導覽
 * ───────────────────────────────────────────── */

/*
 * 首頁左邊那一排（關於中泰、聚焦中泰…）。是一組灰字的小連結，原本完全沒有
 * 滑鼠狀態，滑過去只有游標變成手指。
 *
 * 這裡的手法跟全螢幕選單相反：首頁是靠左對齊的，所以線從左邊長出來、
 * 文字往右挪，方向一樣跟著視線走。
 */
#home_left_side_smallTitle a {
  position: relative;
  /*
   * 這一行是必要的：bootstrap 有 `a { color: #007bff }`，不蓋掉的話這排連結
   * 會變成瀏覽器藍。原本是靠 JSX 的行內 style 寫 `color: inherit` 壓住的，
   * 但行內樣式優先權高過任何 stylesheet 規則，下面那條 hover 變色就永遠不會生效。
   * 把它從行內搬到這裡，兩件事就都成立了。
   */
  color: inherit;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

#home_left_side_smallTitle a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#home_left_side_smallTitle a:hover,
#home_left_side_smallTitle a:focus-visible {
  color: var(--z, #004e59);
  transform: translateX(5px);
}

#home_left_side_smallTitle a:hover::after,
#home_left_side_smallTitle a:focus-visible::after {
  transform: scaleX(1);
}

/* ─────────────────────────────────────────────
 * 5. 列表頁的「View More」
 * ───────────────────────────────────────────── */

/*
 * 結構是「文字 ── 一條線 ── 圓形箭頭」。三個元素一起動，方向都指向右邊，
 * 也就是「點下去會往前一步」的意思。
 *
 * 線是用 scaleX 拉長而不是改 width：改 width 會把右邊的圓形箭頭往外推，
 * 整列跟著重排；scaleX 只是畫面變形，旁邊的東西不動。
 */
.view-more-team .more-ine {
  transform-origin: left center;
  transition:
    transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s ease;
}

.view-more-team .more-en,
.view-more-team .heading-2 {
  transition: color 0.3s ease;
}

.view-more-team .more-icon,
.view-more-team .image-5 {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .view-more-team:hover .more-ine {
    transform: scaleX(1.25);
    background-color: var(--z, #004e59);
  }

  .view-more-team:hover .more-en,
  .view-more-team:hover .heading-2 {
    color: var(--z, #004e59);
  }

  .view-more-team:hover .more-icon,
  .view-more-team:hover .image-5 {
    transform: translateX(5px) scale(1.08);
  }

  .view-more-team:active .more-icon,
  .view-more-team:active .image-5 {
    transform: translateX(3px) scale(1);
  }
}

.view-more-team:focus-visible {
  outline: 2px solid var(--z, #004e59);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─────────────────────────────────────────────
 * 6. 分頁（上一頁 1 2 3 … 下一頁）
 * ───────────────────────────────────────────── */

/*
 * 數字鍵滑過去時長出一個圓 —— 那個圓就是目前所在頁（.paga-option）的樣子，
 * 等於先預告「按下去會變成這樣」。半徑與尺寸都對齊 .paga-option，
 * 才不會滑過去跟按下去看起來是兩個不同的東西。
 */
.paga1 {
  border-radius: 14px;
  transition:
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.paga1 .text-block-3 {
  transition: color 0.3s ease;
}

.paga1:hover {
  background-color: rgb(0 78 89 / 10%);
}

.paga1:hover .text-block-3 {
  color: var(--z, #004e59);
}

.paga1:active {
  transform: scale(0.92);
}

/* 上一頁／下一頁：箭頭往自己的方向走 */
.paga-one .image-8,
.paga-next .image-8 {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.paga-one .text-block-3,
.paga-next .text-block-3 {
  transition: color 0.3s ease;
}

.paga-one:hover .image-8 {
  transform: translateX(-4px);
}

.paga-next:hover .image-8 {
  transform: translateX(4px);
}

.paga-one:hover .text-block-3,
.paga-next:hover .text-block-3 {
  color: var(--z, #004e59);
}

.paga1:focus-visible,
.paga-one:focus-visible,
.paga-next:focus-visible {
  outline: 2px solid var(--z, #004e59);
  outline-offset: 3px;
  border-radius: 14px;
}

/* ─────────────────────────────────────────────
 * 7. 頁尾
 * ───────────────────────────────────────────── */

/* 地址、電話、傳真、信箱 */
.footer .link {
  position: relative;
  display: inline-block;
  transition:
    transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.3s ease;
}

.footer .link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2em;
  height: 1px;
  background: currentcolor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer .link:hover,
.footer .link:focus-visible {
  color: var(--z, #004e59);
  transform: translateX(3px);
}

.footer .link:hover::after,
.footer .link:focus-visible::after {
  transform: scaleX(1);
}

/* 社群圖示 */
.add-fb-line a {
  display: inline-flex;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.add-fb-line a:hover {
  transform: translateY(-3px) scale(1.08);
}

.add-fb-line a:active {
  transform: translateY(-1px) scale(1.02);
}

/* 頁尾的事務所標誌 */
.logo-info a {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.logo-info a:hover {
  opacity: 0.72;
}

/* ─────────────────────────────────────────────
 * 4. 動態偏好
 * ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tab-team-tab-1 .tab-wrapper .tab-text,
  .tab-team-tab-1:not(.w--current),
  .menu-all-link,
  .menu-all-link::after,
  .navigation-menu .link-2,
  .add-fb-line-menu a,
  #home_left_side_smallTitle a,
  #home_left_side_smallTitle a::after,
  .view-more-team .more-ine,
  .view-more-team .more-icon,
  .view-more-team .image-5,
  .paga1,
  .paga-one .image-8,
  .paga-next .image-8,
  .footer .link,
  .footer .link::after,
  .add-fb-line a,
  .logo-info a {
    transition: none;
  }

  .tab-team-tab-1:hover .tab-wrapper .tab-text,
  .menu-all-link:hover,
  .navigation-menu .link-2:hover,
  .add-fb-line-menu a:hover,
  #home_left_side_smallTitle a:hover,
  .view-more-team:hover .more-ine,
  .view-more-team:hover .more-icon,
  .view-more-team:hover .image-5,
  .paga-one:hover .image-8,
  .paga-next:hover .image-8,
  .footer .link:hover,
  .add-fb-line a:hover {
    transform: none;
  }

  /*
   * 動畫關掉之後還是要看得出「現在滑到哪一項」——
   * 所以線該出現的還是要出現，只是不做展開的過程。
   */
  .menu-all-link:hover::after,
  #home_left_side_smallTitle a:hover::after,
  .footer .link:hover::after {
    transform: scaleX(1);
  }
}