/*
 * video-scroll.css —— 首页视频区：往下滑动时从满屏收进版心框（客户 HM-01 / HM-02）。
 *
 * 结构是「高轨道 + 粘性舞台」：
 *   .astra-vs__track  撑出一段额外的滚动行程（默认 220vh），它自己不动；
 *   .astra-vs__stage  position:sticky 钉在视口里，高度正好一屏；
 *   .astra-vs__frame  真正会变的那个框，宽高按 --vs-p 在「满屏」和「版心」之间插值。
 *
 * JS 只写 --vs-p 一个变量（0=满屏，1=收进框里），插值全部交给 CSS calc。
 * 这样滚动时浏览器只重算这一条链，不用每帧回 JS 改一堆行内样式。
 */

.astra-vs {
  /* 0 = 满屏，1 = 收进版心框。没有 JS 时停在 1（直接是收好的框，也能看） */
  --vs-p: 1;

  /* 满屏态的宽度：视口减掉竖滚动条（--astra-sbw 由 header-chrome.js 量出来，
     100vw 自己含滚动条，直接用会横向溢出） */
  --vs-full-w: var(--astra-vw, calc(100vw - var(--astra-sbw, 0px)));

  /* 收定后的宽度：跟全站版心一致（GL-04），窄屏时至少留 16px 边 */
  --vs-frame-w: min(
    var(--vs-width, var(--astra-content, 1440px)),
    calc(var(--vs-full-w) - 32px)
  );
  --vs-frame-h: calc(var(--vs-frame-w) / var(--vs-ratio, 1.7778));
}

.astra-vs__track {
  position: relative;
  height: var(--vs-track, 220vh);
}

/* 第六轮（客户「about 视频滑动到这里，让人以为下面没有内容了」）：
   收定之后舞台还是一屏高、框居中，框底下那截空白（(一屏 - 框高)/2）要等轨道走完才让位，
   看起来像页面到底了。用负外边距把后面的内容提前拉上来正好贴住框底：舞台钉住的最后那段行程里，
   下一块从框底下方滑入，钉住结束时两者刚好相接。舞台本身透明、不截点击，所以不挡后面的内容。
   框比一屏还高（矮屏）时 min() 把它压回 0。 */
.astra-vs {
  margin-bottom: min(0px, calc((var(--vs-frame-h) - 100dvh) / 2));
}

.astra-vs__stage {
  pointer-events: none;
}

.astra-vs__frame {
  pointer-events: auto;
}

.astra-vs__stage {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100dvh;
}

.astra-vs__frame {
  position: relative;
  /* 第五轮补：这个框是 flex 子项，默认 flex-shrink:1，在 1440 的 Elementor 容器里会被压回 1440——
     结果「满屏」那一端从来没真正出现过，只有高度在变。钉死不压缩、不设上限，让它按 calc 溢出父容器；
     父容器居中在视口正中，溢出的两侧正好对称到视口边。 */
  flex: 0 0 auto;
  max-width: none;
  /* 满屏 → 版心：两端值之间按 --vs-p 线性插值，缓动在 JS 里已经加过了 */
  width: calc(
    var(--vs-full-w) - (var(--vs-full-w) - var(--vs-frame-w)) * var(--vs-p)
  );
  height: min(
    100dvh,
    calc(100dvh - (100dvh - var(--vs-frame-h)) * var(--vs-p))
  );
  border-radius: calc(var(--vs-radius, 0px) * var(--vs-p));
  overflow: hidden;
  background: var(--vs-bg, #000);
}

.astra-vs__video,
.astra-vs__poster {
  display: block;
  width: 100%;
  height: 100%;
  /* 片子的比例跟框不一定一样，统一裁切填满，别出黑边 */
  object-fit: cover;
}

/* 还没上片源时退回封面图，版式不塌 */
.astra-vs__poster {
  object-position: center;
}

/* ---------------------------------------------------------------- 窄屏
   手机上没有「滚动收框」的空间，也不值得为它多滚两屏：
   直接就是收好的框，跟着页面正常走。 */
@media (max-width: 1200px) {
  .astra-vs {
    margin-bottom: 0;
  }

  .astra-vs__track {
    height: auto;
  }

  .astra-vs__stage {
    position: static;
    height: auto;
    padding: 0 16px;
  }

  .astra-vs__frame {
    width: 100%;
    height: auto;
    aspect-ratio: var(--vs-ratio, 1.7778);
    border-radius: var(--vs-radius, 0px);
  }
}

/* 用户在系统里关了动效：不做缩放，直接给收好的框 */
@media (prefers-reduced-motion: reduce) {
  .astra-vs {
    --vs-p: 1;
    margin-bottom: 0;
  }

  .astra-vs__track {
    height: auto;
  }

  .astra-vs__stage {
    position: static;
    height: auto;
  }

  .astra-vs__frame {
    height: auto;
    aspect-ratio: var(--vs-ratio, 1.7778);
  }
}