:root {
    --overlay-blue: 10, 0, 40; /* 藍色遮罩基底色 (可自行調整) */
    --overlay-alpha: 0.45;       /* 遮罩透明度 25% */
    --text-cycle-duration: 18s;  /* 文字「淡入→停留→淡出」的完整時間，改這個數字就能控制整體節奏 */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html, body {
    width: 100%;
    background: #000;
    font-family: 'Noto Sans TC', sans-serif;
  }

  /* ---------- 外層容器：決定這個效果佔頁面多高，捲動時會隨頁面一起滑走 ---------- */
  .kb-hero {
    position: relative;
    width: 100%;
    height: 100vh;      /* 想要多高就改這裡，例如 80vh、600px 都可以 */
    overflow: hidden;
  }

  /* ---------- 背景圖片輪播層 ---------- */
  .kb-stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  .kb-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transform: scale(1);
    transition: opacity 2s ease-in-out;
    will-change: opacity, transform;
  }

  .kb-slide.is-active {
    opacity: 1;
  }

  /* 多種 Ken Burns 運鏡變化，讓每張圖表現不同。
     重點：每一個變化的 0% 都務必等於 .kb-slide 的基礎狀態 scale(1) translate(0,0)，
     這樣動畫重新啟動的瞬間，畫面才不會跟基礎狀態產生落差而「跳」一下。 */
  @keyframes kbZoomIn {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.18) translate(-3%, -2%); }
  }
  @keyframes kbZoomInSoft {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.14) translate(3%, 2%); }
  }
  @keyframes kbPanLeft {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.15) translate(-5%, 0%); }
  }
  @keyframes kbPanRight {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.15) translate(5%, 0%); }
  }
  @keyframes kbDiagonal {
    0%   { transform: scale(1)    translate(0%, 0%); }
    100% { transform: scale(1.2)  translate(4%, -3%); }
  }

  .kb-anim-zoomIn     { animation-name: kbZoomIn;     animation-timing-function: linear; animation-fill-mode: forwards; }
  .kb-anim-zoomInSoft { animation-name: kbZoomInSoft; animation-timing-function: linear; animation-fill-mode: forwards; }
  .kb-anim-panLeft    { animation-name: kbPanLeft;    animation-timing-function: linear; animation-fill-mode: forwards; }
  .kb-anim-panRight   { animation-name: kbPanRight;   animation-timing-function: linear; animation-fill-mode: forwards; }
  .kb-anim-diagonal   { animation-name: kbDiagonal;   animation-timing-function: linear; animation-fill-mode: forwards; }

  /* ---------- 藍色遮罩 ---------- */
  .kb-overlay {
    position: absolute;
    inset: 0;
    z-index: 5; /* 設成夠大的數字，確保不會被持續遞增的圖片 z-index 蓋過去 */
    background: rgba(var(--overlay-blue), var(--overlay-alpha));
    pointer-events: none;
    opacity: 1;
    /* 延遲 0.9s、總時長跟 --text-cycle-duration 一致，跟 .kb-desc（最後消失的文字）
       用完全相同的時間軸，所以會在同一瞬間一起淡出消失 */
    animation: kbOverlayFadeOut var(--text-cycle-duration) linear 0.9s forwards;
  }

  @keyframes kbOverlayFadeOut {
    0%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
  }

  /* ---------- 中央文字 ---------- */
  .kb-content {
    position: absolute;
    inset: 0;
    z-index: 6; /* 比遮罩再高一層，確保文字永遠在最上面 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 6% 6vw 0%;
    pointer-events: none;
  }

  .kb-eyebrow {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 400;
    letter-spacing: 0.5em;
    font-size: clamp(0.65rem, 1vw, 0.85rem);
    color: var(--orange-s);
    text-transform: uppercase;
    margin-bottom: 1.4rem;
    opacity: 0;
    animation: kbFadeInOut var(--text-cycle-duration) ease-in-out 0.3s forwards;
  }

  .kb-title {
    font-family: 'Noto sans TC', sans-serif;
    font-weight: 300;
    font-size: clamp(2rem, 3vw, 4rem);
    color: #fff;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0,0,0,0.35);
    opacity: 0;
    animation: kbFadeInOut var(--text-cycle-duration) ease-in-out 0.5s forwards;
  }

  .kb-divider {
    width: 56px;
    height: 2px;
    background: rgba(255,255,255,0.7);
    margin: 1.8rem 0;
    opacity: 0;
    animation: kbFadeInOut var(--text-cycle-duration) ease-in-out 0.7s forwards;
  }

  .kb-desc {
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 300;
    font-size: clamp(0.9rem, 1.4vw, 1.2rem);
    color: rgba(255,255,255,0.9);
    max-width: 640px;
    line-height: 1.9;
    letter-spacing: 0.04em;
    opacity: 0;
    animation: kbFadeInOut var(--text-cycle-duration) ease-in-out 0.9s forwards;
  }

  /* 淡入 → 停留 → 淡出 的完整週期。
     15%／85% 這兩個百分比決定「淡入淡出各佔多少比例、中間停留多久」，
     實際秒數 = 對應百分比 × --text-cycle-duration。
     例如目前 --text-cycle-duration:10s 時 → 淡入 1.5s、停留 7s、淡出 1.5s。
     想要停留更久，把 15% 改小（例如 8% / 92%）即可，總長度仍由 --text-cycle-duration 決定。 */
  @keyframes kbFadeInOut {
    0%   { opacity: 0; transform: translateY(16px); }
    15%  { opacity: 1; transform: translateY(0); }
    85%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-16px); }
  }

  @media (max-width: 640px) {
    .kb-title { letter-spacing: 0.04em; }
  }

  /* 尊重使用者的減少動態偏好設定 */
  /* 頁面捲動離開視窗時，加上這個 class 讓所有動畫暫停（凍結畫面，不繼續播放） */
  .kb-hero.is-paused .kb-slide,
  .kb-hero.is-paused .kb-overlay,
  .kb-hero.is-paused .kb-eyebrow,
  .kb-hero.is-paused .kb-title,
  .kb-hero.is-paused .kb-divider,
  .kb-hero.is-paused .kb-desc {
    animation-play-state: paused;
  }

  @media (prefers-reduced-motion: reduce) {
    .kb-slide { animation: none !important; transform: none !important; }
    .kb-overlay { animation: none !important; opacity: 1 !important; }
    .kb-eyebrow, .kb-title, .kb-divider, .kb-desc { animation: none !important; opacity: 1 !important; transform: none !important; }
  }