/* ======================================================================
   سابق وجاوب — طبقة الحركة والتفاعل (أنيميشن + تأثيرات الماوس + ترانزيشن)
   ====================================================================== */

/* ---------- ترانزيشن الدخول/الخروج بين الصفحات ---------- */
body{
  animation: pageIn .55s cubic-bezier(.22,.8,.32,1) both;
}
@keyframes pageIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
body.page-leave{
  opacity:0;
  transform:translateY(-8px) scale(.99);
  transition:opacity .32s ease, transform .32s ease;
}

/* ---------- إظهار العناصر عند التمرير (Scroll Reveal) ---------- */
.reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);
  will-change:transform,opacity;
}
.reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- ميل ثلاثي الأبعاد عند تمرير الماوس فوق البطاقات ---------- */
.tilt-el{
  transition:transform .5s cubic-bezier(.22,.8,.32,1), box-shadow .35s ease;
  transform-style:preserve-3d;
  will-change:transform;
}
.tilt-el.tilting{
  transition:transform .08s linear;
}
.card.tilt-el:hover,
.taxo-node.tilt-el:hover,
.admin-tile.tilt-el:hover,
.sec-item.tilt-el:hover,
.contact-card.tilt-el:hover,
.coin-panel.tilt-el:hover{
  box-shadow:0 22px 40px -18px rgba(36,21,54,.4);
}
.card.dark.tilt-el:hover{
  box-shadow:0 22px 40px -14px rgba(0,0,0,.55);
}

/* ---------- توهج يتبع مؤشر الماوس ---------- */
.cursor-glow{
  position:fixed;
  top:0; left:0;
  width:380px; height:380px;
  border-radius:50%;
  pointer-events:none;
  z-index:55;
  background:radial-gradient(circle, rgba(244,180,0,.16), rgba(255,93,93,.05) 55%, rgba(244,180,0,0) 72%);
  transform:translate(-50%,-50%);
  opacity:0;
  transition:opacity .4s ease;
  will-change:transform;
}
.cursor-glow.active{ opacity:1; }

/* ---------- أزرار: تأثير موجة عند الضغط فقط ---------- */
.btn{ position:relative; }
.btn.rippling{ overflow:hidden; }
.btn .ripple{
  position:absolute;
  border-radius:50%;
  transform:scale(0);
  background:rgba(255,255,255,.55);
  pointer-events:none;
  animation:rippleAnim .6s ease-out forwards;
}
.card.dark .btn .ripple,
.btn-ghost .ripple{ background:rgba(255,255,255,.4); }
@keyframes rippleAnim{
  to{ transform:scale(2.6); opacity:0; }
}

/* ---------- أرقام الإحصائيات: عداد تصاعدي ---------- */
.stat b{ display:inline-block; }
.stat b.counting::after{ content:""; }

/* ---------- عناصر عائمة تخص الموضوع (عملات / كأس / علامة استفهام) — عبر الصفحة كلها ---------- */
.floaty-layer.site-wide{
  position:fixed;
  inset:0;
  overflow:visible;
  pointer-events:none;
  z-index:2;
}
.hero .hero-inner, .page-hero .wrap{ position:relative; z-index:3; }
.floaty-icon{
  position:absolute;
  transition:transform .25s ease-out;
  will-change:transform;
}
.floaty-icon i{
  display:block;
  animation:floatBob var(--dur,6s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
  color:var(--fc, var(--gold-400));
  opacity:var(--op,.22);
  font-size:var(--fs,28px);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
.floaty-icon.coin i{
  animation:floatBob var(--dur,6s) ease-in-out infinite, coinFlip 2.6s linear infinite;
}
@keyframes floatBob{
  0%,100%{ transform:translateY(0) rotate(var(--r0,0deg)); }
  50%{ transform:translateY(-16px) rotate(var(--r1,6deg)); }
}
@keyframes coinFlip{
  0%{ transform:scaleX(1); }
  50%{ transform:scaleX(-1); }
  100%{ transform:scaleX(1); }
}
@media(max-width:980px){
  .floaty-layer{ display:none; }
}

/* ---------- خط المراحل (steps): يرسم نفسه عند الظهور ---------- */
.step-line{
  transform-origin:right center;
  transform:scaleX(0);
  transition:transform .8s cubic-bezier(.4,0,.2,1) .15s;
}
.step.visible .step-line{ transform:scaleX(1); }

/* ---------- سهم شجرة المحتوى: نبضة اتجاه مستمرة ---------- */
.taxo-arrow i{
  display:inline-block;
  animation:arrowPulse 1.7s ease-in-out infinite;
}
@keyframes arrowPulse{
  0%,100%{ transform:translateX(0); opacity:.55; }
  50%{ transform:translateX(-6px); opacity:1; }
}
@media(max-width:760px){
  .taxo-arrow i{ animation:arrowPulseV 1.7s ease-in-out infinite; }
}
@keyframes arrowPulseV{
  0%,100%{ transform:translateY(0); opacity:.55; }
  50%{ transform:translateY(6px); opacity:1; }
}

/* ---------- تكبير هادئ لشعار الهيدر عند التحميل ---------- */
.hero-logo, .brand-logo{
  animation:logoPop .6s cubic-bezier(.22,.9,.32,1) both;
}
@keyframes logoPop{
  from{ transform:scale(.7); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

/* ---------- إيقاف الحركة لمن يفضّل تقليلها ---------- */
@media(prefers-reduced-motion: reduce){
  body{ animation:none; }
  body.page-leave{ transition:none; opacity:1; transform:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  .floaty-icon i, .taxo-arrow i, .hero-logo, .brand-logo{ animation:none; }
  .cursor-glow{ display:none; }
}