/*
 * progress-tabs.css —— 首页「From C&I to Utility-Scale」四栏上方的播放进度线（客户 HM-13，第六轮催办）。
 *
 * 那四栏是业主用 Elementor 容器手拼的（上边 2px #DEDFE0 边线），不是自建组件，
 * 所以这套靠给容器加两个 CSS 类接上（已在后台存值里加好）：
 *   父容器 .astra-ptabs            默认「鼠标经过触发」：经过哪栏红线展开到哪栏、移开不收（业主 2026-09-30：停留在当前的话红线要固定住），
 *                                  进视口先点亮第一栏；加 data-ptabs-mode="auto" 才自动轮（可选 data-ptabs-delay="毫秒"，默认 5000）
 *   每一栏 .astra-ptabs__item      当前那栏由 JS 加 .is-active，鼠标停着时加 .is-hover
 * 红线是 JS 塞进每一栏的一个 <span class="astra-ptabs__bar">，盖在容器自己的上边线上。
 * 不能用 ::before 画：Elementor 容器自己拿 ::before 做背景遮罩（content: var(--background-overlay)），
 * 它的规则会把 content 压成 none，伪元素根本不生成（2026-09-29 踩过，红线一直是整条）。
 * 长度由 JS 写 --ptabs-p（0~1）驱动，不用 CSS 动画：鼠标停上去暂停时线也得停在原地。
 * 换视频（HM-05，2026-09-30 客户批注后接上）：上面那块图的容器挂 .astra-ptabs-stage__media（外层 .astra-ptabs-stage），
 * 每一栏容器上的 data-ptabs-video 由后台容器控制项「Astra · 四栏换视频」输出（inc/elementor-addons/container-video.php），
 * JS 往图的容器里塞两个 <video> 轮流淡入淡出，图留在底下当封面；只在宽屏启用。
 */

.astra-ptabs .astra-ptabs__item {
  position: relative;
}

.astra-ptabs__bar {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--astra-primary, #e60012);
  transform: scaleX(var(--ptabs-p, 0));
  transform-origin: left center;
  pointer-events: none;
}

.astra-ptabs__item:not(.is-active) .astra-ptabs__bar {
  transform: scaleX(0);
}

/* 业主 2026-09-29：鼠标经过时红线也要「从 0 展开到 100%」，不是瞬间变红。
   自动模式下红线由 rAF 逐帧写进度、不能挂过渡；悬停时挂上 is-hover，把 0→1 交给 0.6s 过渡。 */
.astra-ptabs__item.is-hover .astra-ptabs__bar {
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .astra-ptabs__item.is-active .astra-ptabs__bar {
    transform: scaleX(1);
  }

  .astra-ptabs__item.is-hover .astra-ptabs__bar {
    transition: none;
  }
}

/* ---- 四栏换视频的舞台（HM-05）---- */
.astra-ptabs-stage__media {
  position: relative;
  overflow: hidden;
}

.astra-ptabs-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.astra-ptabs-stage__video.is-on {
  opacity: 1;
}

/* 手机 / 平板没有悬停，且省流量：不塞视频，图照旧（JS 那头也不初始化） */
@media (max-width: 1200px) {
  .astra-ptabs-stage__video {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .astra-ptabs-stage__video {
    transition: none;
  }
}