/* =====================================================================
   fx.css — محرّك الحركة المشترك (الصفحة الرئيسية + القالب الفاخر + تأثيرات القوالب)
   مأخوذ من تصميم «بن عبدالله» ومُعمَّم ليتبع لون كل عميل (--accent).
   كل الحركات المستمرة transform/opacity فقط، ولا يوجد filter:blur على طبقات متحركة.
   html.lite = نسخة أخف (جوال / جهاز ضعيف / مستوى حركة «هادئ»)
   html.fx-none = بدون حركة (اختيار العميل)
   ===================================================================== */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
body{
  --a1:var(--accent);
  --a2:color-mix(in srgb,var(--accent) 42%,#fff);
  --a3:color-mix(in srgb,var(--accent) 70%,#000);
  --a-ink:color-mix(in srgb,var(--accent) 45%,#000);
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.175,.885,.32,1.275);
  --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
}
.fx-skip{position:fixed;top:-80px;inset-inline-start:12px;z-index:100001;background:var(--a1);color:var(--on);padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;transition:top .3s}
.fx-skip:focus{top:calc(12px + var(--safe-top))}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ---------- شاشة البداية ---------- */
.fx-splash{position:fixed;inset:0;z-index:100000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:radial-gradient(600px 400px at 50% 40%,color-mix(in srgb,var(--a1) 22%,transparent),transparent 70%),var(--bg);animation:fxSplashOut .7s var(--ease) 1.25s forwards}
html.no-splash .fx-splash,html.fx-none .fx-splash{display:none}
@keyframes fxSplashOut{to{opacity:0;transform:scale(1.06);visibility:hidden}}
.fx-splash-av{position:relative;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;animation:fxPop .9s var(--spring) both}
.fx-splash-av::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(from 0deg,var(--a1),var(--a2),var(--a3),#fff,var(--a1));animation:fxSpin 2.4s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.fx-splash-av img,.fx-splash-av b{width:112px;height:112px;border-radius:50%;object-fit:cover;object-position:center top;box-shadow:0 0 44px color-mix(in srgb,var(--a1) 50%,transparent);display:grid;place-items:center;background:color-mix(in srgb,var(--a1) 18%,var(--bg));color:var(--a2);font:700 3rem 'Noto Serif Arabic',serif}
.fx-splash-name{font-family:'Noto Serif Arabic',serif;font-weight:700;font-size:2rem;background:linear-gradient(90deg,var(--l1),var(--a1));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxRise .8s var(--ease) .3s both;text-align:center;padding:0 1rem}
.fx-splash-bar{width:140px;height:3px;border-radius:4px;background:var(--sep);overflow:hidden;animation:fxRise .8s var(--ease) .4s both}
.fx-splash-bar i{display:block;height:100%;transform-origin:right;background:linear-gradient(90deg,var(--a1),var(--a2),var(--a3));animation:fxLoad 1.05s var(--ease) forwards}
@keyframes fxSpin{to{transform:rotate(360deg)}}
@keyframes fxPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes fxLoad{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fxRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- الخلفية الحيّة ---------- */
.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:var(--bg);contain:strict;transition:background .4s}
.amb-img{position:absolute;inset:0;background-position:center;background-size:cover;opacity:.10;mix-blend-mode:luminosity}
.amb-au,.amb-neb{position:absolute;border-radius:50%;will-change:transform}
.amb-au{opacity:.4}
.au1{width:560px;height:560px;background:radial-gradient(circle,var(--a1),transparent 68%);top:-220px;left:-160px;animation:fxAu1 22s ease-in-out infinite}
.au2{width:520px;height:520px;background:radial-gradient(circle,var(--a3),transparent 68%);top:-160px;right:-180px;animation:fxAu2 26s ease-in-out infinite}
.au3{width:620px;height:620px;background:radial-gradient(circle,var(--a2),transparent 68%);bottom:-280px;left:25%;animation:fxAu3 30s ease-in-out infinite;opacity:.24}
html:not(.dark) .amb-au{opacity:.42}html:not(.dark) .au3{opacity:.3}
@keyframes fxAu1{50%{transform:translate3d(90px,100px,0) scale(1.08)}}
@keyframes fxAu2{50%{transform:translate3d(-90px,120px,0) scale(1.06)}}
@keyframes fxAu3{50%{transform:translate3d(-120px,-70px,0) scale(1.1)}}
.amb-beam{position:absolute;top:-25%;width:34%;height:150%;opacity:.45;background:linear-gradient(to bottom,color-mix(in srgb,var(--a2) 20%,transparent),transparent 72%);animation:fxBeam 16s ease-in-out infinite}
.bm1{left:18%;--r:16deg}.bm2{right:14%;--r:-18deg;animation-duration:20s;animation-delay:-6s}
html:not(.dark) .amb-beam{opacity:.25}
@keyframes fxBeam{0%,100%{transform:rotate(var(--r)) scaleX(1);opacity:.3}50%{transform:rotate(calc(var(--r) + 6deg)) scaleX(1.25);opacity:.55}}
.amb-grain{position:absolute;inset:0;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html:not(.dark) .amb-grain{opacity:.05;mix-blend-mode:multiply}
.amb-neb{opacity:.5;animation:fxNeb var(--dur,26s) ease-in-out var(--delay,0s) infinite}
.n1{width:360px;height:360px;top:-100px;left:-80px;background:radial-gradient(circle at 30% 30%,color-mix(in srgb,var(--a1) 90%,transparent),transparent 70%)}
.n2{width:300px;height:300px;top:18%;right:-90px;background:radial-gradient(circle at 70% 30%,color-mix(in srgb,var(--a3) 85%,transparent),transparent 70%);--dur:32s;--delay:-8s}
.n3{width:420px;height:420px;bottom:-130px;left:15%;background:radial-gradient(circle,color-mix(in srgb,var(--a2) 70%,transparent),transparent 70%);--dur:38s;--delay:-16s}
.n4{width:240px;height:240px;top:48%;left:36%;background:radial-gradient(circle,color-mix(in srgb,var(--a1) 60%,transparent),transparent 70%);--dur:22s;--delay:-4s;opacity:.4}
.n5{width:200px;height:200px;top:70%;right:10%;background:radial-gradient(circle,color-mix(in srgb,var(--a2) 55%,transparent),transparent 70%);--dur:28s;--delay:-12s}
@keyframes fxNeb{25%{transform:translate3d(70px,-50px,0) scale(1.12)}50%{transform:translate3d(-40px,60px,0) scale(.94)}75%{transform:translate3d(50px,35px,0) scale(1.08)}}
html:not(.dark) .amb-neb{opacity:.36}
.amb-dots{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb,var(--a1) 24%,transparent) 1px,transparent 1.4px);background-size:42px 42px;opacity:.45;-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000,transparent 68%);mask-image:radial-gradient(ellipse at 50% 45%,#000,transparent 68%)}
.amb-br{position:absolute;left:50%;top:50%;border-radius:50%;border:1px solid color-mix(in srgb,var(--a1) 22%,transparent);transform:translate(-50%,-50%);opacity:.3;animation:fxBreathe var(--dur,10s) ease-in-out var(--delay,0s) infinite;will-change:transform}
.b1{width:340px;height:340px;--dur:9s}.b2{width:500px;height:500px;--dur:12s;--delay:-4s}.b3{width:680px;height:680px;--dur:15s;--delay:-8s}
@keyframes fxBreathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.22}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.7}}
.amb-streaks{position:absolute;inset:0;overflow:hidden}
.amb-st{position:absolute;height:2px;width:260px;border-radius:3px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--a2) 95%,transparent),color-mix(in srgb,var(--a1) 70%,transparent),transparent);box-shadow:0 0 10px color-mix(in srgb,var(--a1) 60%,transparent);opacity:0;animation:fxStreak var(--dur,11s) ease-in var(--delay,0s) infinite}
@keyframes fxStreak{0%{opacity:0;transform:translate3d(-30vw,0,0) rotate(var(--angle,12deg)) scaleX(.4)}8%,30%{opacity:1}42%,100%{opacity:0;transform:translate3d(130vw,0,0) rotate(var(--angle,12deg)) scaleX(1.6)}}
.st1{top:16%;--angle:8deg;--dur:12s;--delay:2s}.st2{top:40%;--angle:-6deg;--dur:14s;--delay:7s}.st3{top:62%;--angle:14deg;--dur:16s;--delay:12s}.st4{top:80%;--angle:-10deg;--dur:13s;--delay:4s}
.fx-dust{position:absolute;left:var(--x);bottom:-20px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;background:radial-gradient(circle,#fff,var(--a2) 38%,var(--a1) 72%,transparent);box-shadow:0 0 8px color-mix(in srgb,var(--a1) 90%,transparent);animation:fxDust var(--dur) ease-in var(--delay) infinite}
@keyframes fxDust{0%{opacity:0;transform:translate3d(0,0,0) scale(1)}12%{opacity:.95}50%{transform:translate3d(var(--sway),-55vh,0) scale(.85)}100%{opacity:0;transform:translate3d(calc(var(--sway)*-.6),-108vh,0) scale(.2)}}
.fx-tw{position:absolute;color:var(--a2);line-height:1;opacity:0;animation:fxTwinkle var(--dur) ease-in-out var(--delay) infinite}
html:not(.dark) .fx-tw{color:var(--a1)}
@keyframes fxTwinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.9;transform:scale(1) rotate(45deg)}}
.amb-glow{position:absolute;top:0;left:0;width:480px;height:480px;margin:-240px 0 0 -240px;border-radius:50%;opacity:0;will-change:transform;background:radial-gradient(circle,color-mix(in srgb,var(--a1) 20%,transparent),color-mix(in srgb,var(--a3) 8%,transparent) 45%,transparent 68%);transition:opacity .5s}
.amb-glow.on{opacity:1}
/* طبقة خفيفة لباقي القوالب في مستوى «كامل» */
.amb-mini{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}

/* ---------- شريط التقدم + عناصر عائمة ---------- */
.fx-prog{position:fixed;top:0;left:0;right:0;height:3px;transform:scaleX(0);transform-origin:right;background:linear-gradient(90deg,var(--a3),var(--a1),var(--a2));z-index:9999;box-shadow:0 0 14px color-mix(in srgb,var(--a1) 70%,transparent);pointer-events:none}
.fx-top{position:fixed;bottom:calc(24px + var(--safe-bottom));inset-inline-end:22px;width:48px;height:48px;border-radius:16px;background:linear-gradient(135deg,var(--a1),var(--a3));color:var(--on);border:none;display:flex;align-items:center;justify-content:center;font-size:1.05rem;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity .4s,visibility .4s,transform .4s var(--spring);z-index:100;box-shadow:0 12px 30px color-mix(in srgb,var(--a1) 45%,transparent)}
.fx-top.visible{opacity:1;visibility:visible;transform:none}
.fx-top:hover{transform:translateY(-4px) scale(1.06)}.fx-top:active{transform:scale(.92)}
.fx-cta{position:fixed;left:50%;bottom:calc(18px + var(--safe-bottom));z-index:90;translate:-50% 120px;opacity:0;visibility:hidden;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px 0 18px;border-radius:40px;text-decoration:none;font-weight:800;font-size:.9rem;color:var(--on);background:linear-gradient(135deg,var(--a2),var(--a1) 55%,var(--a3));box-shadow:0 14px 34px color-mix(in srgb,var(--a1) 45%,transparent);transition:translate .55s var(--spring),opacity .4s,visibility .4s,transform .3s var(--spring);white-space:nowrap}
.fx-cta.show{translate:-50% 0;opacity:1;visibility:visible}
.fx-cta:hover{transform:translateY(-3px) scale(1.03)}.fx-cta:active{transform:scale(.96)}
.fx-cta i{font-size:1.25rem;animation:fxPulse 2.2s ease-in-out infinite}
@keyframes fxPulse{50%{transform:scale(1.1) rotate(-4deg)}}
.fx-ring{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:1.5px solid color-mix(in srgb,var(--a1) 85%,transparent);border-radius:50%;pointer-events:none;z-index:99995;opacity:0;will-change:transform;transition:opacity .3s,width .35s var(--spring),height .35s var(--spring),margin .35s var(--spring),background .3s}
.fx-ring.on{opacity:1}
.fx-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:color-mix(in srgb,var(--a1) 12%,transparent)}
.fx-ring.down{width:26px;height:26px;margin:-13px 0 0 -13px;background:color-mix(in srgb,var(--a1) 35%,transparent)}
.fx-ripple{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.3);transform:scale(0);animation:fxRipple .7s ease-out forwards}
@keyframes fxRipple{to{transform:scale(1);opacity:0}}
.fx-layer{position:fixed;inset:0;pointer-events:none;z-index:99990;overflow:hidden}
.fx-confetti{position:absolute;width:9px;height:14px;border-radius:2px}
.fx-spark{position:absolute;width:8px;height:8px;border-radius:50%}

/* ---------- الشريط المتحرك ---------- */
.tk{direction:ltr;overflow:hidden;padding:12px 0;border-block:1px solid var(--sep);background:color-mix(in srgb,var(--l1) 4%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.tk-track{display:flex;width:max-content;animation:fxTicker 34s linear infinite}
.tk-item{direction:rtl;display:inline-flex;align-items:center;gap:22px;padding-inline:11px;font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:.95rem;color:var(--l2);white-space:nowrap}
.tk-item i{color:var(--a1);font-size:.7rem}
@keyframes fxTicker{to{transform:translateX(-50%)}}

/* ---------- الكتابة المتحركة ---------- */
.fx-caret{display:inline-block;width:2px;height:1.2em;background:currentColor;animation:fxCaret 1s steps(2) infinite;vertical-align:middle}
@keyframes fxCaret{50%{opacity:0}}

/* ---------- الظهور التدريجي ---------- */
html.fxjs:not(.fx-none) .rv:not(.in),html.fxjs:not(.fx-none) .rv-blur:not(.in){opacity:0;animation:fxSafety .01s 4s forwards}
html.fxjs .rv.in{animation:fxRevealIn .8s var(--ease) var(--d,0s) both}
html.fxjs .rv-blur.in{animation:fxRevealPop 1s var(--ease) var(--d,0s) both}
@keyframes fxSafety{to{opacity:1}}
@keyframes fxRevealIn{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
@keyframes fxRevealPop{from{opacity:0;scale:.9}to{opacity:1;scale:1}}

/* ---------- حركة دخول عامة لباقي القوالب (CSS فقط، بدون وميض) ---------- */
body.fx-soft main>*,body.fx-full main>*,body.fx-soft nav[aria-label="الروابط"]>a,body.fx-full nav[aria-label="الروابط"]>a{animation:fxRevealIn .7s var(--ease) both}
body:is(.fx-soft,.fx-full) main>:nth-child(2){animation-delay:.06s}body:is(.fx-soft,.fx-full) main>:nth-child(3){animation-delay:.12s}body:is(.fx-soft,.fx-full) main>:nth-child(4){animation-delay:.18s}body:is(.fx-soft,.fx-full) main>:nth-child(5){animation-delay:.24s}body:is(.fx-soft,.fx-full) main>:nth-child(n+6){animation-delay:.3s}
body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(1){animation-delay:.2s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(2){animation-delay:.26s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(3){animation-delay:.32s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(4){animation-delay:.38s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(5){animation-delay:.44s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(6){animation-delay:.5s}body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:nth-child(n+7){animation-delay:.56s}
/* لمعة عند المرور على الروابط */
body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a{position:relative;overflow:hidden;isolation:isolate}
body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a::after{content:'';position:absolute;top:0;bottom:0;width:55%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);transform:translateX(-260%) skewX(-18deg);pointer-events:none}
body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a:hover::after{animation:fxShine .9s}
@keyframes fxShine{to{transform:translateX(320%) skewX(-18deg)}}
body.fx-full [data-tilt]{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--spring)}

/* ---------- إيقاف الحركة خارج الشاشة / عند إخفاء التبويب ---------- */
.is-off,.is-off *,.is-off::before,.is-off::after,html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}

/* ---------- النسخة الخفيفة ---------- */
html.lite .amb-beam,html.lite .n4,html.lite .n5,html.lite .b2,html.lite .b3,html.lite .st3,html.lite .st4,html.lite .amb-grain{display:none}
html.lite .amb-au{opacity:.32}html.lite .amb-neb{opacity:.4}
html.lite .fx-splash{animation-duration:.5s;animation-delay:1s}html.lite .fx-splash-bar i{animation-duration:.85s}

/* ---------- بدون حركة (اختيار العميل) ---------- */
html.fx-none .amb *,html.fx-none .tk-track,html.fx-none .fx-caret{animation:none!important}
html.fx-none .amb-st,html.fx-none .fx-dust,html.fx-none .fx-tw,html.fx-none .amb-glow,html.fx-none .fx-ring{display:none}

@media (prefers-reduced-motion:reduce){
  .amb *,.tk-track,.fx-caret,.fx-cta i{animation:none!important}
  html.fxjs .rv:not(.in),html.fxjs .rv-blur:not(.in){opacity:1}
  .fx-splash,.fx-dust,.fx-tw,.amb-beam,.amb-glow,.amb-neb,.amb-br,.amb-st,.fx-ring{display:none}
  body:is(.fx-soft,.fx-full) main>*,body:is(.fx-soft,.fx-full) nav[aria-label="الروابط"]>a{animation:none}
}