/* KV：依 00_開案資料/影片組件 的圖片承高、影片絕對定位寫法。 */
.kv_hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #020812;
  line-height: 0;
}

/* 底部潤飾：與下方 hex-stage／overview 黑底接縫過渡，避免硬切線 */
.kv_hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  height: clamp(80px, 12vw, 160px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  content: "";
  pointer-events: none;
}

/* 分區驗收期間只呈現已完成的 KV；下一區完成後移除此階段標記。 */
.kv-stage > main,
.kv-stage > footer {
  display: none;
}

.kv_video_container {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #020812;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: opacity .2s ease;
}

/* 跨斷點換素材時短暫壓低透明度，等預載完成一次切，減少「灑掉」感 */
.kv_hero.is-kv-switching .kv_video_container {
  opacity: 0.01;
}

.kv_bg_image {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 墊圖撐高；class 隨斷點切換，比例跟著桌機／手機套圖走 */
.kv_bg_loading {
  position: relative;
  z-index: 0;
  transition: aspect-ratio .25s ease;
}

.kv_hero.is-kv-desktop .kv_bg_loading {
  aspect-ratio: 1920 / 1000;
}

.kv_hero.is-kv-mobile .kv_bg_loading {
  aspect-ratio: 1280 / 1800;
}

/* 產品圖絕對定位；src 由 JS 在播完後才賦值，避免與桌機／手機／影片同時下載 */
.kv_bg_reveal {
  --kv-reveal-shift-y: 0px;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center calc(50% + var(--kv-reveal-shift-y));
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease-in-out;
  will-change: filter;
}

/* 露出後用對比／亮度微脈衝，營造產品圖「發光」感（避免硬光暈） */
.kv_hero.is-kv-finished .kv_bg_reveal {
  opacity: 1;
  animation: kv-reveal-glow 4.6s ease-in-out infinite;
}

@keyframes kv-reveal-glow {
  0%,
  100% {
    filter: contrast(1) brightness(1) saturate(1);
  }
  45% {
    filter: contrast(1.1) brightness(1.08) saturate(1.06);
  }
  70% {
    filter: contrast(1.04) brightness(1.2) saturate(1.35);
  }
}

/* 影片疊在墊圖上，只播一次：開始播放時淡入、播完淡出露出產品圖。 */
.kv_video_layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

.kv_video_layer.is-playing {
  opacity: 1;
}

/* visibility 延到淡出結束才切換，否則會直接消失、看不到淡出。 */
.kv_video_layer.is-finished {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease-in-out, visibility 0s linear .8s;
}

.kv_video_layer video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020812;
  pointer-events: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* 使用者偏好減少動態時不播影片，直接停在 KV 圖片。 */
@media (prefers-reduced-motion: reduce) {
  .kv_video_layer {
    display: none;
  }

  .kv_hero.is-kv-finished .kv_bg_reveal {
    animation: none;
    filter: none;
  }
}

/* 跟進頁鎖定走，不要用 media query，以免拖拉過 768 時底部漸層跟著跳 */
.kv_hero.is-kv-mobile::after {
  /* 640 設計稿等比：縮短底部黑漸層，避免 KV 與標題距離過大 */
  height: calc(48 * var(--u));
}

.kv_hero.is-kv-mobile .kv_bg_reveal {
  --kv-reveal-shift-y: 3px;
}