/**
 * Header 裝飾橫幅
 * File: assets/css/header-banner.css
 *
 * 只在 header.php 的 $header_banner_url 有值時才會輸出對應的 DOM，
 * 因此這份樣式在沒有橫幅時完全不影響現有外觀。
 *
 * 疊層順序（由下往上）：
 *   1. .site-header 本身的毛玻璃底色
 *   2. .header-banner__img    橫幅圖（會左右視差位移）
 *   3. .header-banner__scrim  遮罩，確保白字可讀
 *   4. .header-top / .header-nav-bar  實際內容
 *
 * ⚠ 不可對 .site-header 設 overflow:hidden —— 導覽列的下拉選單需要溢出。
 *   因此裁切交給 .header-banner 這層自己處理。
 */

:root {
  /*
   * 橫幅的垂直取景位置。
   *
   * 圖是 2560×400（6.4:1），header 只有 155px 高，以整站寬度鋪滿後
   * 垂直方向會被裁掉約四成，因此看到的是圖中間的一條帶狀區域。
   * 想讓畫面往上或往下取景，改這個值即可（0% 取頂部、100% 取底部）。
   */
  /*
   * ⚠ 比例不合造成的必然裁切：
   *   圖 2560×400 是 6.4:1，可視框（1920×155）約 12.4:1，
   *   圖高只有 58% 顯示得出來，另外 42% 一定會被裁掉。
   *   往下取景就切上緣、往上取景就切下緣，沒有兩全的值。
   *   根本解法是把圖改成 2560×200（約 12.8:1），或把 header 加高到 300px。
   */
  --header-banner-pos-y: 68%;

  /*
   * 橫幅的水平取景位置。
   *
   * 圖以 --header-banner-zoom 放大後會比容器寬，多出來的部分就是可以
   * 左右滑動的餘裕。數值越小＝畫面內容越往右移（0% 表示貼齊左緣，
   * 也就是把圖整個推到最右邊；100% 反之）。
   *
   * 註：cover 會剛好鋪滿寬度、沒有多餘寬度可推，因此改用明確的縮放值。
   */
  --header-banner-pos-x: 50%;

  /*
   * 放大倍率。100% 表示以容器寬度為準、不額外放大，圖最清晰。
   * 調高可製造左右餘裕讓 --header-banner-pos-x 生效，代價是圖被拉伸、
   * 兩側裁切變多，只有在圖的構圖需要平移時才調。
   */
  --header-banner-zoom: 100%;
}

.header-banner {
  position: absolute;
  inset: 0;
  overflow: hidden;      /* 視差位移時不讓圖片露出 header 邊界 */
  pointer-events: none;  /* 不攔截滑鼠，搜尋列等仍可正常點擊 */

  /*
   * ★ 負 z-index，而不是給 .header-top／.header-nav-bar 正值把它們墊高。
   *
   *   .site-header 本身是 position:sticky + z-index:1000，已經是一個堆疊
   *   脈絡；在其中，負 z-index 的子元素會畫在「父層背景之後、其餘內容
   *   之前」，正好符合橫幅的需求。
   *
   *   曾經改用「給 .header-top 與 .header-nav-bar 設 position:relative;
   *   z-index:1」，結果出了兩個問題：
   *     1. .header-top 因此建立堆疊脈絡，把搜尋下拉選單的 z-index 關在
   *        裡面，對外一律等於 1；而 .header-nav-bar 同為 1 且在 DOM 更
   *        後面，於是導覽列蓋住了下拉選單。
   *     2. 該選擇器權重高於原本的 .header-nav-bar { z-index: 1200 }，
   *        把既有設定一併覆蓋掉。
   *
   *   用負值就完全不必動 header 內的任何既有元素。
   */
  z-index: -1;
}

.header-banner__img {
  position: absolute;
  /*
   * 四邊各外擴，留出視差位移的餘裕；左右給得比上下多，
   * 因為位移主要發生在水平方向。
   */
  top: -6%;
  bottom: -6%;
  left: -4%;
  right: -4%;

  background-position: var(--header-banner-pos-x) var(--header-banner-pos-y);
  background-size: var(--header-banner-zoom) auto;
  background-repeat: no-repeat;

  /* 交給合成層處理，位移時不觸發重排 */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/*
 * 前景層：與背景層共用完全相同的定位參數，只有位移幅度不同（見
 * header-banner.js）。兩張圖尺寸相同，對齊因此由構造保證，不需要在這裡
 * 換算任何百分比。
 */
.header-banner__fg {
  position: absolute;
  top: -6%;
  bottom: -6%;
  left: -4%;
  right: -4%;

  background-position: var(--header-banner-pos-x) var(--header-banner-pos-y);
  background-size: var(--header-banner-zoom) auto;
  background-repeat: no-repeat;

  will-change: transform;
  transform: translate3d(0, 0, 0);
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

/*
 * 遮罩：中央與左側壓得比較暗，因為 logo 與搜尋列在那裡；
 * 兩側稍微透一點，讓圖的主體看得見。
 *
 * ⚠ 必須疊在前景層之上（DOM 順序在後），否則前景不會被壓暗，
 *   亮度與背景不一致，看起來像貼上去的貼紙。
 */
.header-banner__scrim {
  position: absolute;
  inset: 0;

  /*
   * 調整強度就改這裡的透明度數字。原則：
   *   · UI 蓋著的區段（左緣 logo、中央搜尋列、右緣使用者圖示）壓得重一些，
   *     白字才讀得清楚
   *   · 沒有 UI 的區段（約 22% 與 76% 附近）放到最淡，讓插畫看得見
   *
   * 2026-08-18 整體放淡（原本 .58～.92 過重，圖幾乎看不出來）。
   */
  background:
    linear-gradient(
      to right,
      rgba(30, 36, 43, .72) 0%,    /* logo */
      rgba(30, 36, 43, .30) 22%,   /* 空檔，圖最清楚 */
      rgba(30, 36, 43, .58) 42%,   /* 搜尋列 */
      rgba(30, 36, 43, .58) 58%,   /* 搜尋列 */
      rgba(30, 36, 43, .30) 76%,   /* 空檔 */
      rgba(30, 36, 43, .68) 100%   /* 使用者圖示 */
    ),
    linear-gradient(
      to bottom,
      rgba(30, 36, 43, .24) 0%,
      rgba(30, 36, 43, .05) 45%,
      rgba(30, 36, 43, .40) 100%
    );
}

/*
 * 有橫幅時移除導覽列上緣的分隔線。
 *
 * 那條線原本用來區隔兩排 header，在純色背景下是必要的視覺提示；但底下
 * 換成插畫後，它會橫貫整個畫面、把圖切成兩半，兩側沒有選單的區段尤其
 * 明顯。橫幅本身的明暗變化已足夠區隔上下兩排。
 *
 * 這條規則放在本檔案（只在橫幅啟用時載入），因此關掉橫幅後分隔線會自動
 * 恢復，不需要另外還原。
 *
 * ⚠ 限 901px 以上：≤900px 時橫幅本身是隱藏的（見下方媒體查詢），
 *   背景回到純色，此時分隔線仍有作用，不可一併移除。
 */
@media (min-width: 901px) {
  .site-header .header-nav-bar {
    border-top-color: transparent;
  }
}

/*
 * 手機：畫面窄，橫幅會被裁得只剩中央一小塊，資訊量低但仍要付出載入成本，
 * 且沒有滑鼠也就沒有視差，因此直接不顯示。
 */
@media (max-width: 900px) {
  .header-banner { display: none; }
}

/* 使用者偏好減少動態時，保留圖但不位移 */
@media (prefers-reduced-motion: reduce) {
  .header-banner__img,
  .header-banner__fg {
    transition: none;
    transform: none !important;
  }
}