/*!
 * Beeta Grow — طبقة المؤثرات البصرية
 * ظهور عند التمرير · تفاعل الماوس · حركة خفيفة في الخلفية
 *
 * الحركة هنا مقصود إنها هادئة. الملف ده لوحده ما بيغيّرش أي تصميم:
 * كل قواعد الظهور مربوطة بكلاسات (.bg-rv / .bg-fx-card) بيضيفها bg-effects.js،
 * فلو الجافاسكربت ما اشتغلش الموقع يفضل زي ما هو بالظبط.
 * أسماء الـkeyframes كلها ببادئة bgfx- عشان ما تتعارضش مع اللي في bg-global.css.
 */

:root{
	--bgfx-ease:cubic-bezier(.22,.61,.36,1);
	--bgfx-gold:198,156,109;   /* #C69C6D */
	--bgfx-ink:12,12,71;       /* #0C0C47 */
}

/* =========================================================================
   1) ظهور العناصر عند التمرير
   الجافاسكربت بيخفي بس العناصر اللي تحت حدود الشاشة، فمفيش رمشة تحميل.
   ========================================================================= */
.bg-rv{opacity:0;transform:translateY(14px)}
.bg-rv-in{
	opacity:1;transform:none;
	transition:opacity .55s var(--bgfx-ease),transform .55s var(--bgfx-ease);
	transition-delay:var(--bgfx-delay,0ms);
}

/* =========================================================================
   2) تفاعل الماوس
   ========================================================================= */

/* الكروت — .bg-fx-card بيضيفها الجافاسكربت لأي عنصر داخل شبكة وله سطح ولون.
   كل القواعد دي ملفوفة بـ :where() يعني وزنها صفر: أي كرت عنده حركة hover
   خاصة بيه في bg-global.css (فيه -1px و -2px و -3px وحركة أفقية كمان) بيكسب
   وبيفضل زي ما هو. القيم اللي هنا بتشتغل بس على الكروت اللي مالهاش حركة أصلاً. */
:where(.bg-fx-card){transition:transform .3s var(--bgfx-ease),box-shadow .3s var(--bgfx-ease),border-color .3s var(--bgfx-ease)}
:where(.bg-fx-card [class*="-icon"]){transition:transform .35s var(--bgfx-ease)}

@media (hover:hover) and (pointer:fine){
	:where(.bg-fx-card):hover{
		transform:translateY(-4px);
		box-shadow:0 14px 34px rgba(var(--bgfx-ink),.07),0 2px 8px rgba(var(--bgfx-ink),.04);
	}
	:where(.bg-fx-card:hover [class*="-icon"]){transform:scale(1.08)}

	/* الأزرار — لمعة بتعدي مرة واحدة */
	.bg-btn,.bg-btn-primary,.bg-btn-ghost,[class*="-cta-btn"],.wpforms-submit{position:relative;overflow:hidden}
	.bg-btn::after,.bg-btn-primary::after,.bg-btn-ghost::after,[class*="-cta-btn"]::after,.wpforms-submit::after{
		content:"";position:absolute;top:0;bottom:0;width:45%;
		background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);
		transform:translateX(-170%) skewX(-18deg);
		pointer-events:none;
	}
	.bg-btn:hover::after,.bg-btn-primary:hover::after,.bg-btn-ghost:hover::after,
	[class*="-cta-btn"]:hover::after,.wpforms-submit:hover::after{
		transform:translateX(330%) skewX(-18deg);
		transition:transform .75s var(--bgfx-ease);
	}

	/* روابط القائمة — خط بيكبر من المنتصف.
	   ::after محجوز للرابط النشط في bg-global.css، فبنستخدم ::before. */
	.bg-nav-links a:not(.active)::before{
		content:"";position:absolute;bottom:-10px;left:50%;right:50%;height:2px;border-radius:2px;
		background:linear-gradient(90deg,rgba(var(--bgfx-ink),.55),rgba(var(--bgfx-gold),1));
		transition:left .28s var(--bgfx-ease),right .28s var(--bgfx-ease);
		pointer-events:none;
	}
	.bg-nav-links a:not(.active):hover::before{left:0;right:0}
}

/* علامة + في الأسئلة الشائعة تلف بنعومة بدل ما تقلب فجأة */
.bg-faq summary::after{transition:transform .3s var(--bgfx-ease),background .25s ease,color .25s ease}

/* =========================================================================
   3) أجواء الخلفية
   بنحرّك الطبقات الموجودة أصلاً (.bg-pattern-* والكرات) بدل ما نضيف طبقات
   جديدة — كده مفيش أي مخاطرة على ترتيب العناصر فوق بعض.
   الحركة كلها transform عشان تفضل على كارت الشاشة ومتأثرش على الأداء.
   ========================================================================= */
@keyframes bgfx-drift{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-16px,10px,0)}}
@keyframes bgfx-drift-b{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(14px,-12px,0)}}
@keyframes bgfx-breathe{0%,100%{opacity:.8}50%{opacity:1}}

.bg-pattern-rings::before{animation:bgfx-drift 26s ease-in-out infinite,bgfx-breathe 15s ease-in-out infinite}
.bg-pattern-wave::before {animation:bgfx-drift-b 32s ease-in-out infinite,bgfx-breathe 19s ease-in-out infinite}
.bg-pattern-glow::before {animation:bgfx-drift 38s ease-in-out infinite}

/* النقط والشبكة بتتكرر، فبنوسّع الطبقة شوية عشان الإزاحة ما تكشفش حافة */
.bg-pattern-dots::before{inset:-60px;animation:bgfx-drift 44s ease-in-out infinite}
.bg-pattern-grid::before{inset:-60px;animation:bgfx-drift-b 56s ease-in-out infinite}

/* الكرات الضوئية — نفس الحركة بس أبطأ، أنسب للخلفية الفاتحة */
.bg-orb-1{animation:bg-float 20s ease-in-out infinite}
.bg-orb-2{animation:bg-float 26s ease-in-out infinite reverse}

/* حبيبات خفيفة جداً تكسر انبساط لون الخلفية الكريمي */
body::after{
	content:"";position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:.03;
	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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size:140px 140px;
}

/* =========================================================================
   4) تخفيف الحمل على الموبايل + احترام إعداد تقليل الحركة
   ========================================================================= */
@media (max-width:768px){
	.bg-pattern-dots::before,.bg-pattern-grid::before,
	.bg-pattern-rings::before,.bg-pattern-wave::before,.bg-pattern-glow::before{animation:none}
	body::after{display:none}
}

@media (prefers-reduced-motion:reduce){
	.bg-rv,.bg-rv-in{opacity:1!important;transform:none!important;transition:none!important}
	.bg-fx-card,.bg-fx-card:hover{transform:none!important}
	.bg-fx-card:hover [class*="-icon"]{transform:none!important}
	.bg-faq summary::after{transition:none!important}
	.bg-pattern-dots::before,.bg-pattern-grid::before,.bg-pattern-rings::before,
	.bg-pattern-wave::before,.bg-pattern-glow::before,
	.bg-orb,.bg-orb-1,.bg-orb-2{animation:none!important}
	.bg-btn::after,.bg-btn-primary::after,.bg-btn-ghost::after,
	[class*="-cta-btn"]::after,.wpforms-submit::after{display:none!important}
	.bg-nav-links a:not(.active)::before{display:none!important}
}