/* RedX — طبقة التفاعل الثانية */
@property --fxa{syntax:'<angle>';inherits:false;initial-value:0deg}

/* ---------- مفتاح المظهر: لا تمدد للصندوق إطلاقًا، الحركة داخل الكرة فقط ---------- */
.sg{isolation:isolate;transform:none!important;rotate:none!important}
.sg i{transform-origin:50% 50%;will-change:transform;background:linear-gradient(180deg,#fff7e6,var(--cream));box-shadow:0 4px 14px -4px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.6)}
html[data-theme=light] .sg i{background:linear-gradient(180deg,#3a0d18,var(--cream))}
.sg span svg{transform-origin:50% 50%}
/* سبب التمدد: تموّج النقر كان يأخذ تنسيق أيقونات المفتاح فيصبح عنصرًا داخل الصف ويوسّع الزر */
.sg span.fx-rip{position:absolute!important;display:block;z-index:0;height:auto;flex:none}
.sg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;
  background:conic-gradient(from var(--fxa),transparent 0 62%,rgba(232,199,126,.9) 75%,rgba(210,31,60,.9) 85%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s}
@media (hover:hover){.sg:hover::after{opacity:1;animation:fxSpin 2.4s linear infinite}}
@keyframes fxSpin{to{--fxa:360deg}}

/* انتقال لوني خفيف عند تبديل المظهر (بدون لقطات شاشة ولا تجميد) */
@property --r{syntax:'<length>';inherits:false;initial-value:0px}
.fx-tw{position:fixed;inset:0;z-index:390;pointer-events:none;
  -webkit-mask:radial-gradient(circle at var(--x) var(--y),transparent var(--r),#000 calc(var(--r) + 2px));
  mask:radial-gradient(circle at var(--x) var(--y),transparent var(--r),#000 calc(var(--r) + 2px))}

/* ---------- شريط تقدّم التمرير ---------- */
#fxScroll{position:fixed;inset-block-start:0;inset-inline:0;height:2px;z-index:600;pointer-events:none;opacity:0;transition:opacity .4s}
#fxScroll.on{opacity:1}
#fxScroll::before{content:"";position:absolute;inset:0;transform-origin:right center;transform:scaleX(var(--p,0));
  background:linear-gradient(270deg,var(--red),#ff6b7d 40%,var(--gold));box-shadow:0 0 12px rgba(232,199,126,.6),0 0 3px rgba(210,31,60,.8)}
html[dir=ltr] #fxScroll::before{transform-origin:left center;background:linear-gradient(90deg,var(--red),#ff6b7d 40%,var(--gold))}

/* ---------- مؤشر القائمة المنساب ---------- */
.hdr .nav{position:relative}
.fx-ml{position:absolute;inset-block:0;left:0;right:auto;border-radius:999px;pointer-events:none;z-index:0;opacity:0;
  background:linear-gradient(180deg,rgba(232,199,126,.14),rgba(232,199,126,.05));border:1px solid rgba(232,199,126,.22);
  box-shadow:0 0 18px -6px rgba(232,199,126,.5);transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),opacity .3s}
html[data-theme=light] .fx-ml{background:rgba(154,106,28,.1);border-color:rgba(154,106,28,.25)}
.hdr .nav a{z-index:1}
.hbtns .ibtn,.hbtns .ubtn,#admBtn{transition:translate .35s cubic-bezier(.22,1,.36,1),background .3s,color .3s,border-color .3s}

/* ---------- العنوان الذهبي اللامع ---------- */
.fx-gold{background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#fff3d1 50%,var(--gold) 62%,var(--gold) 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:fxShine 5.5s ease-in-out 1.6s infinite}
html[data-theme=light] .fx-gold{background-image:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#e2b866 50%,var(--gold) 62%,var(--gold) 100%)}
@keyframes fxShine{0%{background-position:100% 0}45%,100%{background-position:-50% 0}}

/* ---------- أرضية شبكية مستقبلية + خط مسح في البطل ---------- */
.fx-floor{position:absolute;inset-inline:-20%;bottom:-2%;height:46%;perspective:520px;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 92%);mask:linear-gradient(to top,#000 0%,rgba(0,0,0,.55) 40%,transparent 92%);opacity:.55}
.fx-floor i{position:absolute;inset:-60% 0 0;transform-origin:50% 100%;
  transform:rotateX(68deg) translate3d(calc(var(--fmx,0)*-60px),0,0) rotateZ(calc(var(--fmx,0)*4deg));transition:transform .9s cubic-bezier(.22,1,.36,1);
  background-image:linear-gradient(rgba(232,199,126,.22) 1px,transparent 1px),linear-gradient(90deg,rgba(232,199,126,.16) 1px,transparent 1px);
  background-size:56px 56px;animation:fxFloor 6s linear infinite}
html[data-theme=light] .fx-floor{opacity:.4}
html[data-theme=light] .fx-floor i{background-image:linear-gradient(rgba(154,106,28,.28) 1px,transparent 1px),linear-gradient(90deg,rgba(154,106,28,.2) 1px,transparent 1px)}
@keyframes fxFloor{to{background-position:0 56px,0 0}}
.fx-scan{position:absolute;inset-inline:0;top:0;height:120px;pointer-events:none;z-index:0;opacity:.5;
  background:linear-gradient(180deg,transparent,rgba(232,199,126,.06) 70%,rgba(232,199,126,.16) 98%,transparent);animation:fxScan 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes fxScan{0%{transform:translateY(-130px);opacity:0}12%{opacity:.5}88%{opacity:.5}100%{transform:translateY(calc(min(100svh,880px)));opacity:0}}

/* ---------- فقاعة قيمة شريط الميزانية ---------- */
.fx-rb{position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-130%) scale(.6);opacity:0;
  padding:5px 10px;border-radius:10px;font:700 12.5px/1 var(--ui);white-space:nowrap;color:var(--ink);background:var(--gold);
  box-shadow:0 8px 22px -8px rgba(232,199,126,.8);transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.fx-rb::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.fx-rb.on{opacity:1;transform:translate(-50%,-135%) scale(1)}
input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 8px rgba(232,199,126,.18),0 0 22px rgba(232,199,126,.7)}
input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 8px rgba(232,199,126,.18),0 0 22px rgba(232,199,126,.7)}

/* ---------- حلقة تركيز متوهّجة للوحة المفاتيح ---------- */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:3px;box-shadow:0 0 0 6px rgba(232,199,126,.16);transition:outline-offset .2s}

/* ---------- لمسات صغيرة ---------- */
.proof{transition:translate .5s cubic-bezier(.22,1,.36,1),box-shadow .5s}
@media (hover:hover){.proof:hover{translate:0 -6px;box-shadow:0 30px 60px -30px rgba(232,199,126,.35)}}
.faq-l details[open] summary{color:var(--gold)}
.faq-l details summary{transition:color .3s}

@media (prefers-reduced-motion:reduce){
  .fx-floor i,.fx-scan,.fx-gold,.sg:hover::after{animation:none!important}
  .fx-scan{display:none}
}
@media (max-width:760px){.fx-floor{height:34%;opacity:.4}.fx-scan{display:none}}