/* ======================================================================
   طبقة الحركة: ظهور ثلاثي الأبعاد عند التمرير، كلمات العناوين، ميلان
   الكروت مع الماوس، شريط تقدّم القراءة، ومشهد الواجهة الرئيسية.
   كل حالة إخفاء مشروطة بـ html.mo-live (يضيفها motion.js بعد أن يعمل)،
   فبدون جافاسكربت أو مع "تقليل الحركة" يظهر كل شيء كما هو تماماً.
   ====================================================================== */
:root {
  --m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --m-dir: 1; /* اتجاه القراءة: من اليمين في العربي */
}
html[dir="ltr"] {
  --m-dir: -1;
}
html.mo-live {
  overflow-x: clip;
}

/* قبل أن يعمل السكربت: نخفي أول الشاشة حتى لا يظهر ثم يختفي ثم يتحرك،
   مع شبكة أمان تُظهره وحدها لو تأخّر السكربت أو تعطّل */
html.mo:not(.mo-hero):not(.mo-late) :is(.hero-copy, .hero-art) > *,
html.mo:not(.mo-ready):not(.mo-late) :is(.pg-top, .pg-hero, .pg-404) > .wrap {
  opacity: 0;
  animation: moShow 0.01s linear 2.4s forwards;
}
@keyframes moShow {
  to { opacity: 1; }
}

/* ---------- الظهور عند التمرير ---------- */
html.mo-live .rv {
  animation: none;
}
html.mo-live .rv:not(.m-done) {
  transition: opacity 0.9s var(--m-ease), transform 1.25s var(--m-ease),
    clip-path 1.3s var(--m-ease) !important;
  transition-delay: calc(var(--mi, 0) * 90ms) !important;
}
html.mo-live .rv.m-done {
  transition-delay: 0s !important;
}
/* الافتراضي: يصعد من العمق مع ميلان للخلف */
html.mo-live .rv:not(.m-in) {
  opacity: 0;
  transform: perspective(1100px) translate3d(0, 70px, 0) rotateX(-16deg);
  transform-origin: 50% 0;
}
html.mo-live .rv[data-m="head"]:not(.m-in) {
  transform: translate3d(0, 26px, 0);
}
/* كرت ينقلب واقفاً من الأرض */
html.mo-live .rv[data-m="flip"]:not(.m-in) {
  transform: perspective(900px) translate3d(0, 90px, -80px) rotateX(-38deg) scale(0.9);
  transform-origin: 50% 100%;
}
/* صف يدور كباب مفصّله على جهة بداية القراءة */
html.mo-live .rv[data-m="swing"]:not(.m-in) {
  transform: perspective(1200px) translate3d(calc(var(--m-dir) * 90px), 0, -60px)
    rotateY(calc(var(--m-dir) * 26deg));
  transform-origin: 100% 50%;
}
html[dir="ltr"].mo-live .rv[data-m="swing"]:not(.m-in) {
  transform-origin: 0 50%;
}
/* يقفز من العمق */
html.mo-live .rv[data-m="pop"]:not(.m-in) {
  transform: perspective(800px) translate3d(0, 40px, -220px) rotateX(30deg) scale(0.75);
}
/* صورة تنفتح من نافذة صغيرة وتهدأ من التكبير */
html.mo-live .rv[data-m="clip"]:not(.m-in) {
  transform: perspective(1200px) translate3d(0, 60px, 0) rotateX(14deg) scale(0.92);
  clip-path: inset(18% 12% 18% 12% round 28px);
}
html.mo-live .rv[data-m="clip"].m-in:not(.m-done) {
  clip-path: inset(0% 0% 0% 0% round 18px);
}
html.mo-live .rv[data-m="clip"]:not(.m-in) img {
  transform: scale(1.35);
}
html.mo-live .rv[data-m="clip"]:not(.m-done) img {
  transition: transform 1.7s var(--m-ease) calc(var(--mi, 0) * 90ms) !important;
}

/* ---------- كلمات العناوين: كل كلمة تنقلب واقفة (العربي بالكلمة لا بالحرف) ---------- */
.mw {
  display: inline-block;
  perspective: 700px;
}
.mw-i {
  display: inline-block;
  transform-origin: 50% 90%;
}
html.mo-live .rv:not(.m-in) .mw-i {
  opacity: 0;
  transform: translate3d(0, 0.5em, 0) rotateX(-88deg);
}
html.mo-live .rv:not(.m-done) .mw-i {
  transition: opacity 0.6s var(--m-ease), transform 1s var(--m-ease);
  transition-delay: calc(var(--mi, 0) * 90ms + var(--wi, 0) * 55ms + 120ms);
}

/* ---------- ميلان الكروت مع الماوس + لمعة تتبع المؤشر ---------- */
html.mo-live .m-tilt.m-hot {
  transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
    translate3d(0, -6px, 0);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.45s var(--ease),
    background 0.4s var(--ease), border-color 0.3s var(--ease);
}
.m-glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.24), transparent 42%);
  mix-blend-mode: overlay;
}
.m-hot > .m-glare {
  opacity: 1;
}
.m-glow {
  isolation: isolate;
}
.m-glow > .m-glare {
  z-index: -1;
  mix-blend-mode: normal;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(244, 0, 2, 0.1), transparent 55%);
}
.dark .m-glow > .m-glare {
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%),
      rgba(255, 255, 255, 0.09), transparent 55%);
}

/* ---------- صور تتحرك داخل إطارها مع التمرير ---------- */
html.mo-live .m-par {
  scale: 1.16;
  will-change: translate;
}

/* ---------- شريط تقدّم القراءة ---------- */
.m-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 120;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  background: linear-gradient(90deg, #ff6a6c, var(--red));
  box-shadow: 0 0 12px rgba(244, 0, 2, 0.45);
}
html[dir="ltr"] .m-progress {
  transform-origin: 0 50%;
}