/* ═══════════════════════════════════════════════════════════════════
   XREAL Video Scroll — 前端样式
   仅负责「视频层定位 / 叠放布局 / GPU 合成提示」，
   动画值全部由 JS 以 transform / opacity 写入（不产生主线程阻塞）。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 视频背景层 ─────────────────────────────────────────────── */
.xvs-has-video {
	position: relative;
	isolation: isolate;                 /* 独立层叠上下文，避免被外层背景盖住 */
	overflow: hidden;                   /* cover 裁切 */
}

.xvs-has-video > .xvs-video-layer {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}

.xvs-has-video > .xvs-video-layer video.xvs-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
	pointer-events: none;
}

.xvs-has-video > .xvs-video-layer .xvs-video-dim {
	position: absolute;
	inset: 0;
	background: #000;
	pointer-events: none;
}

/* 内容层压在视频之上（只针对内容包裹层，避免误伤 .elementor-background-overlay 等绝对定位子元素） */
.xvs-has-video > .e-con-inner,
.xvs-has-video > .elementor-container {
	position: relative;
	z-index: 1;
}

/* ── 吸附（pin）模式 ────────────────────────────────────────── */
.xvs-stage {
	position: relative;
}

.xvs-stage > .xvs-pinned {
	position: sticky;
	top: var(--xvs-pin-top, 0px);
	height: var(--xvs-pin-h, 100vh);
	min-height: var(--xvs-pin-h, 100vh);
}

/* ── 内容叠放（多段内容依次进场）+ 九宫格定位 ───────────────
   兼容两种 DOM 形态：
   ① Elementor 默认在容器内输出 .e-con-inner 包裹层；
   ② 开启「优化标记」等实验时不输出包裹层 —— 此时容器自身即叠放网格。
   （本插件的目标站即第 ② 种，早期版本只写了 ① 导致叠放/定位不生效。） */
.xvs-overlay {
	min-height: var(--xvs-overlay-h, 100vh);
}

/* 容器自身即叠放网格（无内层包裹时）。
   ⚠ 这里不能声明 position —— 吸附模式下容器必须是 sticky，
   若被覆盖成 relative 会让吸附彻底失效（relative 由 .xvs-has-video 提供）。 */
.xvs-overlay:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) {
	display: grid;                       /* 单格网格：所有内容段叠在同一格 */
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	min-height: var(--xvs-overlay-h, 100vh);
}

/* 内层包裹层作为叠放网格 */
.xvs-overlay > .e-con-inner,
.xvs-overlay > .elementor-container {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	min-height: var(--xvs-overlay-h, 100vh);
}

.xvs-overlay:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-overlay > .e-con-inner > *,
.xvs-overlay > .elementor-container > * {
	grid-area: 1 / 1 / 2 / 2;
	position: relative;
	box-sizing: border-box;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	/* 上下偏移：用 margin 表达（正值下移、负值上移），不干扰动画用的 transform */
	margin-top: var(--xvs-oy, 0px);
	margin-bottom: calc(var(--xvs-oy, 0px) * -1);
}

/* 竖直停靠 */
.xvs-v-top:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-v-top    > .e-con-inner > *,
.xvs-v-top    > .elementor-container > * { align-self: start; }
.xvs-v-middle:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-v-middle > .e-con-inner > *,
.xvs-v-middle > .elementor-container > * { align-self: center; }
.xvs-v-bottom:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-v-bottom > .e-con-inner > *,
.xvs-v-bottom > .elementor-container > * { align-self: end; }

/* 水平停靠 */
.xvs-h-left:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-h-left   > .e-con-inner > *,
.xvs-h-left   > .elementor-container > * { justify-self: start; align-items: flex-start; }
.xvs-h-center:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-h-center > .e-con-inner > *,
.xvs-h-center > .elementor-container > * { justify-self: stretch; align-items: center; }
.xvs-h-right:not(:has(> .e-con-inner)):not(:has(> .elementor-container)) > *:not(.xvs-video-layer),
.xvs-h-right  > .e-con-inner > *,
.xvs-h-right  > .elementor-container > * { justify-self: end; align-items: flex-end; }

/* ── 内容段动画基础 ─────────────────────────────────────────── */
.xvs-anim {
	backface-visibility: hidden;
}

.xvs-anim.xvs-anim-active {
	will-change: transform, opacity;    /* 仅在动画区间内提升合成层 */
}

/* ── 降级（用户偏好减少动效 / JS 未运行） ─────────────────── */
@media (prefers-reduced-motion: reduce) {
	.xvs-anim,
	.xvs-anim.xvs-anim-active {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
		will-change: auto !important;
	}
}

.xvs-has-video.xvs-reduced > .xvs-video-layer video.xvs-video {
	opacity: 1;
}