#ci-root, #ci-root * { box-sizing: border-box; }

#ci-root {
	position: fixed; inset: 0;
	z-index: 999999;
	font-family: 'CIFont', Tahoma, Arial, sans-serif !important;
	direction: rtl;
	background: #000;
}
#ci-root input, #ci-root button, #ci-root textarea {
	font-family: 'CIFont', Tahoma, Arial, sans-serif !important;
}

.ci-stage { position: relative; width: 100%; height: 100%; overflow: hidden; perspective: 1400px; cursor: pointer; }
.ci-stage button, .ci-stage input, .ci-stage textarea, .ci-stage a { cursor: auto; }

.ci-panel {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden;
	/* ورودِ ساده و سبک: فقط opacity + یک transformِ ملایم. (نسخه‌ی قبلی از filter: blur روی
	   کلِ پنل استفاده می‌کرد که سنگین بود و مخصوصاً روی پس‌زمینه‌ی WebGLِ تم، تِرِنزیشن را
	   کند/پرش‌دار می‌کرد. حذف شد تا گذارها روان و تمیز بمانند.) */
	transition: opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1);
	padding: 4vh 5vw 110px;
	backface-visibility: hidden;
	will-change: transform, opacity;
}
.ci-panel.ci-active { opacity: 1; visibility: visible; transform: none; z-index: 3; }
.ci-panel.ci-leaving { opacity: 0; z-index: 2; }

/* --- موقعیت باکس در صفحه (بالا/وسط/پایین) --- */
.ci-panel.ci-pos-top { align-items: flex-start; padding-top: 9vh; }
.ci-panel.ci-pos-center { align-items: center; }
.ci-panel.ci-pos-bottom { align-items: flex-end; padding-bottom: 130px; }
@media screen and (max-width: 768px) {
	.ci-panel.ci-pos-top { padding-top: 7vh; }
	.ci-panel.ci-pos-bottom { padding-bottom: 100px; }
}

/* --- Transitions (دراماتیک‌تر شده: مقیاس/جابه‌جایی بیشتر + کمی چرخش برای عمق) --- */
.ci-trans-fade { transform: scale(1.06); }
.ci-trans-fade.ci-leaving { transform: scale(.92); }

.ci-trans-slide { transform: translateX(14%) scale(.98); }
.ci-trans-slide.ci-leaving { transform: translateX(-14%) scale(.98); }

.ci-trans-slideup { transform: translateY(16%) scale(.98); }
.ci-trans-slideup.ci-leaving { transform: translateY(-12%) scale(.98); }

.ci-trans-zoom { transform: scale(.72); }
.ci-trans-zoom.ci-leaving { transform: scale(1.22); }

.ci-trans-flip { transform: perspective(1400px) rotateY(-55deg) scale(.9); }
.ci-trans-flip.ci-leaving { transform: perspective(1400px) rotateY(55deg) scale(.9); }

.ci-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #120224 0%, #07030f 55%, #030308 100%); }
.ci-bg img, .ci-bg video { width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(0.9); }
.ci-bg::after {
	content: ''; position: absolute; inset: 0;
	background: radial-gradient(circle at center, transparent 20%, rgba(0,0,0,.7) 100%);
}

/* --- Box Styles --- */
.ci-box {
	position: relative; z-index: 2;
	width: 100%; max-width: 560px;
	padding: 40px 30px;
	color: #f2ede0;
	max-height: 90vh;
	overflow-y: auto;
	/* بدون این خط، وقتی محتوای باکس (مثلاً گرید ویدیو) از ارتفاع مجاز بیشتر می‌شود و
	   اسکرول‌بار ظاهر می‌گردد، عرض محتوا فقط از یک طرف (در RTL معمولاً سمت چپ) کم
	   می‌شود و هر عنصر وسط‌چین‌شده (مثل گرید ویدیو با margin:auto) نامتقارن به نظر
	   می‌رسد. با رزرو همیشگیِ جای اسکرول‌بار از هر دو طرف، این نامتقارنی از بین می‌رود. */
	scrollbar-gutter: stable both-edges;
    transition: all 0.3s ease;
}

.ci-box::-webkit-scrollbar { width: 4px; }
.ci-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.3); border-radius: 4px; }

/* 1. Glassmorphism */
.ci-box-glass {
    background: rgba(15, 15, 20, var(--ci-overlay));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
/* 2. Solid Dark */
.ci-box-solid {
    background: rgba(15, 15, 18, var(--ci-overlay-heavy));
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
/* 3. Gradient */
.ci-box-gradient {
    background: linear-gradient(135deg, rgba(30,30,40, var(--ci-overlay)) 0%, rgba(10,10,15, var(--ci-overlay)) 100%);
    border-top: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.ci-eyebrow {
	font-size: 13px; font-weight: 700; letter-spacing: 1px;
	color: #e8bb5c; text-transform: uppercase; margin-bottom: 16px; opacity: 0.9;
}

.ci-text {
	font-size: var(--ci-font-d, 22px);
	line-height: 1.8;
	font-weight: 500;
	margin-bottom: 25px;
	min-height: 1.6em;
}

@media screen and (max-width: 768px) {
	.ci-text { font-size: var(--ci-font-m, 17px); }
    .ci-box { padding: 30px 20px; }
    .ci-panel { padding: 3vh 5vw 85px; }
    .ci-skip, .ci-back, .ci-audio-toggle { font-size: 11px; padding: 7px 12px; }
    .ci-back { top: 60px; }
}

.ci-cursor {
	display: inline-block; width: 2px; height: 1em; background: currentColor;
	vertical-align: -2px; margin-right: 2px;
	animation: ci-blink 1s step-start infinite;
}
@keyframes ci-blink { 50% { opacity: 0; } }
@keyframes ci-fade-in { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

/* --- انیمیشن ورود عناصر داخل باکس (برچسب، رسانه، دکمه‌ها/فرم) --- */
@keyframes ci-el-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ci-el-fade-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ci-el-zoom { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes ci-el-slide-right { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ci-el-slide-left { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }

.ci-anim-fade { opacity: 0; animation: ci-el-fade .5s ease forwards; }
.ci-anim-fade-up { opacity: 0; animation: ci-el-fade-up .55s cubic-bezier(.2,.8,.2,1) forwards; }
.ci-anim-zoom { opacity: 0; animation: ci-el-zoom .5s cubic-bezier(.2,.8,.2,1) forwards; }
.ci-anim-slide-right { opacity: 0; animation: ci-el-slide-right .5s ease forwards; }
.ci-anim-slide-left { opacity: 0; animation: ci-el-slide-left .5s ease forwards; }

.ci-media-content { margin-bottom: 24px; transition: opacity 0.5s ease; font-size: 15px; line-height: 1.7; }
/* توجه: این استایل قبلاً با سلکتور descendant (بدون >) نوشته شده بود و باعث می‌شد هر
   img/video/iframe که هر چقدر هم تو در تو داخل شورت‌کدهای دیگر (مثل گرید ویدیو) باشد
   را هم استایل بدهد و چیدمان آن‌ها را بهم بریزد. با محدود کردن به فرزند مستقیم (>) این
   استایل فقط روی رسانه‌ای که مستقیم داخل باکس متن گذاشته می‌شود اعمال می‌شود. */
.ci-media-content > img, .ci-media-content > video, .ci-media-content > iframe,
.ci-media-content > p > img, .ci-media-content > p > video, .ci-media-content > p > iframe {
	max-width: 100%; height: auto; border-radius: 12px; display: block; margin: 15px auto;
}

/* --- محفظه‌ی شورت‌کد/HTML آزاد داخل باکس ---
   خروجیِ شورت‌کدهای دیگر (مثل [iranuni_video_grid]) معمولاً با margin:auto خودِ CSS خودشان
   وسط‌چین می‌شوند؛ اما این روش شکننده است: اگر عرضِ خروجیِ شورت‌کد از عرضِ این محفظه بیشتر/
   کمتر باشد، یا هر استایل دیگری (قالب، اسکرول باکس و…) با margin تداخل کند، محتوا به‌جای
   وسط باکس، فقط از یک طرف می‌چسبد. برای اینکه وسط‌چین شدن مستقل از margin خودِ شورت‌کد و
   همیشه تضمینی باشد، خودِ این محفظه با flexbox محتوایش را وسط قرار می‌دهد. */
.ci-shortcode-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.ci-shortcode-wrap > * { max-width: 100%; }

/* --- سوالات متداول (آکاردئونی) --- */
.ci-faq { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.ci-faq-item {
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px;
	background: rgba(255,255,255,0.05);
	overflow: hidden;
}
.ci-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: transparent;
	border: none;
	color: inherit;
	font: inherit;
	text-align: right;
	cursor: pointer;
	padding: 12px 16px;
}
.ci-faq-icon {
	flex-shrink: 0;
	width: 22px; height: 22px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--ci-btn-bg, #e8bb5c);
	color: var(--ci-btn-text, #111);
	font-size: 16px; line-height: 1;
	transition: transform 0.3s ease;
}
.ci-faq-item.ci-faq-open .ci-faq-icon { transform: rotate(45deg); }
/* ترفند grid-template-rows برای انیمیشنِ نرمِ باز/بسته شدن، بدون نیاز به محاسبه‌ی
   ارتفاع واقعیِ محتوا با جاوااسکریپت (چون طول جواب هر سؤال متفاوت است). */
.ci-faq-a {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}
.ci-faq-item.ci-faq-open .ci-faq-a { grid-template-rows: 1fr; }
.ci-faq-a-inner {
	overflow: hidden;
	padding: 0 16px;
	font-size: 14px;
	line-height: 1.8;
	opacity: 0.9;
}
.ci-faq-item.ci-faq-open .ci-faq-a-inner { padding: 0 16px 14px; }


/* --- باکس رسانه (درگ اند دراپ) --- */
.ci-media-blocks.ci-layout-column { display: flex; flex-direction: column; gap: 14px; }
.ci-media-blocks.ci-layout-column .ci-media-block { display: flex; width: 100%; flex-wrap: wrap; }
.ci-media-blocks.ci-layout-column .ci-media-block.ci-align-center { justify-content: center; }
.ci-media-blocks.ci-layout-column .ci-media-block.ci-align-left { justify-content: flex-start; }
.ci-media-blocks.ci-layout-column .ci-media-block.ci-align-right { justify-content: flex-end; }

/* چیدمان «کنار هم» — آزاد مثل المنتور: عکس‌ها کوچک می‌شوند و کنار هم با فاصله دلخواه قرار می‌گیرند */
.ci-media-blocks.ci-layout-row {
	display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: var(--ci-row-gap, 14px);
}
.ci-media-blocks.ci-layout-row .ci-media-block { display: block; width: auto; flex: 0 0 auto; }
.ci-media-blocks.ci-layout-row .ci-media-block.ci-valign-top { align-self: flex-start; }
.ci-media-blocks.ci-layout-row .ci-media-block.ci-valign-center { align-self: center; }
.ci-media-blocks.ci-layout-row .ci-media-block.ci-valign-bottom { align-self: flex-end; }
.ci-media-blocks .ci-media-block a { display: inline-block; max-width: 100%; }
.ci-media-blocks .ci-media-block img,
.ci-media-blocks .ci-media-block video {
	width: var(--ci-mb-width, 100%);
	max-width: 100%;
	height: auto;
	border-radius: var(--ci-mb-radius, 12px);
	display: block;
	margin: 0;
}
.ci-media-blocks .ci-media-caption {
	width: 100%;
	font-size: 12px;
	color: rgba(255,255,255,0.65);
	margin-top: 6px;
}
.ci-media-blocks .ci-align-center .ci-media-caption { text-align: center; }
.ci-media-blocks .ci-align-left .ci-media-caption { text-align: left; }
.ci-media-blocks .ci-align-right .ci-media-caption { text-align: right; }

/* --- Button Styles & Sizes --- */
.ci-choices { display: flex; flex-direction: column; gap: 12px; }
.ci-btn {
	font-family: inherit; font-weight: 700; cursor: pointer;
	transition: all .25s ease; width: 100%; text-align: center;
    border-radius: 12px;
}
.ci-btn:active { transform: scale(.97); }

/* Sizes */
.ci-btn-sm { font-size: 14px; padding: 10px 16px; }
.ci-btn-md { font-size: 16px; padding: 14px 20px; }
.ci-btn-lg { font-size: 18px; padding: 18px 24px; }

/* Styles (رنگ‌ها از طریق متغیرهای CSS قابل تنظیم هستند) */
.ci-btn-solid {
    background: var(--ci-btn-bg, #e8bb5c); color: var(--ci-btn-text, #111); border: 1px solid var(--ci-btn-border, transparent);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}
.ci-btn-solid:hover { filter: brightness(1.08); transform: translateY(-2px); }

.ci-btn-outline {
    background: rgba(255,255,255,0.03); color: var(--ci-btn-text, #fff);
    border: 1.5px solid var(--ci-btn-border, rgba(255,255,255,0.2));
}
.ci-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: var(--ci-btn-bg, #e8bb5c); color: var(--ci-btn-bg, #e8bb5c); }

.ci-btn-glow {
    background: transparent; color: var(--ci-btn-text, #e8bb5c);
    border: 1px solid var(--ci-btn-border, #e8bb5c); text-shadow: 0 0 8px rgba(232,187,92,0.4);
    box-shadow: inset 0 0 10px rgba(232,187,92,0.15), 0 0 10px rgba(232,187,92,0.15);
}
.ci-btn-glow:hover { background: var(--ci-btn-bg, #e8bb5c); color: var(--ci-btn-text, #000); text-shadow: none; box-shadow: 0 0 20px rgba(232,187,92,0.5); }

/* --- Form Fields --- */
.ci-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px;
}
@media (max-width: 600px) { .ci-form-grid { grid-template-columns: 1fr; } }

.ci-input-group { position: relative; }
.ci-input-group i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); opacity: 0.5; }
.ci-input-group input, .ci-input-group textarea {
	width: 100%; font-size: 15px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.15);
	border-radius: 10px;
	padding: 14px 14px 14px 14px; color: #fff;
    transition: all 0.3s;
    font-family: inherit;
    resize: vertical;
}
.ci-input-group input::placeholder, .ci-input-group textarea::placeholder { color: rgba(255,255,255,0.4); }
.ci-input-group input:focus, .ci-input-group textarea:focus { outline: none; border-color: #e8bb5c; background: rgba(255,255,255,0.1); box-shadow: 0 0 0 3px rgba(232, 187, 92, 0.15); }
.ci-input-group:has(textarea) { grid-column: 1 / -1; }

.ci-back {
	position: fixed; top: 20px; left: 20px; z-index: 4;
	background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
	color: #ddd; font-size: 18px; font-weight: bold; backdrop-filter: blur(5px);
	width: 36px; height: 36px; border-radius: 50%;
	display: none; align-items: center; justify-content: center;
	cursor: pointer; transition: 0.3s; font-family: inherit; padding: 0;
	line-height: 1;
}
.ci-back:hover { opacity: 1; background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }

.ci-audio-controls {
	position: fixed; top: 20px; right: 20px; z-index: 4;
	display: flex; align-items: center; gap: 8px;
}
.ci-audio-controls.ci-audio-pos-top-right    { top: 20px; right: 20px; left: auto; bottom: auto; }
.ci-audio-controls.ci-audio-pos-top-left     { top: 20px; left: 20px; right: auto; bottom: auto; }
.ci-audio-controls.ci-audio-pos-bottom-right { bottom: 20px; right: 20px; left: auto; top: auto; }
.ci-audio-controls.ci-audio-pos-bottom-left  { bottom: 20px; left: 20px; right: auto; top: auto; }

.ci-audio-btn {
	--ci-audio-color: #e8bb5c;
	background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
	color: #ddd; font-size: 14px; font-weight: bold; backdrop-filter: blur(5px);
	width: 34px; height: 34px; line-height: 1; border-radius: 50%; opacity: 0.8; cursor: pointer; transition: 0.3s;
	font-family: inherit; display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
}
.ci-audio-btn:hover { opacity: 1; background: rgba(255,255,255,0.1); color: #fff; border-color: #fff; }
.ci-audio-btn.ci-audio-active { background: var(--ci-audio-color); border-color: var(--ci-audio-color); color: #111; opacity: 1; }

.ci-audio-label {
	background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.2);
	color: #ddd; font-size: 12px; font-weight: bold; backdrop-filter: blur(5px);
	padding: 6px 12px; border-radius: 20px; white-space: nowrap; font-family: inherit;
	opacity: 0.85; user-select: none;
}

@media screen and (max-width: 768px) {
	.ci-audio-btn { width: 30px; height: 30px; font-size: 12px; }
	.ci-audio-label { font-size: 11px; padding: 5px 10px; }
	.ci-audio-controls.ci-audio-pos-top-right,
	.ci-audio-controls.ci-audio-pos-top-left { top: 12px; }
	.ci-audio-controls.ci-audio-pos-bottom-right,
	.ci-audio-controls.ci-audio-pos-bottom-left { bottom: 12px; }
	.ci-audio-controls.ci-audio-pos-top-right,
	.ci-audio-controls.ci-audio-pos-bottom-right { right: 12px; }
	.ci-audio-controls.ci-audio-pos-top-left,
	.ci-audio-controls.ci-audio-pos-bottom-left { left: 12px; }
}

/* نوار مدیریت بالای وردپرس (برای ادمین‌های لاگین‌شده) خودش را روی دکمه‌های ثابت بالای صفحه
   نمی‌کشد؛ اگر آن را حساب نکنیم، دکمه‌ی رد کردن/برگشت/موزیک زیر نوار ادمین قایم می‌شوند. */
body.admin-bar .ci-back { top: 52px; }
body.admin-bar .ci-audio-controls.ci-audio-pos-top-right,
body.admin-bar .ci-audio-controls.ci-audio-pos-top-left { top: 52px; }
@media screen and (max-width: 782px) {
	body.admin-bar .ci-back { top: 66px; }
	body.admin-bar .ci-audio-controls.ci-audio-pos-top-right,
	body.admin-bar .ci-audio-controls.ci-audio-pos-top-left { top: 66px; }
}

.ci-progress {
	position: fixed; bottom: 25px; left: 0; right: 0; z-index: 4;
	display: flex; justify-content: center; gap: 8px;
}
.ci-progress span {
	width: 8px; height: 8px; border-radius: 50%;
	background: rgba(255,255,255,0.2); transition: 0.3s;
}
.ci-progress span.ci-now { background: #e8bb5c; transform: scale(1.3); box-shadow: 0 0 8px rgba(232,187,92,0.5); }
.ci-progress span.ci-done { background: rgba(232,187,92,0.7); }

/* ============================================================================
   موتور موشن (Motion Engine) — افزوده‌شده برای تجربه‌ی سینمایی و پرجزئیات.
   طراحی‌شده تا کاملاً backward-compatible بماند و همه چیز با
   prefers-reduced-motion خاموش شود.
   منابع easing/choreography: دیتابیس motion.csv در ui-ux-pro-max
   (spring/expo: cubic-bezier(0.16,1,0.3,1)، magnetic: elastic.out).
   ============================================================================ */

/* --- لایه‌ی نور محیطی (Aurora blobs): گوی‌های نرمِ رنگی که پشتِ باکس آرام شناورند --- */
.ci-aurora {
	position: absolute; inset: -10% -10% -10% -10%;
	overflow: hidden; pointer-events: none; z-index: 1;
	mix-blend-mode: screen;
	opacity: .9;
}
.ci-blob {
	position: absolute; border-radius: 50%;
	/* بلورِ سبک‌تر از قبل (۴۲ به‌جای ۶۰) + فقط translate در انیمیشن تا مرورگر رسترِ
	   بلورشده را یک‌بار بسازد و صرفاً جابه‌جایش کند (به‌جای رستر مجدد در هر فریم = خیلی
	   سبک‌تر روی CPU/GPU). translateZ(0) لایه را روی GPU پروموت می‌کند. */
	filter: blur(42px);
	opacity: .5;
	will-change: transform;
	transform: translateZ(0);
	backface-visibility: hidden;
}
.ci-blob-1 {
	width: 40vmax; height: 40vmax; top: -12%; right: -6%;
	background: radial-gradient(circle at 30% 30%, var(--ci-aura-1, #e8bb5c), transparent 70%);
	animation: ci-blob-float-a 24s ease-in-out infinite;
}
.ci-blob-2 {
	width: 36vmax; height: 36vmax; bottom: -14%; left: -8%;
	background: radial-gradient(circle at 40% 40%, var(--ci-aura-2, #5E6AD2), transparent 70%);
	animation: ci-blob-float-b 29s ease-in-out infinite;
}
.ci-blob-3 {
	width: 28vmax; height: 28vmax; top: 32%; left: 32%;
	background: radial-gradient(circle at 50% 50%, var(--ci-aura-3, #d16ba5), transparent 70%);
	animation: ci-blob-float-c 21s ease-in-out infinite;
	opacity: .34;
}
@keyframes ci-blob-float-a {
	0%,100% { transform: translate3d(0,0,0); }
	33% { transform: translate3d(-7%, 9%, 0); }
	66% { transform: translate3d(6%, -7%, 0); }
}
@keyframes ci-blob-float-b {
	0%,100% { transform: translate3d(0,0,0); }
	33% { transform: translate3d(9%, -8%, 0); }
	66% { transform: translate3d(-6%, 7%, 0); }
}
@keyframes ci-blob-float-c {
	0%,100% { transform: translate3d(0,0,0); }
	50% { transform: translate3d(7%, 7%, 0); }
}
/* شدت پایین: aurora ملایم‌تر و بی‌حرکت‌تر؛ شدت زیاد: پررنگ‌تر */
.ci-mo-low .ci-blob { opacity: .32; }
.ci-mo-high .ci-blob { opacity: .62; }
.ci-mo-high .ci-blob-3 { opacity: .45; }

/* پارالاکس ماوس: JS این متغیرها را ست می‌کند و لایه‌های bg/aurora با آن جابه‌جا می‌شوند */
.ci-bg { transition: transform .6s cubic-bezier(.16,1,.3,1); will-change: transform; }
.ci-parallax .ci-bg {
	transform: translate3d(calc(var(--ci-px, 0) * 18px), calc(var(--ci-py, 0) * 18px), 0) scale(1.06);
}
.ci-parallax .ci-aurora {
	transform: translate3d(calc(var(--ci-px, 0) * -30px), calc(var(--ci-py, 0) * -30px), 0);
	transition: transform .8s cubic-bezier(.16,1,.3,1);
}

/* باکس هم z-index بالاتر از aurora بگیرد */
.ci-box { z-index: 3; }

/* --- ورود سینمایی خودِ باکس (روی transform پنل سوار می‌شود) --- */
.ci-panel .ci-box {
	animation: ci-box-in .85s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ci-box-in {
	from { opacity: 0; transform: translateY(26px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- انیمیشن‌های ورودِ عناصر: نسخه‌ی پرجزئیات‌تر --- */
@keyframes ci-el-fade-up { from { opacity: 0; transform: translateY(28px) scale(.98); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes ci-el-zoom { from { opacity: 0; transform: scale(.8); filter: blur(4px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
/* ریویل با ماسکِ clip-path — یک افکت لوکس برای عنوان/برچسب */
@keyframes ci-el-reveal {
	from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(14px); }
	to   { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}
.ci-anim-reveal { opacity: 0; animation: ci-el-reveal .7s cubic-bezier(.16,1,.3,1) forwards; }
.ci-anim-fade-up { animation-duration: .7s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
.ci-anim-zoom { animation-timing-function: cubic-bezier(.16,1,.3,1); }

/* eyebrow با درخششِ ورودی */
.ci-eyebrow { position: relative; text-shadow: 0 0 18px rgba(232,187,92,.25); }

/* --- دکمه‌ها: میکرو-اینترکشن پیشرفته (مغناطیسی + ریپل + درخشش) --- */
.ci-btn {
	position: relative; overflow: hidden; isolation: isolate;
	transition: transform .35s cubic-bezier(.16,1,.3,1), filter .25s ease, box-shadow .35s ease, background .25s ease, color .25s ease, border-color .25s ease;
	will-change: transform;
}
/* هاله‌ی نوریِ متحرک که موقع هاور از پشت دکمه رد می‌شود */
.ci-btn::before {
	content: ''; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform .7s cubic-bezier(.16,1,.3,1);
}
.ci-btn:hover::before { transform: translateX(120%); }
.ci-btn-solid:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 26px -6px var(--ci-btn-bg, #e8bb5c); }

/* موجِ کلیک (ripple) که JS مختصاتش را ست می‌کند */
.ci-ripple {
	position: absolute; border-radius: 50%; z-index: -1;
	background: rgba(255,255,255,.35);
	transform: translate(-50%, -50%) scale(0);
	pointer-events: none;
	animation: ci-ripple-go .6s ease-out forwards;
}
@keyframes ci-ripple-go {
	to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* نبضِ درخششِ ملایم روی دکمه‌ی اصلی (solid) تا توجه را جلب کند */
.ci-choices .ci-btn-solid:first-child, .ci-btn-solid.ci-pulse {
	animation: ci-btn-pulse 2.6s ease-in-out infinite;
}
@keyframes ci-btn-pulse {
	0%,100% { box-shadow: 0 4px 15px rgba(0,0,0,.15), 0 0 0 0 rgba(232,187,92,.0); }
	50%     { box-shadow: 0 4px 15px rgba(0,0,0,.15), 0 0 22px -4px var(--ci-btn-bg, #e8bb5c); }
}
.ci-choices .ci-btn-solid:first-child:hover { animation-play-state: paused; }

/* --- فلشِ گذارِ بین مراحل (sweep overlay) که هنگام رفتن به مرحله‌ی بعد رد می‌شود --- */
.ci-flash {
	position: fixed; inset: 0; z-index: 5; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(232,187,92,.16) 50%, transparent 65%);
	transform: translateX(-100%);
	opacity: 0;
}
.ci-flash.ci-flash-go { animation: ci-flash-sweep .75s cubic-bezier(.16,1,.3,1); }
@keyframes ci-flash-sweep {
	0%   { transform: translateX(-100%); opacity: 0; }
	30%  { opacity: 1; }
	100% { transform: translateX(100%); opacity: 0; }
}

/* --- نوار پیشرفت: افزودن حالتِ درخشانِ متحرک به نقطه‌ی فعال --- */
.ci-progress span { position: relative; }
.ci-progress span.ci-now::after {
	content: ''; position: absolute; inset: -4px; border-radius: 50%;
	border: 1px solid rgba(232,187,92,.5);
	animation: ci-dot-ping 1.8s ease-out infinite;
}
@keyframes ci-dot-ping {
	0% { transform: scale(1); opacity: .8; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* دکمه‌ی back با ورود نرم */
.ci-back { transition: opacity .3s, background .3s, color .3s, border-color .3s, transform .3s cubic-bezier(.16,1,.3,1); }
.ci-back:hover { transform: scale(1.12) rotate(-8deg); }

@media (prefers-reduced-motion: reduce) {
	.ci-panel { transition: none; filter: none !important; }
	.ci-panel.ci-leaving { filter: none !important; }
	.ci-cursor { animation: none; }
	.ci-anim-fade, .ci-anim-fade-up, .ci-anim-zoom, .ci-anim-slide-right, .ci-anim-slide-left, .ci-anim-reveal { animation: none; opacity: 1; transform: none; clip-path: none; filter: none; }
	.ci-panel .ci-box { animation: none; }
	.ci-blob { animation: none; }
	.ci-btn, .ci-btn::before, .ci-choices .ci-btn-solid:first-child, .ci-btn-solid.ci-pulse { animation: none !important; transition: none; }
	.ci-progress span.ci-now::after { animation: none; display: none; }
	.ci-parallax .ci-bg, .ci-parallax .ci-aurora { transform: none; }
	.ci-flash { display: none; }
	.ci-grain, .ci-particles, .ci-spotlight { display: none !important; }
	.ci-shimmer .ci-eyebrow { animation: none; }
}

/* ============================================================================
   افکت‌های محیطیِ اضافه (لایه‌ی سراسری، مستقل از پنل‌ها) — قابل روشن/خاموش از پنل مدیریت
   ============================================================================ */

/* لایه‌ی روکشِ سراسری که گرین/ذرات/نورافکن داخلش می‌نشینند (پشتِ باکس‌ها، روی پس‌زمینه) */
.ci-fx {
	position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
}

/* --- گرین/نویزِ فیلم: بافتِ ظریفِ متحرک که حسِ سینمایی/آنالوگ می‌دهد --- */
.ci-grain {
	position: fixed; inset: -40%; z-index: 6; pointer-events: none;
	opacity: .045;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	mix-blend-mode: overlay;
	animation: ci-grain-move .5s steps(3) infinite;
	will-change: transform;
}
@keyframes ci-grain-move {
	0%   { transform: translate3d(0,0,0); }
	25%  { transform: translate3d(-3%, 2%, 0); }
	50%  { transform: translate3d(2%, -3%, 0); }
	75%  { transform: translate3d(-2%, -2%, 0); }
	100% { transform: translate3d(0,0,0); }
}
.ci-mo-low .ci-grain  { opacity: .028; }
.ci-mo-high .ci-grain { opacity: .07; }

/* --- کانواسِ ذراتِ شناور (JS آن را می‌کشد) --- */
.ci-particles {
	position: fixed; inset: 0; z-index: 2; pointer-events: none;
	mix-blend-mode: screen;
}

/* --- پس‌زمینه‌ی کیهانیِ WebGL (صحنه‌های galaxy / nebula / portal) ---
   یک لایه‌ی سراسری که پشتِ همه‌ی پنل‌ها می‌نشیند (z-index منفی تا زیر استیج و باکس باشد،
   نه رویشان). چون .ci-stage به‌خاطرِ perspective یک stacking-context می‌سازد، این کانواس با
   z-index:-1 مطمئناً زیرِ آن قرار می‌گیرد ولی روی پس‌زمینه‌ی مشکیِ #ci-root. */
.ci-cosmic {
	position: fixed; inset: 0; z-index: -1; pointer-events: none; display: block;
}
/* وقتی پس‌زمینه‌ی کیهانی فعال است و مرحله عکس/ویدیوی اختصاصی ندارد، پس‌زمینه‌ی تیره‌ی پنل
   شفاف می‌شود تا صحنه‌ی کیهانی از پشتِ باکسِ شیشه‌ای دیده شود (دقیقاً مثل شناور بودنِ باکس
   روی فضا). اگر مرحله عکس/ویدیو داشته باشد، خودِ آن روی این لایه می‌نشیند و کیهان دیده نمی‌شود. */
.ci-has-cosmic .ci-bg { background: transparent; }
.ci-has-cosmic .ci-bg::after {
	background: radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.5) 100%);
}

/* --- حالتِ «پس‌زمینه‌ی تمیز» (per-step) ---
   وقتی مرحله‌ی فعال تیکِ «فقط عکس/ویدیو» خورده باشد، JS کلاسِ ci-clean-active را روی #ci-root
   می‌گذارد و همه‌ی جلوه‌های محیطیِ سراسری (کیهان، ذرات، گرین، نورافکن) نرم محو می‌شوند تا فقط
   تصویرِ خودِ مرحله دیده شود. با رفتن به مرحله‌ای که تمیز نیست، دوباره برمی‌گردند. */
.ci-cosmic, .ci-particles, .ci-grain, .ci-spotlight { transition: opacity .5s ease; }
.ci-clean-active .ci-cosmic,
.ci-clean-active .ci-particles,
.ci-clean-active .ci-grain,
.ci-clean-active .ci-spotlight { opacity: 0 !important; }
/* نورهای شناورِ داخلِ خودِ پنلِ تمیز هم پنهان می‌شوند و پس‌زمینه‌اش تیره‌ی تمیز می‌ماند
   (نه شفاف) تا اگر عکس نداشت هم فضای شلوغ نشود. اگر عکس داشته باشد، عکس رویش می‌نشیند. */
.ci-panel.ci-clean .ci-aurora { display: none; }
.ci-panel.ci-clean .ci-bg { background: #05040a; }

/* ============================================================================
   کرسرِ سفارشی (trail / ring / spark) — فقط دسکتاپ. رنگ از --ci-cursor-color که JS با
   هر مرحله (اکسنت/تم) تازه می‌کند. مختصاتِ حرکت را JS با transform: translate ست می‌کند.
   ============================================================================ */
#ci-root.ci-cur-trail, #ci-root.ci-cur-trail *,
#ci-root.ci-cur-ring,  #ci-root.ci-cur-ring *  { cursor: none !important; }  /* کرسرِ بومی مخفی؛ نقطه‌ی خودمان جایش می‌آید */
.ci-cursor-dot, .ci-cursor-trail, .ci-cursor-ring {
	position: fixed; top: 0; left: 0; pointer-events: none; z-index: 2147483000;
	will-change: transform; margin: 0;
}
.ci-cursor-dot {
	width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
	background: var(--ci-cursor-color, #e8bb5c);
	box-shadow: 0 0 10px var(--ci-cursor-color, #e8bb5c);
}
.ci-cursor-trail {
	width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
	background: var(--ci-cursor-color, #e8bb5c); opacity: .32; filter: blur(4px);
}
.ci-cursor-ring {
	width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
	border: 2px solid var(--ci-cursor-color, #e8bb5c); opacity: .6;
	transition: width .22s cubic-bezier(.16,1,.3,1), height .22s cubic-bezier(.16,1,.3,1), margin .22s cubic-bezier(.16,1,.3,1), opacity .22s;
}
#ci-root.ci-cursor-hover .ci-cursor-ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: .95; }
.ci-spark {
	position: fixed; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
	pointer-events: none; z-index: 2147483000;
	background: var(--ci-cursor-color, #e8bb5c);
	box-shadow: 0 0 7px var(--ci-cursor-color, #e8bb5c);
	animation: ci-spark-fly .7s ease-out forwards;
}
@keyframes ci-spark-fly {
	from { transform: translate(0,0) scale(1); opacity: .9; }
	to   { transform: translate(var(--dx,0), var(--dy,0)) scale(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.ci-cursor-dot, .ci-cursor-trail, .ci-cursor-ring, .ci-spark { display: none !important; }
	#ci-root.ci-cur-trail, #ci-root.ci-cur-trail *,
	#ci-root.ci-cur-ring,  #ci-root.ci-cur-ring *  { cursor: auto !important; }
}

/* --- نورافکنِ دنبال‌کننده‌ی مکان‌نما: یک هاله‌ی نرمِ نور که با ماوس حرکت می‌کند --- */
.ci-spotlight {
	position: fixed; inset: 0; z-index: 2; pointer-events: none;
	background: radial-gradient(circle 340px at var(--ci-sx, 50%) var(--ci-sy, 40%),
	            rgba(255,255,255,.06), transparent 65%);
	mix-blend-mode: screen;
	transition: background-position .2s ease;
}
.ci-mo-high .ci-spotlight {
	background: radial-gradient(circle 420px at var(--ci-sx, 50%) var(--ci-sy, 40%),
	            rgba(255,255,255,.09), transparent 65%);
}

/* --- شیمرِ متن: درخششی که آرام روی برچسب (eyebrow) عبور می‌کند --- */
.ci-shimmer .ci-eyebrow {
	background: linear-gradient(100deg,
	            var(--ci-shimmer-base, #e8bb5c) 0%,
	            var(--ci-shimmer-base, #e8bb5c) 35%,
	            #fff7e6 50%,
	            var(--ci-shimmer-base, #e8bb5c) 65%,
	            var(--ci-shimmer-base, #e8bb5c) 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
	animation: ci-text-shimmer 3.2s linear infinite;
}
@keyframes ci-text-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -60% 0; }
}

/* اگر موتور موشن کلاً خاموش شده باشد: ورودِ آرام‌تر، بدون بلورِ سنگین و بدون box-in */
.ci-motion-off .ci-panel { filter: none !important; transition: opacity .45s ease, transform .45s ease; }
.ci-motion-off .ci-panel.ci-leaving { filter: none !important; }
.ci-motion-off .ci-panel .ci-box { animation: none; }
.ci-motion-off .ci-choices .ci-btn-solid:first-child, .ci-motion-off .ci-btn-solid.ci-pulse { animation: none; }