/* ═══════════════════════════════════════════════════════════
   Hero Video Background — نسخه اولیه (سالم)
   ─────────────────────────────────────────────────────────────
   منطق: یک wrapper به اندازه 100vh که داخلش یک stage با
   `position: sticky; top: 0; height: 100vh` قرار دارد. wrapper با
   `margin-bottom: -100vh` به محتوای بعدی اجازه می‌دهد روی stage
   قرار بگیرد. در نتیجه ویدیو پشت hero و سکشن‌های بعدی ظاهر می‌شود
   تا وقتی hero از view بیرون برود.

   ✓ هیچ تغییری در ظاهر hero ایجاد نمی‌کند
   ✓ mesh / grid / sheen / corners / text همگی دست‌نخورده
   ═══════════════════════════════════════════════════════════ */

.cbhv-wrap {
	position: relative;
	min-height: 100vh;
	margin-bottom: -100vh;             /* hero روی stage قرار بگیرد */
	z-index: 0;
	pointer-events: none;
}

.cbhv-stage {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 0;
}

.cbhv-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transform: translateZ(0);
	animation: cbhv-fadein .8s ease-out both;
}
@keyframes cbhv-fadein {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cbhv-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 17, 23, .4);
	pointer-events: none;
}

/* ─── سکشن‌های بعد از wrap باید روی ویدیو بیایند ─── */
.cbhv-wrap ~ * {
	position: relative;
	z-index: 2;
}

/* ─────────────────────────────────────────────────────────────
   THEME MODE OVERRIDES — وقتی ویدیو فعال است، پس‌زمینه‌ی hero را
   در هر سه نما (dark / light / colorful) شفاف کن تا ویدیو که از
   پشت hero قرار گرفته دیده شود.
   JS کلاس body.cbasco-has-hero-video را اضافه می‌کند.
   ───────────────────────────────────────────────────────────── */

/* پیش‌فرض (dark) — معمولاً hero خودش بک‌گراند خاصی ندارد */
body.cbasco-has-hero-video .cbf-hero,
body.cbasco-has-hero-video #primary > section.cbf-hero,
body.cbasco-has-hero-video main > section.cbf-hero {
	background: transparent !important;
	background-image: none !important;
}

/* حالت colorful — selector specific برای bypass کردن !important تم */
html[data-cb-theme="colorful"] body.cbasco-has-hero-video .cbf-hero,
html[data-cb-theme="colorful"] body.cbasco-has-hero-video [data-cb-section="hero"],
html[data-cb-theme="colorful"] body.cbasco-has-hero-video #primary > section.cbf-hero,
html[data-cb-theme="colorful"] body.cbasco-has-hero-video main > section.cbf-hero,
html[data-cb-theme="colorful"] body.cbasco-has-hero-video main > section:first-of-type,
html[data-cb-theme="colorful"] body.cbasco-has-hero-video #primary > section:first-of-type {
	background-color: transparent !important;
	background-image: none !important;
}

/* حالت light — مشابه colorful. مهم: باید selectorهای مبتنی بر #primary را هم
   داشته باشیم، چون فایل light-paint هیرو را با قانونی مثل
   `html[data-cb-theme="light"] #primary > section:first-of-type { … !important }`
   رنگ می‌کند که به‌خاطر ID، specificity بالاتری دارد. بدون این selectorها،
   بک‌گراند روشن روی ویدیو می‌افتد و ویدیو دیده نمی‌شود. */
html[data-cb-theme="light"] body.cbasco-has-hero-video .cbf-hero,
html[data-cb-theme="light"] body.cbasco-has-hero-video [data-cb-section="hero"],
html[data-cb-theme="light"] body.cbasco-has-hero-video main > section.cbf-hero,
html[data-cb-theme="light"] body.cbasco-has-hero-video main > section:first-of-type,
html[data-cb-theme="light"] body.cbasco-has-hero-video #primary > section.cbf-hero,
html[data-cb-theme="light"] body.cbasco-has-hero-video #primary > section:first-of-type {
	background-color: transparent !important;
	background-image: none !important;
}

/* ─── prefers-reduced-motion ─── */
@media (prefers-reduced-motion: reduce) {
	.cbhv-media { display: none; }
}

/* ─── موبایل: 100svh ─── */
@media (max-width: 720px) {
	.cbhv-stage { height: 100svh; }
}

/* ─── PRINT ─── */
@media print {
	.cbhv-stage { display: none; }
}