/* صفحة «أوناش رفع الأثاث» الأم (2451): شكل صور الشغل اللي جوّه المحتوى + حركتها.
   الصور نفسها في المحتوى (build_pillar_cranes.py + cranes_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}
}

/* ===== صور الأقسام ===== */
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}

/* «من شغلنا بالونش» في آخر «مين إحنا» */
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-w--gal{margin-top:var(--s10)}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-head h3{margin:0 0 var(--s5);color:var(--ink);font-size:clamp(22px,3vw,28px);font-weight:800;text-align:center}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-w--gal .nsr-figs{margin-bottom:var(--s5)}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-more{margin:0;text-align:center}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-more a{display:inline-flex;align-items:center;min-height:46px;padding:10px 24px;border:2px solid var(--blue);border-radius:var(--r-pill);color:var(--blue);font-weight:800;text-decoration:none;transition:background-color .25s ease,color .25s ease}
body.nsr-v2 .elementor[data-elementor-type="wp-page"] .nsr-figs-more a:hover{background:var(--blue);color:#fff}

/* الموبايل: الصورتين/التلاتة شريط بيتسحب بالصباع، والصورة اللي جاية باين طرفها */
@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 بيعمله — مخفي من قارئ الشاشة لأنه تكرار للعناوين) ===== */
.nsr-meter{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:8px 14px 8px 10px;border-radius:999px;background:#2E3192;color:#fff;box-shadow:0 10px 26px rgba(13,16,64,.28)}
.nsr-meter__rail{position:relative;flex:none;width:12px;height:30px;border-radius:6px;background:rgba(255,255,255,.18);overflow:clip}
.nsr-meter__rail i{position:absolute;inset:0;border-radius:inherit;background:#F7931E;transform-origin:50% 100%;scale:1 0}
.nsr-meter__rail::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to top,transparent 0 5px,rgba(46,49,146,.55) 5px 6px)}
.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:.75;font-weight:600}
.nsr-meter__txt b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:calc(100vw - 150px)}
.nsr-meter__n{flex:none;font-size:12px;font-weight:700;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.14);font-variant-numeric:tabular-nums}
/* الموبايل والشاشات الأصغر: كبسولة تحت الهيدر في النص.
   left:50% كان بيقصّر العرض المتاح لنص الشاشة (الاسم كان بيتقص) — فالتوسيط بـmargin auto */
.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:92px;padding:12px 8px;border-radius:22px;text-align:center}
  .nsr-meter__rail{width:14px;height:150px;border-radius:7px}
  .nsr-meter__rail::after{background:repeating-linear-gradient(to top,transparent 0 9px,rgba(46,49,146,.55) 9px 10px)}
  .nsr-meter__txt{align-items:center}
  .nsr-meter__txt b{white-space:normal;max-width:none;font-size:13px}
}

/* ===== التكبير ===== */
.nsr-crlb{width:min(92vw,640px);max-width:none;max-height:none;padding:0;border:0;border-radius:22px;background:transparent;overflow:visible}
.nsr-crlb::backdrop{background:rgba(8,10,40,.86)}
.nsr-crlb figure{margin:0;overflow:clip;border-radius:22px;background:#0d1040}
.nsr-crlb img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;transition:opacity .2s ease}
.nsr-crlb img.is-loading{opacity:0}
.nsr-crlb figcaption{padding:12px 16px;color:#fff;font-weight:700;font-size:15px;text-align:start}
.nsr-crlb 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-crlb__x{top:-14px;left:-14px}
.nsr-crlb__prev{top:calc(50% - 44px);right:-14px}
.nsr-crlb__next{top:calc(50% - 44px);left:-14px}
@media (max-width:767px){.nsr-crlb__x{top:-52px;left:0}.nsr-crlb__prev{right:6px}.nsr-crlb__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-cr-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-cr-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-cr-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-cr-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-cr-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-cr-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-crlb[open]{animation:nsr-cr-pop .35s cubic-bezier(.22,1,.36,1)}
  .nsr-crlb[open]::backdrop{animation:nsr-cr-fade .3s ease}
}
@keyframes nsr-cr-hz{to{scale:1.1}}
@keyframes nsr-cr-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-cr-zoom{from{scale:1.2}to{scale:1}}
@keyframes nsr-cr-dot{from{scale:0;opacity:0}}
@keyframes nsr-cr-rule{from{scale:0 1}}
@keyframes nsr-cr-rise{from{translate:0 48px;opacity:0}}
@keyframes nsr-cr-pop{from{scale:.92;opacity:0}}
@keyframes nsr-cr-fade{from{opacity:0}}
@media print{.nsr-meter,.nsr-crlb{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}}