/* ==========================================================
   "في سع" Motion — طبقة الحركة المشتركة (تُقرأ مع assets/js/motion.js)
   المتغيرات التي يكتبها المحرّك:
     --me  اكتمال دخول العنصر للشاشة (0 → 1)
     --mc  موضع العنصر بالنسبة لمركز الشاشة (-1 أسفل → 1 أعلى)
     --mh  تقدّم التمرير عبر الهيرو (0 → 1) على :root
     --mv  سرعة التمرير الناعمة (-1 → 1) على :root
     --md  تأخير التدرّج المحسوب لكل عنصر
   ========================================================== */

:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --m-dur: 1.05s;
}

/* ---------- تمرير ناعم (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ==================== 1) الكشف عند الدخول ==================== */
.m-js:not(.m-reduce) [data-m] {
  opacity: 0;
  transition:
    opacity var(--m-dur) var(--m-ease),
    transform var(--m-dur) var(--m-ease),
    filter var(--m-dur) var(--m-ease),
    clip-path calc(var(--m-dur) * 1.1) var(--m-ease);
  transition-delay: var(--md, 0s);
  will-change: opacity, transform;
}
/* ينهض من الأرض بمنظور ثلاثي الأبعاد */
.m-js:not(.m-reduce) [data-m="rise"] { transform: perspective(1000px) translate3d(0, 56px, -60px) rotateX(16deg); transform-origin: 50% 100%; }
/* نسخة هادئة للوحة التحكم */
.m-js:not(.m-reduce) [data-m="rise-soft"] { transform: translate3d(0, 18px, 0) scale(.985); --m-dur: .7s; }
.m-js:not(.m-reduce) [data-m="fade"] { transform: none; }
.m-js:not(.m-reduce) [data-m="zoom"] { transform: scale(.88); filter: blur(10px); }
.m-js:not(.m-reduce) [data-m="blur"] { transform: translate3d(0, 24px, 0); filter: blur(14px); }
.m-js:not(.m-reduce) [data-m="from-start"] { transform: translate3d(70px, 0, 0) rotateY(-12deg); }
.m-js:not(.m-reduce) [data-m="from-end"] { transform: translate3d(-70px, 0, 0) rotateY(12deg); }
[dir="ltr"].m-js:not(.m-reduce) [data-m="from-start"], [dir="ltr"] .m-js:not(.m-reduce) [data-m="from-start"] { transform: translate3d(-70px, 0, 0) rotateY(12deg); }
.m-js:not(.m-reduce) [data-m="clip"] { opacity: 1; clip-path: inset(100% 0 0 0 round 24px); transform: translate3d(0, 40px, 0); }
.m-js:not(.m-reduce) [data-m="split"] { opacity: 1; transform: none; }

.m-js [data-m].m-in { opacity: 1; transform: none; filter: none; }
.m-js [data-m="clip"].m-in { clip-path: inset(0 0 0 0 round 0); }
.m-js [data-m="rise-soft"].m-in { transform: none; }

/* ---------- عناوين تظهر كلمة كلمة ---------- */
.m-w { display: inline-block; overflow: hidden; vertical-align: top; padding-block: .12em .2em; margin-block: -.12em -.2em; }
.m-wi { display: inline-block; }
.m-js:not(.m-reduce) [data-m="split"] .m-wi,
.m-js:not(.m-reduce) [data-m-split] .m-wi {
  transform: translate3d(0, 110%, 0) rotate(5deg);
  transform-origin: 0 100%;
  opacity: 0;
  transition: transform 1s var(--m-ease), opacity .6s ease;
  transition-delay: calc(var(--md, 0s) + var(--wi, 0) * 55ms);
}
.m-js .m-in .m-wi, .m-js .m-in.m-wi, .m-js [data-m-split].m-in .m-wi { transform: none; opacity: 1; }

/* ==================== 2) صور تتحرّك مع التمرير ==================== */
/* قناع ينكشف من الأسفل + الصورة تصغر من تكبير 1.3 + بارالاكس مستمر */
[data-m-img] { isolation: isolate; }
.m-js:not(.m-reduce) [data-m-img] {
  clip-path: inset(18% 6% 18% 6% round 18px);
  transition: clip-path 1.25s var(--m-ease);
}
.m-js:not(.m-reduce) [data-m-img] img {
  scale: 1.32;
  translate: 0 calc(var(--mc, 0) * -5%);
  transition: scale 1.6s var(--m-ease), opacity .6s ease;
  will-change: translate, scale;
}
.m-js [data-m-img].m-in, .m-js .m-in [data-m-img] { clip-path: inset(0 0 0 0 round 12px); }
.m-js .m-in [data-m-img] img, .m-js [data-m-img].m-in img { scale: 1.1; }
/* صورة المنتج الرئيسية: كشف أوسع وبارالاكس أقوى */
.m-js:not(.m-reduce) [data-m-img="hero"] { clip-path: inset(10% 10% 10% 10% round 28px); }
.m-js:not(.m-reduce) [data-m-img="hero"] img { translate: 0 calc(var(--mc, 0) * -7%); }
.m-js [data-m-img="hero"] { clip-path: inset(0 0 0 0 round 16px) !important; }
/* الصورة الرئيسية لا تحتاج انتظار IntersectionObserver */
.m-js.m-ready [data-m-img="hero"] img { scale: 1.12; }

/* ==================== 3) عناصر تنهض بالـ3D مربوطة بالتمرير (scrub) ==================== */
.m-js:not(.m-reduce) [data-m-3d] {
  transform:
    perspective(1300px)
    translate3d(0, calc((1 - var(--me, 1)) * 110px), calc((1 - var(--me, 1)) * -180px))
    rotateX(calc((1 - var(--me, 1)) * 24deg))
    scale(calc(.92 + var(--me, 1) * .08));
  transform-origin: 50% 100%;
  opacity: calc(.15 + var(--me, 1) * .85);
}

/* ==================== 4) بارالاكس عام ==================== */
.m-js:not(.m-reduce) [data-m-parallax] { translate: 0 calc(var(--mc, 0) * var(--m-speed, .2) * -260px); will-change: translate; }

/* ==================== 5) إمالة 3D + لمعة ==================== */
[data-m-tilt] { transform-style: preserve-3d; }
.m-js [data-m-tilt].m-tilting {
  transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translate3d(0, -6px, 0) scale(1.025) !important;
  transition: transform .14s ease-out, box-shadow .3s ease, border-color .3s ease !important;
  box-shadow: 0 30px 60px -24px rgba(15, 10, 40, .45);
  z-index: 3;
}
.m-js [data-m-tilt="soft"].m-tilting { transform: perspective(1100px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translate3d(0, -3px, 0) !important; }
.m-glare {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 4;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .22), transparent 45%);
  opacity: 0; transition: opacity .35s ease; mix-blend-mode: soft-light;
}
.m-tilting > .m-glare { opacity: 1; }
[data-m-tilt="soft"] > .m-glare { mix-blend-mode: normal; background: radial-gradient(300px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .10), transparent 50%); }

/* ==================== 6) أزرار مغناطيسية ==================== */
[data-magnetic] { transition: translate .35s var(--m-ease-spring), transform .3s var(--m-ease), box-shadow .3s ease; }

/* ==================== تقليل الحركة / أجهزة ضعيفة ==================== */
.m-reduce [data-m], .m-reduce [data-m] .m-wi, .m-reduce [data-m-3d], .m-reduce [data-m-img], .m-reduce [data-m-img] img {
  opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; translate: none !important; scale: none !important;
}
.m-low [data-m] { filter: none !important; }
.m-low [data-m-img] img { translate: none !important; }
@media print {
  [data-m], [data-m] .m-wi, [data-m-3d], [data-m-img], [data-m-img] img { opacity: 1 !important; transform: none !important; clip-path: none !important; translate: none !important; scale: none !important; }
}