/* حركة صفحات التصميم الجديد (naser-motion-page) — الرئيسية والصفحات الأم والمقالات والكتالوج.
   كلها مربوطة بالسكرول. المتصفح اللي مابيدعمش animation-timeline بيشوف الصفحة ثابتة عادي. */
@media (prefers-reduced-motion:no-preference){
body.nsr-v2{--nsr-e:cubic-bezier(.22,1,.36,1)}

@supports (animation-timeline:scroll()){
  /* الهيرو: صورة الرئيسية بتمشي أبطأ، والكلام (الرئيسية والصفحات الأم) بيطلع لفوق ويبهت */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .hero__bg{animation:nsr-par linear both;animation-timeline:scroll(root);animation-range:0px 900px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.hero,.nsr-phero)>.wrap{animation:nsr-hero-out linear both;animation-timeline:scroll(root);animation-range:0px 640px}
}

/* الكروت: بتظهر في أول 240px من دخولها الشاشة (مهما كان طولها) وبتصغر سنة في آخر 200px وهي خارجة */
@supports (animation-timeline:view()){
@media (max-width:1024px){
  /* overflow:hidden بيخلّي الأب «scroll container» فـview() بيتقاس عليه مش على الشاشة والحركة بتقف في نصها
     (زرار «شوف المعرض كامل» فضل 0.49). clip بيقص بنفس الشكل من غير ما يبقى scroll container. */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.nsr-media,.nsr-shot,.guide){overflow:clip}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.shead,.pillars,.about,.flip,.prod,.catalog__actions,.nsr-media__videos,.nsr-mrow,.nsr-media__cta,.area,.guide,.rating-strip,.q,.faqs .e-n-accordion-item,.nsr-hood,.nsr-note,.nsr-table,.nsr-quick,.nsr-toc__i,.nsr-shot,.nsr-cc,.nsr-steps__item,.nsr-phase):not(.nsr-stack){
    animation:nsr-in linear both,nsr-out linear forwards;animation-timeline:view(),view();animation-range:entry 0% entry 240px,exit calc(100% - 200px) exit 100%}
  /* المنتجات عمودين: التاني متأخر سنة فيبان كأنهم داخلين ورا بعض */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .prod:nth-child(even){animation-range:entry 40px entry 280px,exit calc(100% - 200px) exit 100%}
  /* الصور بتعمل زووم هادي جوّه إطارها (الإطار overflow:hidden أصلًا) */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.nsr-shot>img,.guide>img){animation:nsr-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 55%}
}
}

/* الرصّ على الموبايل: JS بيحط nsr-stack بس على المجموعات اللي ينفع ترتص (كروت قصيرة ومفيش كلام بعدها) */
@media (max-width:767px){
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.steps,.whys){align-items:start}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-stack{position:sticky;top:calc(86px + var(--i,0) * 14px);transform-origin:50% 0;box-shadow:0 -10px 26px rgba(13,16,64,.16)}
  body.admin-bar body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-stack{top:calc(132px + var(--i,0) * 14px)}
  /* الكارت الأزرق كان شفاف — لازم يبقى مصمت عشان اللي تحته مايبانش، بنفس اللون بالظبط */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .why.nsr-stack{background:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)),var(--blue)}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-stack::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#0d1040;opacity:var(--dim,0);pointer-events:none}
}

/* الأسئلة: Elementor بيفتحها بنعومة أصلًا — إحنا بنطلّع كلام الإجابة بعد الفتح */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .e-n-accordion-item[open]>:not(summary)>*{animation:nsr-faq .5s var(--nsr-e) .12s backwards}

/* hover على الكمبيوتر بس (الأدلة والمناطق والمنتجات ليهم hover أصلًا) */
@media (hover:hover) and (pointer:fine){
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] :is(.why,.step){transition:transform .35s var(--nsr-e),box-shadow .35s ease,background-color .35s ease}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .step:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .why:hover{transform:translateY(-4px);background-color:rgba(255,255,255,.11)}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .guide>img{transition:transform .7s var(--nsr-e)}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .guide:hover>img{transform:scale(1.05)}
}
}
@keyframes nsr-par{to{transform:translate3d(0,28%,0)}}
@keyframes nsr-hero-out{to{opacity:.1;transform:translate3d(0,-70px,0) scale(.94)}}
@keyframes nsr-in{from{opacity:0;transform:translate3d(0,48px,0) scale(.9)}}
@keyframes nsr-out{to{opacity:.55;transform:scale(.94)}}
@keyframes nsr-zoom{from{transform:scale(1.14)}}
@keyframes nsr-faq{from{opacity:0;transform:translate3d(0,10px,0)}}
@media print{body.nsr-v2 .elementor[data-elementor-type="wp-page"] *{opacity:1!important;animation:none!important}}