/* صفحة «فك وتركيب العفش» الأم (4481): شكل صور الشغل اللي جوّه المحتوى + حركتها
   + مؤشر «درجة الفك» في دليل القطع + رسم «يوم الفك والتركيب ساعة بساعة».
   منسوخ من naser-page-trucks.css (اللي ماتلمسش) — من غير كروت منتجات (صفحة خدمة).
   الصور نفسها في المحتوى (build_pillar_disassembly.py + disassembly_photos.py).
   body.nsr-v2 .elementor[data-elementor-type="wp-page"] = body.nsr-v2 .elementor[data-elementor-type="wp-page"] (بيتفك في build_site_assets.py).
   كل الحركة مربوطة بالسكرول أو بالسحب — مفيش حاجة بتشتغل لوحدها بالوقت. */

/* ===== الهيرو: صورة الفريق شغّال على السفرة جنب العنوان ===== */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .nsr-phero__media{width:100%;max-width:460px;align-self:center}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero__photo{margin:0;overflow:clip;border-radius:26px;border:4px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);box-shadow:0 26px 60px rgba(5,7,40,.38)}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero__photo img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;cursor:zoom-in}
@media (min-width:1025px){
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;row-gap:var(--s4);align-items:center;justify-items:start;text-align:start}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .wrap>*{grid-column:1;margin:0}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .wrap>.nsr-phero__media{grid-column:2;grid-row:1 / span 5;max-width:none}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo :is(.nsr-phero__chips,.nsr-phero__meta){justify-content:flex-start}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .nsr-phero__sub .elementor-heading-title{margin-inline:0}
}
@media (max-width:1024px){
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero--photo .nsr-phero__media{max-width:640px;margin-top:var(--s2)}
  /* القصّ العرضي بيشيل فوق وتحت — الفريق والترابيزة في النص تحت، فالقصّ مايل لتحت شوية */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero__photo img{aspect-ratio:16/10;object-position:50% 62%}
}

/* ===== صور الأقسام ===== */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-w{width:100%;align-self:stretch}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs{display:grid;gap:var(--s4);margin:var(--s4) 0 var(--s8)}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--1{grid-template-columns:minmax(0,640px);justify-content:center}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--3{grid-template-columns:repeat(3,minmax(0,1fr))}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig{position:relative;min-width:0;margin:0;overflow:clip;border-radius:22px;background:var(--mist);box-shadow:var(--sh-1);cursor:zoom-in;-webkit-tap-highlight-color:transparent}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .mist .nsr-fig{background:#fff}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--1 .nsr-fig img{aspect-ratio:16/10}
/* التدرّج على ::after مش على الكابشن: Elementor بيحط background-image:none!important على كل عناصر
   القسم لحد ما يدخل الشاشة (lazy-load) — والـpseudo-element مابيتأثرش بالقاعدة دي */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig figcaption{position:absolute;inset-inline:0;bottom:0;isolation:isolate;padding:44px 16px 13px;color:#fff;font-size:14.5px;font-weight:700;line-height:1.5;text-align:start;text-shadow:0 1px 3px rgba(0,0,0,.45);pointer-events:none}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig figcaption::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(13,16,64,0),rgba(13,16,64,.62) 45%,rgba(13,16,64,.92))}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig figcaption::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--orange);vertical-align:2px}

/* الموبايل: الصورتين/التلاتة شريط بيتسحب بالصباع، والصورة اللي جاية باين طرفها */
@media (max-width:767px){
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3){display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter) * -1);padding:4px var(--gutter) 10px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3)::-webkit-scrollbar{display:none}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3) .nsr-fig{flex:0 0 82%;scroll-snap-align:center}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig figcaption{font-size:13.5px;padding:38px 14px 11px}
}

/* ===== مؤشر «درجة الفك» في دليل القطع (JS بيعمله — مخفي من قارئ الشاشة لأنه تكرار للعناوين)
   الاسم = عنوان القطعة، والسطر الصغير = صف «درجة الفك» من بطاقة الحقائق بتاعتها بالحرف.
   دولاب صغير من قدّام: إطار أبيض وضلفتين برتقالي. --f (0 → 1) بيبعّد الأجزاء عن بعض:
   0 «من غير فك» متركب · .25 «فك خفيف» الضلف بتطلع لبرّه · .5 «فك جزئي» · 1 «فك كامل» كل لوح لوحده. ===== */
.nsr-meter{--f:.5;position:fixed;z-index:60;pointer-events:none;opacity:0;visibility:hidden;font-family:inherit;direction:rtl;transition:opacity .3s ease,visibility 0s linear .3s,translate .3s ease}
.nsr-meter.is-on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s,translate .3s ease}
.nsr-meter__box{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;border-radius:999px;background:#2E3192;color:#fff;box-shadow:0 10px 26px rgba(13,16,64,.28)}
.nsr-meter__st{position:relative;flex:none;width:54px;height:32px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.nsr-meter__wd{display:block;width:100%;height:100%;overflow:visible}
.nsr-meter__floor{fill:none;stroke:rgba(255,255,255,.35);stroke-width:.8;stroke-dasharray:3 3}
.nsr-meter__p{fill:#fff;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.nsr-meter__door{fill:#F7931E}
.nsr-meter__p circle{fill:#1B1E4B}
/* الضلف بتطلع الأول (من .25)، والإطار بيتفرد بعدها (من .5) — clamp عشان كل جزء يبدأ في دوره */
.nsr-meter__dl{transform:translate(calc(clamp(0,var(--f),1) * -9px),calc(clamp(0,var(--f),1) * 2px)) rotate(calc(clamp(0,var(--f),1) * -10deg));transform-box:fill-box;transform-origin:50% 100%}
.nsr-meter__dr{transform:translate(calc(clamp(0,var(--f),1) * 9px),calc(clamp(0,var(--f),1) * 2px)) rotate(calc(clamp(0,var(--f),1) * 10deg));transform-box:fill-box;transform-origin:50% 100%}
.nsr-meter__top{transform:translateY(calc(clamp(0,(var(--f) - .4) * 1.67,1) * -3px))}
.nsr-meter__bot{transform:translateY(calc(clamp(0,(var(--f) - .4) * 1.67,1) * 2px))}
.nsr-meter__sl{transform:translateX(calc(clamp(0,(var(--f) - .4) * 1.67,1) * -11px))}
.nsr-meter__sr{transform:translateX(calc(clamp(0,(var(--f) - .4) * 1.67,1) * 11px))}
.nsr-meter.is-jump .nsr-meter__p{transition:none}
.nsr-meter__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.nsr-meter__txt :is(small,b){color:#fff;margin:0;padding:0;background:none}
.nsr-meter__txt small{font-size:10.5px;opacity:.78;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 188px)}
.nsr-meter__txt b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 188px)}
/* العدّاد: خلفية كحلي غامقة وأرقام برتقالي */
.nsr-meter__n{flex:none;font-size:12px;font-weight:800;padding:4px 9px;border-radius:999px;background:#1B1E4B;color:#F7931E;font-variant-numeric:tabular-nums;direction:ltr}
/* الموبايل والشاشات الأصغر: كبسولة تحت الهيدر في النص (التوسيط بـmargin auto مش left:50%) */
.nsr-meter{top:var(--nsr-meter-top,96px);left:0;right:0;width:max-content;max-width:calc(100vw - 24px);margin-inline:auto;translate:0 -8px}
.nsr-meter.is-on{translate:0 0}
/* الشاشات الواسعة: لوحة رأسي على جنب الصفحة والدولاب أكبر */
@media (min-width:1360px){
  .nsr-meter{top:50%;left:22px;right:auto;margin:0;translate:-8px -50%}
  .nsr-meter.is-on{translate:0 -50%}
  .nsr-meter__box{flex-direction:column;align-items:center;gap:8px;width:120px;padding:12px 8px;border-radius:22px;text-align:center}
  .nsr-meter__st{width:100px;height:60px;border-radius:9px}
  .nsr-meter__txt{align-items:center}
  .nsr-meter__txt small{white-space:normal;max-width:none;font-size:10.5px}
  .nsr-meter__txt b{white-space:normal;max-width:none;font-size:13px}
}
@media (prefers-reduced-motion:reduce){.nsr-meter__p{transition:none}}

/* ===== يوم الفك والتركيب ساعة بساعة (JS بيبنيه في قسم «يوم الفك والتركيب» قبل الجدول — زينة، مخفية من قارئ الشاشة)
   الساعات والمراحل بتتقرا من جدول القسم نفسه (عمود «الوقت التقريبي» و«المرحلة»)، والعربية ماشية على
   الشريط حسب الصف اللي بتقراه. جزء الطريق بين البيتين («قفل وتحرك» → «وصول تقريبي») متعلّم بخط متقطع.
   لازق تحت الهيدر طول الجدول ===== */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route{--p:0;--route-top:96px;position:sticky;top:var(--route-top);z-index:4;display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:var(--s4) 0;padding:12px 16px 10px;border:1px solid #E6E8F2;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 10px 26px rgba(13,16,64,.10);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-align:start}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now{display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.35}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now small{flex:none;padding:1px 8px;border-radius:999px;background:#2E3192;color:#fff;font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now b{min-width:0;overflow:hidden;color:#1B1E4B;font-size:15.5px;font-weight:800;white-space:nowrap;text-overflow:ellipsis}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__svg{display:block;width:100%;height:auto;overflow:visible}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__road{fill:#E3E6F3}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__done{fill:#F7931E;transform-box:fill-box;transform-origin:100% 50%;scale:var(--p) 1}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__hw{fill:#5C6B87;opacity:.32}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__lane{fill:none;stroke:#fff;stroke-width:1.6;stroke-dasharray:7 7}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__stop{fill:#fff;stroke:#C9CEE3;stroke-width:3;transition:fill .35s ease,stroke .35s ease}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route .nsr-route__stop.is-on{fill:#2E3192;stroke:#F7931E}
/* العلامات تحت الشريط في مكان الساعة بالظبط (مش أعمدة متساوية) — المكان من الـJS بـ--x */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list{position:relative;height:22px;margin:0;padding:0;list-style:none}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list li{position:absolute;top:0;right:var(--x);translate:50% 0;margin:0;padding:0;color:#7A86A1;font-size:12.5px;font-weight:700;line-height:1.5;white-space:nowrap;transition:color .35s ease}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list li:first-child{translate:0 0}
/* آخر علامة مش في آخر الشريط — بتفضل في مكان ساعتها زي الباقيين */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list li.is-on{color:#1B1E4B}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list li.is-cur{color:#2E3192}
@media (min-width:768px){
  /* التابلت والكمبيوتر: الساعة والمرحلة عمود على اليمين، والشريط والعلامات جنبها */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route{grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto auto;column-gap:22px;row-gap:4px;align-items:center;padding:12px 20px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now{grid-row:1 / span 2;flex-direction:column;align-items:flex-start;gap:4px;padding-inline-end:18px;border-inline-end:1px solid #E6E8F2}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now b{white-space:normal;font-size:15px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__svg{max-width:640px;justify-self:center}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list{width:100%;max-width:640px;justify-self:center}
}
@media (max-width:767px){
  /* الموبايل: سطر الساعة + الشريط بس — العلامات بتطوّل الشريط اللازق على الكلام */
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route{gap:4px;padding:9px 12px 8px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now small{font-size:12px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__now b{font-size:14.5px}
  body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route__list{display:none}
}
@media (prefers-reduced-motion:reduce){body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-route *{transition:none!important}}

/* ===== التكبير ===== */
.nsr-mtlb{width:min(92vw,640px);max-width:none;max-height:none;padding:0;border:0;border-radius:22px;background:transparent;overflow:visible}
.nsr-mtlb::backdrop{background:rgba(8,10,40,.86)}
.nsr-mtlb figure{margin:0;overflow:clip;border-radius:22px;background:#0d1040}
.nsr-mtlb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:opacity .2s ease}
.nsr-mtlb img.is-loading{opacity:0}
.nsr-mtlb figcaption{padding:12px 16px;color:#fff;font-weight:700;font-size:15px;text-align:start}
.nsr-mtlb button{position:absolute;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#2E3192;font-family:inherit;font-size:26px;font-weight:800;line-height:1;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.3)}
.nsr-mtlb__x{top:-14px;left:-14px}
.nsr-mtlb__prev{top:calc(50% - 44px);right:-14px}
.nsr-mtlb__next{top:calc(50% - 44px);left:-14px}
@media (max-width:767px){.nsr-mtlb__x{top:-52px;left:0}.nsr-mtlb__prev{right:6px}.nsr-mtlb__next{left:6px}}

/* ===== الحركة ===== */
@media (prefers-reduced-motion:no-preference){
  /* الهيرو: الصورة بتقرب سنة وانت نازل (الكلام نفسه بيبهت من naser-motion-page) */
  @supports (animation-timeline:scroll()){
    body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-phero__photo img{animation:nsr-mt-hz linear both;animation-timeline:scroll(root);animation-range:0px 640px}
  }
  @supports (animation-timeline:view()){
    /* الصورة «بتترفع»: بتتكشف من تحت لفوق وهي طالعة، وجوّاها زووم بيهدى — على كل المقاسات */
    body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--1 .nsr-fig,body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3) .nsr-fig{animation:nsr-mt-lift linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--3 .nsr-fig:nth-child(2){animation-range:entry 8% cover 44%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--3 .nsr-fig:nth-child(3),body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs--2 .nsr-fig:nth-child(2){animation-range:entry 14% cover 50%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig img{animation:nsr-mt-zoom linear both;animation-timeline:view();animation-range:entry 0% cover 60%}
    /* خط العنوان بيترسم: النقط الأول وبعدين الخط البرتقالي (الصفحة اللي فيها الصور بس) */
    body.nsr-v2 .elementor[data-elementor-type="wp-page"]:has(.nsr-phero--photo) .shead__rule i{animation:nsr-mt-dot linear both;animation-timeline:view();animation-range:entry 20% entry 70%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"]:has(.nsr-phero--photo) .shead__rule i:nth-child(2){animation-range:entry 30% entry 80%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"]:has(.nsr-phero--photo) .shead__rule i:nth-child(3){animation-range:entry 40% entry 90%}
    body.nsr-v2 .elementor[data-elementor-type="wp-page"]:has(.nsr-phero--photo) .shead__rule u{transform-origin:100% 50%;animation:nsr-mt-rule linear both;animation-timeline:view();animation-range:entry 40% cover 30%}
  }
  @media (max-width:767px){
    @supports (animation-timeline:view()){
      /* جوّه الشريط اللي بيتسحب، الشريط نفسه scroll container: view() الرأسي مش هيتحرك جوّاه.
         فالشريط كله هو اللي بيطلع مع السكرول (السحب نفسه أصلي بالـsnap) */
      body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3){animation:nsr-mt-rise linear both;animation-timeline:view();animation-range:entry 0% entry 220px}
      body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs:is(.nsr-figs--2,.nsr-figs--3) :is(.nsr-fig,.nsr-fig img){animation:none}
    }
  }
  .nsr-mtlb[open]{animation:nsr-mt-pop .35s cubic-bezier(.22,1,.36,1)}
  .nsr-mtlb[open]::backdrop{animation:nsr-mt-fade .3s ease}
}
@keyframes nsr-mt-hz{to{scale:1.1}}
@keyframes nsr-mt-lift{from{clip-path:inset(30% 0 0 0 round 22px);translate:0 56px;opacity:.15}to{clip-path:inset(0 0 0 0 round 22px);translate:0 0;opacity:1}}
@keyframes nsr-mt-zoom{from{scale:1.2}to{scale:1}}
@keyframes nsr-mt-dot{from{scale:0;opacity:0}}
@keyframes nsr-mt-rule{from{scale:0 1}}
@keyframes nsr-mt-rise{from{translate:0 48px;opacity:0}}
@keyframes nsr-mt-pop{from{scale:.92;opacity:0}}
@keyframes nsr-mt-fade{from{opacity:0}}
@media print{.nsr-meter,.nsr-mtlb,.nsr-route{display:none!important}body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig,body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-fig img{animation:none!important;clip-path:none!important;opacity:1!important}}