/**
 * iDigital → REY Offcanvas — Custom Transitions
 *
 * تمام افکت‌ها فقط زمانی فعال می‌شوند که data-transition با پیشوند `iddd_`
 * روی `.rey-offcanvas-wrapper` تنظیم شده باشد. CSS سایر transition های REY
 * (default, slideskew, curtain, basic) دست‌نخورده باقی می‌ماند.
 *
 * نکات:
 * - آیتم‌های هدف با کلاس `iddd-anim-target` و یک متغیر `--idx` (شمارنده) از
 *   سمت JS علامت‌گذاری می‌شوند.
 * - حرکت اولیه نسبت به جهت پنل (data-position) منعکس می‌شود.
 */

.rey-offcanvas-wrapper[data-transition^="iddd_"] {
	--iddd-anim-dur: 480ms;
	--iddd-anim-stagger: 60ms;
	--iddd-anim-dist: 22px;
	--iddd-anim-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ───────────────── 1) Stagger Reveal (the video effect) ──────────────── */
/* پنل با همان transition پیش‌فرض REY از کنار وارد می‌شود؛ اما همزمان آیتم‌های
   داخل پنل (هر widget/menu-item) به‌صورت پلکانی از کنار به جای خود می‌لغزند. */

.rey-offcanvas-wrapper[data-transition="iddd_stagger_reveal"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(var(--iddd-anim-dist, 22px), 0, 0);
	will-change: transform, opacity;
}
/* پنل از سمت چپ → آیتم‌ها از چپ می‌آیند (هم‌جهت با حرکت پنل). */
.rey-offcanvas-wrapper[data-transition="iddd_stagger_reveal"][data-position="left"] .iddd-anim-target {
	transform: translate3d(calc(var(--iddd-anim-dist, 22px) * -1), 0, 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_stagger_reveal"][data-position="top"] .iddd-anim-target {
	transform: translate3d(0, calc(var(--iddd-anim-dist, 22px) * -1), 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_stagger_reveal"][data-position="bottom"] .iddd-anim-target {
	transform: translate3d(0, var(--iddd-anim-dist, 22px), 0);
}

.rey-offcanvas-wrapper[data-transition="iddd_stagger_reveal"].--active .iddd-anim-target {
	animation: iddd-rey-stagger-in var(--iddd-anim-dur) var(--iddd-anim-ease) both;
	animation-delay: calc(var(--idx, 0) * var(--iddd-anim-stagger));
}

@keyframes iddd-rey-stagger-in {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ───────────────── 2) Blur Zoom — modern Apple-style ─────────────────── */
/* پنل از یک نسخهٔ کوچک‌شده + محو وارد صحنه می‌شود و پس‌زمینهٔ سایت تار می‌شود. */

.rey-offcanvas-wrapper[data-transition="iddd_blur_zoom"] .rey-offcanvas-contentWrapper {
	transform: scale(.92);
	filter: blur(14px);
	opacity: 0;
	transition:
		transform var(--transition-duration, 700ms) var(--iddd-anim-ease),
		filter var(--transition-duration, 700ms) var(--iddd-anim-ease),
		opacity var(--transition-duration, 700ms) var(--iddd-anim-ease);
	will-change: transform, filter, opacity;
}
.rey-offcanvas-wrapper[data-transition="iddd_blur_zoom"].--active .rey-offcanvas-contentWrapper {
	transform: scale(1);
	filter: blur(0);
	opacity: 1;
}

/* همچنین آیتم‌های داخل پنل را با stagger ملایم وارد می‌کنیم. */
.rey-offcanvas-wrapper[data-transition="iddd_blur_zoom"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_blur_zoom"].--active .iddd-anim-target {
	animation: iddd-rey-fade-up var(--iddd-anim-dur) var(--iddd-anim-ease) both;
	animation-delay: calc(120ms + var(--idx, 0) * var(--iddd-anim-stagger));
}

@keyframes iddd-rey-fade-up {
	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

/* ───────────────── 3) Clip Corner — geometric reveal ─────────────────── */
/* پنل از گوشهٔ نزدیک به تریگر با clip-path دایره‌ای باز می‌شود. */

.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"] .rey-offcanvas-contentWrapper {
	clip-path: circle(0% at 0 0);
	-webkit-clip-path: circle(0% at 0 0);
	transition:
		clip-path var(--transition-duration, 700ms) var(--iddd-anim-ease),
		-webkit-clip-path var(--transition-duration, 700ms) var(--iddd-anim-ease);
	transform: none !important; /* override REY default slide */
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="right"] .rey-offcanvas-contentWrapper {
	clip-path: circle(0% at 100% 0);
	-webkit-clip-path: circle(0% at 100% 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="bottom"] .rey-offcanvas-contentWrapper {
	clip-path: circle(0% at 50% 100%);
	-webkit-clip-path: circle(0% at 50% 100%);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="top"] .rey-offcanvas-contentWrapper {
	clip-path: circle(0% at 50% 0);
	-webkit-clip-path: circle(0% at 50% 0);
}

.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"].--active .rey-offcanvas-contentWrapper {
	clip-path: circle(150% at 0 0);
	-webkit-clip-path: circle(150% at 0 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="right"].--active .rey-offcanvas-contentWrapper {
	clip-path: circle(150% at 100% 0);
	-webkit-clip-path: circle(150% at 100% 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="bottom"].--active .rey-offcanvas-contentWrapper {
	clip-path: circle(150% at 50% 100%);
	-webkit-clip-path: circle(150% at 50% 100%);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"][data-position="top"].--active .rey-offcanvas-contentWrapper {
	clip-path: circle(150% at 50% 0);
	-webkit-clip-path: circle(150% at 50% 0);
}

/* آیتم‌ها هم با stagger ساده fade-up می‌شوند. */
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_clip_corner"].--active .iddd-anim-target {
	animation: iddd-rey-fade-up var(--iddd-anim-dur) var(--iddd-anim-ease) both;
	animation-delay: calc(180ms + var(--idx, 0) * var(--iddd-anim-stagger));
}

/* ───────────────── 4) Spring Pop — bouncy panel arrival ──────────────── */
/* پنل با easing فنری وارد می‌شود: کمی از حد خود رد می‌شود و بعد به جای خود برمی‌گردد. */

.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"] .rey-offcanvas-contentWrapper {
	transition:
		transform var(--transition-duration, 800ms) cubic-bezier(.34, 1.56, .64, 1),
		opacity var(--transition-duration, 800ms) cubic-bezier(.34, 1.56, .64, 1);
	will-change: transform, opacity;
}
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"][data-position="left"] .rey-offcanvas-contentWrapper { transform: translateX(-105%); }
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"][data-position="right"] .rey-offcanvas-contentWrapper { transform: translateX(105%); }
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"][data-position="top"] .rey-offcanvas-contentWrapper { transform: translateY(-105%); }
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"][data-position="bottom"] .rey-offcanvas-contentWrapper { transform: translateY(105%); }
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"].--active .rey-offcanvas-contentWrapper {
	transform: translate(0, 0);
}

/* همراه با stagger ملایم برای آیتم‌های داخل. */
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_spring_pop"].--active .iddd-anim-target {
	animation: iddd-rey-fade-up var(--iddd-anim-dur) cubic-bezier(.34, 1.56, .64, 1) both;
	animation-delay: calc(160ms + var(--idx, 0) * var(--iddd-anim-stagger));
}

/* ───────────────── 5) 3D Door — panel rotates open like a door ───────── */

.rey-offcanvas-wrapper[data-transition="iddd_3d_door"] {
	perspective: 1500px;
	-webkit-perspective: 1500px;
}
.rey-offcanvas-wrapper[data-transition="iddd_3d_door"] .rey-offcanvas-contentWrapper {
	transform: rotateY(-95deg);
	transform-origin: 0% 50%;
	opacity: .3;
	transition:
		transform var(--transition-duration, 800ms) cubic-bezier(.22, .61, .36, 1),
		opacity var(--transition-duration, 800ms) cubic-bezier(.22, .61, .36, 1);
	will-change: transform, opacity;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.rey-offcanvas-wrapper[data-transition="iddd_3d_door"][data-position="right"] .rey-offcanvas-contentWrapper {
	transform: rotateY(95deg);
	transform-origin: 100% 50%;
}
.rey-offcanvas-wrapper[data-transition="iddd_3d_door"][data-position="top"] .rey-offcanvas-contentWrapper {
	transform: rotateX(95deg);
	transform-origin: 50% 0%;
}
.rey-offcanvas-wrapper[data-transition="iddd_3d_door"][data-position="bottom"] .rey-offcanvas-contentWrapper {
	transform: rotateX(-95deg);
	transform-origin: 50% 100%;
}
.rey-offcanvas-wrapper[data-transition="iddd_3d_door"].--active .rey-offcanvas-contentWrapper {
	transform: rotateY(0) rotateX(0);
	opacity: 1;
}

/*
 ╔═══════════════════════════════════════════════════════════════════════╗
 ║         PAGE-LEVEL EFFECTS (body + panel coordinated)                ║
 ║                                                                       ║
 ║ این افکت‌ها به‌جای اینکه فقط روی پنل اثر بگذارند، خودِ صفحهٔ سایت     ║
 ║ (.rey-siteContent) را هم متحرک می‌کنند: scale، blur، tilt، …        ║
 ║                                                                       ║
 ║ روش انتخاب:                                                          ║
 ║   1) :has() برای مرورگرهای مدرن (پشتیبانی ۲۰۲۳+).                    ║
 ║   2) فالبک با کلاس `iddd-trans-active` و `iddd-trans-{name}` که      ║
 ║      JS هنگام باز شدن پنل به <body> اضافه می‌کند.                    ║
 ╚═══════════════════════════════════════════════════════════════════════╝
*/

/* پایهٔ مشترک: انتقال نرم برای .rey-siteContent با هر افکت پیج‌لِوِل ما. */
body.iddd-trans-active .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"][data-transition$="_scale"].--active) .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"][data-transition$="_morph"].--active) .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"][data-transition$="_stack"].--active) .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"][data-transition$="_zoom"].--active) .rey-siteContent {
	transition:
		transform var(--transition-duration, 700ms) cubic-bezier(.22, .61, .36, 1),
		filter var(--transition-duration, 700ms) cubic-bezier(.22, .61, .36, 1),
		border-radius var(--transition-duration, 700ms) cubic-bezier(.22, .61, .36, 1),
		box-shadow var(--transition-duration, 700ms) cubic-bezier(.22, .61, .36, 1);
	will-change: transform, filter;
}


/* ───────────────── 6) Push & Scale — main page shrinks + shifts ──────── */
/* ⭐ افکت اصلی درخواست شده در عکس مرجع.
   صفحهٔ سایت کوچک می‌شود + به سمت مخالف پنل شیفت می‌کند + گوشه‌ها
   گرد می‌شوند تا حس "کارت" پیدا کند، شبیه drawer در iOS/Material. */

.rey-offcanvas-wrapper[data-transition="iddd_push_scale"] {
	--iddd-push-scale: .85;
	--iddd-push-radius: 18px;
	--iddd-push-shift: 75%;
	--iddd-push-shadow: 0 18px 60px rgba(0, 0, 0, .28);
}

body.iddd-trans-iddd_push_scale.iddd-trans-pos-left .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_push_scale"][data-position="left"].--active) .rey-siteContent {
	transform: translate3d(var(--iddd-push-shift, 75%), 0, 0) scale(var(--iddd-push-scale, .85)) !important;
	transform-origin: 100% 50% !important;
	border-radius: var(--iddd-push-radius, 18px) !important;
	box-shadow: var(--iddd-push-shadow, 0 18px 60px rgba(0, 0, 0, .28)) !important;
	overflow: hidden !important;
}

body.iddd-trans-iddd_push_scale.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_push_scale"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(calc(var(--iddd-push-shift, 75%) * -1), 0, 0) scale(var(--iddd-push-scale, .85)) !important;
	transform-origin: 0% 50% !important;
	border-radius: var(--iddd-push-radius, 18px) !important;
	box-shadow: var(--iddd-push-shadow, 0 18px 60px rgba(0, 0, 0, .28)) !important;
	overflow: hidden !important;
}

body.iddd-trans-iddd_push_scale.iddd-trans-pos-top .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_push_scale"][data-position="top"].--active) .rey-siteContent {
	transform: translate3d(0, var(--iddd-push-shift, 75%), 0) scale(var(--iddd-push-scale, .85)) !important;
	transform-origin: 50% 100% !important;
	border-radius: var(--iddd-push-radius, 18px) !important;
	box-shadow: var(--iddd-push-shadow, 0 18px 60px rgba(0, 0, 0, .28)) !important;
	overflow: hidden !important;
}

body.iddd-trans-iddd_push_scale.iddd-trans-pos-bottom .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_push_scale"][data-position="bottom"].--active) .rey-siteContent {
	transform: translate3d(0, calc(var(--iddd-push-shift, 75%) * -1), 0) scale(var(--iddd-push-scale, .85)) !important;
	transform-origin: 50% 0% !important;
	border-radius: var(--iddd-push-radius, 18px) !important;
	box-shadow: var(--iddd-push-shadow, 0 18px 60px rgba(0, 0, 0, .28)) !important;
	overflow: hidden !important;
}

/* ───────────────── 7) Glass Morph — frosted glass page ───────────────── */
/* صفحهٔ سایت تار + رنگی‌تر می‌شود؛ پنل با fade ملایم وارد می‌شود. */

.rey-offcanvas-wrapper[data-transition="iddd_glass_morph"] .rey-offcanvas-contentWrapper {
	box-shadow: 0 8px 60px rgba(0, 0, 0, .25);
}

body.iddd-trans-iddd_glass_morph .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_glass_morph"].--active) .rey-siteContent {
	filter: blur(8px) saturate(1.15) brightness(.92) !important;
	-webkit-filter: blur(8px) saturate(1.15) brightness(.92) !important;
	transform: scale(.98) !important;
}

/* ───────────────── 8) Layered Stack — 3D layered card ────────────────── */
/* صفحه به یک کارت کوچک شیب‌دار پشت پنل تبدیل می‌شود. حس عمق ۳بعدی. */

.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"] {
	perspective: 1800px;
	-webkit-perspective: 1800px;
}

/* perspective روی والد مستقیم .rey-siteContent (یعنی .rey-siteWrapper). */
body.iddd-trans-iddd_layered_stack .rey-siteWrapper,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"].--active) .rey-siteWrapper {
	perspective: 1800px;
	-webkit-perspective: 1800px;
}

body.iddd-trans-iddd_layered_stack.iddd-trans-pos-left .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"][data-position="left"].--active) .rey-siteContent {
	transform: translate3d(60%, 0, 0) scale(.78) rotateY(-14deg) !important;
	transform-origin: 100% 50% !important;
	border-radius: 24px !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35) !important;
	overflow: hidden !important;
}

body.iddd-trans-iddd_layered_stack.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(-60%, 0, 0) scale(.78) rotateY(14deg) !important;
	transform-origin: 0% 50% !important;
	border-radius: 24px !important;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35) !important;
	overflow: hidden !important;
}

/* ───────────────── 9) Tilt Zoom — page leans back on Z axis ──────────── */
/* صفحهٔ سایت کمی به سمت پایین/بالا کج می‌شود و کوچک می‌شود. حس "رفتن به پس‌زمینه". */

body.iddd-trans-iddd_tilt_zoom .rey-siteWrapper,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_tilt_zoom"].--active) .rey-siteWrapper {
	perspective: 1500px;
	-webkit-perspective: 1500px;
}

body.iddd-trans-iddd_tilt_zoom .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_tilt_zoom"].--active) .rey-siteContent {
	transform: scale(.92) rotateX(6deg) translateZ(-30px) !important;
	transform-origin: 50% 100% !important;
	filter: brightness(.85) !important;
	border-radius: 16px !important;
	overflow: hidden !important;
}

/* آیتم‌های داخل پنل با stagger fade-up برای همهٔ افکت‌های Page-level. */
.rey-offcanvas-wrapper[data-transition="iddd_push_scale"] .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_glass_morph"] .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"] .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_tilt_zoom"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
}
.rey-offcanvas-wrapper[data-transition="iddd_push_scale"].--active .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_glass_morph"].--active .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_layered_stack"].--active .iddd-anim-target,
.rey-offcanvas-wrapper[data-transition="iddd_tilt_zoom"].--active .iddd-anim-target {
	animation: iddd-rey-fade-up var(--iddd-anim-dur) var(--iddd-anim-ease) both;
	animation-delay: calc(140ms + var(--idx, 0) * var(--iddd-anim-stagger));
}

/*
 ╔═══════════════════════════════════════════════════════════════════════╗
 ║  CODROPS "Perspective Page View Navigation" — 6 effects               ║
 ║  منبع الهام: tympanus.net/Development/PerspectivePageViewNavigation   ║
 ║                                                                       ║
 ║  نکات:                                                               ║
 ║  ▸ تمام transform های پیج‌لِوِل با `!important` تا با shift پیش‌فرض     ║
 ║    REY تداخل نکنند (specificity REY بالاتر است).                     ║
 ║  ▸ perspective روی .rey-siteWrapper (والد مستقیم .rey-siteContent).  ║
 ║  ▸ هر افکت برای موقعیت طبیعی پنل بهینه است؛ ولی mirror برای موقعیت    ║
 ║    مخالف هم تعریف شده تا با هر data-position کار کند.                ║
 ╚═══════════════════════════════════════════════════════════════════════╝
*/

/* perspective مشترک برای همهٔ افکت‌های Codrops. */
body.iddd-trans-iddd_codrops_airbnb .rey-siteWrapper,
body.iddd-trans-iddd_codrops_moveleft .rey-siteWrapper,
body.iddd-trans-iddd_codrops_rotateleft .rey-siteWrapper,
body.iddd-trans-iddd_codrops_movedown .rey-siteWrapper,
body.iddd-trans-iddd_codrops_rotatetop .rey-siteWrapper,
body.iddd-trans-iddd_codrops_laydown .rey-siteWrapper,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active) .rey-siteWrapper {
	perspective: 1500px;
	-webkit-perspective: 1500px;
}

/* پایهٔ مشترک: .rey-siteContent برای افکت‌های Codrops. */
body[class*="iddd-trans-iddd_codrops_"] .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active) .rey-siteContent {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	will-change: transform;
}

/* پشت‌زمینهٔ تیره روی صفحه هنگام افکت‌های Codrops (پسبک ::after). */
body[class*="iddd-trans-iddd_codrops_"] .rey-siteContent::after,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active) .rey-siteContent::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .25);
	z-index: 999;
	pointer-events: none;
	opacity: 1;
	transition: opacity var(--transition-duration, 700ms) var(--iddd-anim-ease, cubic-bezier(.22, .61, .36, 1));
}

/* ─────────────────────── 10) Airbnb — page tilts to the back-right ─────────────────── */
/* پنل سمت چپ → صفحه به راست هل‌داده می‌شود + کمی به عقب می‌رود + چرخش Y منفی. */
body.iddd-trans-iddd_codrops_airbnb.iddd-trans-pos-left .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_airbnb"][data-position="left"].--active) .rey-siteContent {
	transform: translate3d(100%, 0, -1500px) rotateY(-45deg) !important;
	transform-origin: 50% 50% !important;
}
/* پنل سمت راست → mirror */
body.iddd-trans-iddd_codrops_airbnb.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_airbnb"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(-100%, 0, -1500px) rotateY(45deg) !important;
	transform-origin: 50% 50% !important;
}

/* ─────────────────────── 11) Move Left — page slides + slight rotate ────────────── */
/* پنل سمت راست (طبیعی) → صفحه به چپ می‌رود + چرخش Y مثبت. */
body.iddd-trans-iddd_codrops_moveleft.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_moveleft"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(-50%, 0, -50px) rotateY(45deg) !important;
	transform-origin: 50% 50% !important;
}
/* پنل سمت چپ → mirror (صفحه به راست + rotateY منفی) */
body.iddd-trans-iddd_codrops_moveleft.iddd-trans-pos-left .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_moveleft"][data-position="left"].--active) .rey-siteContent {
	transform: translate3d(50%, 0, -50px) rotateY(-45deg) !important;
	transform-origin: 50% 50% !important;
}

/* ─────────────────────── 12) Rotate Left — deeper rotate with origin ─────────────── */
/* اوریجین در لبهٔ مخالف پنل قرار دارد تا چرخش طبیعی به نظر برسد. */
body.iddd-trans-iddd_codrops_rotateleft.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotateleft"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(-50%, 0, -1800px) rotateY(45deg) !important;
	transform-origin: 0% 50% !important;
}
body.iddd-trans-iddd_codrops_rotateleft.iddd-trans-pos-left .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotateleft"][data-position="left"].--active) .rey-siteContent {
	transform: translate3d(50%, 0, -1800px) rotateY(-45deg) !important;
	transform-origin: 100% 50% !important;
}

/* ─────────────────────── 13) Move Down — page falls down ──────────────────────── */
/* پنل بالا → صفحه به پایین می‌رود (با Z منفی برای حس عمق). */
body.iddd-trans-iddd_codrops_movedown.iddd-trans-pos-top .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_movedown"][data-position="top"].--active) .rey-siteContent {
	transform: translate3d(0, 100%, -1500px) !important;
	transform-origin: 50% 50% !important;
}
/* پنل پایین → mirror (صفحه به بالا) */
body.iddd-trans-iddd_codrops_movedown.iddd-trans-pos-bottom .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_movedown"][data-position="bottom"].--active) .rey-siteContent {
	transform: translate3d(0, -100%, -1500px) !important;
	transform-origin: 50% 50% !important;
}
/* برای پنل left/right هم یک حالت عمومی فراهم می‌کنیم. */
body.iddd-trans-iddd_codrops_movedown.iddd-trans-pos-left .rey-siteContent,
body.iddd-trans-iddd_codrops_movedown.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_movedown"][data-position="left"].--active) .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_movedown"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(0, 100%, -1500px) !important;
	transform-origin: 50% 50% !important;
}

/* ─────────────────────── 14) Rotate Top — page rotates X axis ───────────────────── */
/* پنل پایین → صفحه به سمت بالا چرخش X می‌خورد. */
body.iddd-trans-iddd_codrops_rotatetop.iddd-trans-pos-bottom .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotatetop"][data-position="bottom"].--active) .rey-siteContent {
	transform: translate3d(0, -50%, -1500px) rotateX(-45deg) !important;
	transform-origin: 50% 50% !important;
}
/* پنل بالا → mirror (rotateX مثبت) */
body.iddd-trans-iddd_codrops_rotatetop.iddd-trans-pos-top .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotatetop"][data-position="top"].--active) .rey-siteContent {
	transform: translate3d(0, 50%, -1500px) rotateX(45deg) !important;
	transform-origin: 50% 50% !important;
}
/* فالبک left/right */
body.iddd-trans-iddd_codrops_rotatetop.iddd-trans-pos-left .rey-siteContent,
body.iddd-trans-iddd_codrops_rotatetop.iddd-trans-pos-right .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotatetop"][data-position="left"].--active) .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_rotatetop"][data-position="right"].--active) .rey-siteContent {
	transform: translate3d(0, -50%, -1500px) rotateX(-45deg) !important;
	transform-origin: 50% 50% !important;
}

/* ─────────────────────── 15) Lay Down — page lies flat back ───────────────────── */
/* صفحه به عقب با rotateX(80deg) دراز می‌کشد. اوریجین در پایین صفحه. */
body[class*="iddd-trans-iddd_codrops_laydown"] .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition="iddd_codrops_laydown"].--active) .rey-siteContent {
	transform: translate3d(0, 0, -1500px) rotateX(80deg) !important;
	transform-origin: 50% 150% !important;
}

/* ─── transition smooth برای همهٔ افکت‌های Codrops ─── */
body[class*="iddd-trans-iddd_codrops_"] .rey-siteContent,
body:has(.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active) .rey-siteContent {
	transition:
		transform var(--transition-duration, 700ms) var(--iddd-anim-ease, cubic-bezier(.22, .61, .36, 1)) !important;
}
/* وضعیت "غیرفعال" — صفحه در حالت بازنشسته نباید transform داشته باشد. */
body:not([class*="iddd-trans-iddd_codrops_"]) .rey-siteContent::after {
	display: none;
}

/* ─── stagger داخل پنل برای افکت‌های Codrops ─── */
.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"] .iddd-anim-target {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
}
.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active .iddd-anim-target {
	animation: iddd-rey-fade-up var(--iddd-anim-dur) var(--iddd-anim-ease) both;
	animation-delay: calc(120ms + var(--idx, 0) * var(--iddd-anim-stagger, 40ms));
}

/* ─────────────────────────── Reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.rey-offcanvas-wrapper[data-transition^="iddd_"] .iddd-anim-target,
	.rey-offcanvas-wrapper[data-transition^="iddd_"] .rey-offcanvas-contentWrapper,
	body[class*="iddd-trans-"] .rey-siteContent,
	body[class*="iddd-trans-"] .rey-siteWrapper,
	body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"].--active) .rey-siteContent,
	body:has(.rey-offcanvas-wrapper[data-transition^="iddd_"].--active) .rey-siteWrapper {
		animation: none !important;
		transition: none !important;
		transform: none !important;
		filter: none !important;
		opacity: 1 !important;
		clip-path: none !important;
		-webkit-clip-path: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		perspective: none !important;
		-webkit-perspective: none !important;
	}
	body[class*="iddd-trans-iddd_codrops_"] .rey-siteContent::after,
	body:has(.rey-offcanvas-wrapper[data-transition^="iddd_codrops_"].--active) .rey-siteContent::after {
		display: none !important;
	}
}