/* ===================================================
   M7MD BEDEIRY — Filmmaker
   Palette: black & white only (client requirement)
   =================================================== */

:root {
  --ink:        #050505;   /* letterbox bars / page base */
  --paper:      #FAFAFA;   /* headline white */
  --paper-dim:  #D9D9D9;   /* tagline */
  --paper-mute: rgba(250, 250, 250, 0.55); /* bar microtext */
  --hairline:   rgba(250, 250, 250, 0.35);
  --accent:     #ffc000;   /* اللون الذهبي للعناوين الإنجليزية الصغيرة (طلب العميل) */

  --bar-h: clamp(44px, 7vh, 72px);

  --font-display: "Archivo", "Arial Black", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html {
  background: var(--ink);
}

body {
  background: var(--ink);
  color: var(--paper);
  overflow-x: hidden;
}

/* ---------- الإطار السينمائي ---------- */

.frame {
  display: flex;
  flex-direction: column;
  height: 100vh;   /* fallback */
  height: 100svh;
  min-height: 480px;
}

/* ---------- أشرطة الليترbox ---------- */

.bar {
  height: var(--bar-h);
  flex: 0 0 var(--bar-h);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: clamp(16px, 3vw, 40px);
  z-index: 3;
}

.bar__text {
  font-family: var(--font-mono);
  font-size: clamp(9px, 1.1vw, 11px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
  white-space: nowrap;
}

.bar__link {
  text-decoration: none;
  transition: color 0.25s ease;
}

.bar__link:hover { color: var(--paper); }

.bar__text--ar {
  font-family: "IBM Plex Sans Arabic", sans-serif;
  letter-spacing: 0;
  font-size: clamp(11px, 1.2vw, 13px);
}

.bar--top    { animation: bar-in-top    0.9s var(--ease-out) both; }
.bar--bottom { animation: bar-in-bottom 0.9s var(--ease-out) both; }

@keyframes bar-in-top    { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes bar-in-bottom { from { transform: translateY(100%);  } to { transform: translateY(0); } }

/* ---------- شاشة العرض ---------- */

.screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: var(--ink) url("../فيديو/poster.jpg") center / cover no-repeat;
}

.screen__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* طبقة سوداء خفيفة فوق الفيديو (طلب العميل) — أغمق ناحية اليمين حيث النص */
.screen__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(5, 5, 5, 0.30) 0%,
    rgba(5, 5, 5, 0.40) 55%,
    rgba(5, 5, 5, 0.62) 100%);
  z-index: 1;
}

/* ---------- الاسم والوصف ---------- */

.title {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* الاسم والوصف على اليمين */
  justify-content: center;
  text-align: right;
  padding-inline: clamp(16px, 5vw, 80px);
}

.title__name {
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(1.9rem, 5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--paper);
  animation: rise 1s var(--ease-out) 0.35s both;
}

.title__role {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 400;
  letter-spacing: 0.55em;
  margin-right: -0.55em; /* يعوّض فراغ التباعد بعد آخر حرف ليستقيم مع حافة الاسم */
  text-transform: uppercase;
  color: var(--accent);
  margin-top: clamp(14px, 2.5vh, 26px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 2vw, 20px);
  animation: rise 1s var(--ease-out) 0.6s both;
}

/* خط رفيع قبل كلمة FILMMAKER */
.title__role::before {
  content: "";
  display: block;
  width: clamp(26px, 4vw, 44px);
  height: 1px;
  background: var(--hairline);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- قسم العملاء ---------- */

.clients {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(64px, 10vh, 110px);
  overflow: hidden;
}

.clients__head {
  text-align: right;
  padding-inline: clamp(16px, 5vw, 80px);
}

.clients__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.clients__title {
  font-family: "IBM Plex Sans Arabic", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  margin-top: 10px;
}

/* ---------- عجلة اللوجوهات ----------
   اللوجوهات موزعة على محيط دائرة ضخمة مركزها أسفل الشاشة،
   والدوّار يلف فتمر اللوجوهات بقوس مثل عجلة السينما */

.wheel {
  --logo-w: clamp(64px, 11vw, 140px);
  position: relative;
  direction: ltr;
  height: clamp(240px, 34vw, 400px);
  margin-top: clamp(20px, 4vh, 48px);
}

.wheel__rotor {
  position: absolute;
  left: 50%;
  top: var(--rotor-top, 800px); /* يضبطه الجافاسكربت */
  width: 0;
  height: 0;
  will-change: transform;
}

.wheel__item {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--logo-w);
  height: calc(var(--logo-w) * 0.7);
  margin-left: calc(var(--logo-w) / -2);
  margin-top: calc(var(--logo-w) * -0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wheel__item {
  cursor: pointer;
}

.wheel__item img {
  max-width: 100%;
  max-height: 100%;
  /* اللوجوهات بألوانها الأصلية كما رفعها العميل */
  opacity: 0.9;
  transition: opacity 0.35s ease, transform 0.35s ease;
  -webkit-user-drag: none;
  user-select: none;
}

/* عند الوقوف على لوجو: تخفت البقية فقط، والمحدد يتوضح مع تكبير بسيط جداً */
.wheel:has(.wheel__item:hover) .wheel__item:not(:hover) img { opacity: 0.25; }
.wheel .wheel__item:hover img { opacity: 1; transform: scale(1.06); }

/* ---------- قسم الأعمال: كاروسيل كل الريلز ---------- */

.works {
  background: var(--ink);
  color: var(--paper);
  padding-top: clamp(72px, 12vh, 130px);
  padding-bottom: clamp(48px, 8vh, 90px);
  overflow: hidden;
}

.works__head {
  text-align: right;
  padding-inline: clamp(16px, 5vw, 80px);
}

.works__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.works__title {
  font-family: "IBM Plex Sans Arabic", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  margin-top: 10px;
}

.works .stage {
  height: clamp(420px, 64vh, 620px);
  margin-top: clamp(20px, 4vh, 44px);
}

/* ---------- مشغل الفيديو (Lightbox) ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}

.lightbox[hidden] { display: none; }

.lightbox__video {
  max-width: min(92vw, 480px);
  max-height: 88vh;
  border-radius: 14px;
  background: #000;
  outline: none;
}

.lightbox__close {
  position: absolute;
  top: clamp(10px, 2vw, 24px);
  inset-inline-end: clamp(14px, 2.5vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(20, 20, 20, 0.7);
  color: var(--paper);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 0.25s ease, color 0.25s ease;
}

.lightbox__close:hover { background: var(--accent); color: var(--ink); }

/* ---------- الكاروسيل المتداخل ---------- */

.stage {
  position: relative;
  perspective: 1400px;
}

.stage__card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--card-w, 280px);
  aspect-ratio: 9 / 16;
  margin-left: calc(var(--card-w, 280px) / -2);
  transform: translateY(-50%);
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.stage__inner {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  transition: transform 0.35s ease;
}

.stage__inner video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.stage__card:hover .stage__inner { transform: scale(1.05); }

/* أسهم التنقل يمين ويسار */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  width: clamp(44px, 5vw, 58px);
  height: clamp(44px, 5vw, 58px);
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: rgba(15, 15, 15, 0.72);
  color: var(--paper);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.nav-arrow svg { width: 42%; height: 42%; }

.nav-arrow:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }

.nav-arrow--right { right: clamp(10px, 2vw, 28px); }
.nav-arrow--left  { left:  clamp(10px, 2vw, 28px); }

/* ---------- قسم الصور: شريط طولي متحرك تلقائيًا ---------- */

.photos {
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 8vh, 96px);
  overflow: hidden;
}

.photos__head {
  text-align: right;
  padding-inline: clamp(16px, 5vw, 80px);
  margin-bottom: clamp(24px, 4vh, 44px);
}

.photos__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.photos__title {
  font-family: "IBM Plex Sans Arabic", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  margin-top: 10px;
}

.strip {
  position: relative;
  overflow: hidden;
  /* ارتفاع الشريط يملأ معظم الصفحة (طلب العميل: صفحة كاملة) */
  --card-h: clamp(360px, 70vh, 700px);
  height: var(--card-h);
}

.strip__track {
  display: flex;
  gap: 12px;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.pcard {
  position: relative;
  height: 100%;
  /* الوضع الافتراضي: إطار طولي نحيف (أقرب للمرجع) */
  width: calc(var(--card-h) * 0.4);
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  /* يتوسّع العرض إلى مربّع عند المرور */
  transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* يملأ الإطار في الحالتين */
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  /* منع قائمة "حفظ/نسخ الصورة" عند الضغط المطوّل على الجوال */
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* عند المرور: العرض يصبح مربّعًا موحّدًا (= الارتفاع)، وتخفت البقية */
.strip:hover .pcard { opacity: 0.5; transition: width 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease; }
.strip .pcard:hover {
  opacity: 1;
  width: var(--w-sq, var(--card-h));
  z-index: 5;
}

/* ---------- قسم الإنتاج: شريط أغلفة طولية يتحرك ويكبر عند المرور ---------- */

.prod {
  background: var(--ink);
  color: var(--paper);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(48px, 8vh, 96px);
  overflow: hidden;
}

.prod__head {
  text-align: right;
  padding-inline: clamp(16px, 5vw, 80px);
  margin-bottom: clamp(24px, 4vh, 44px);
}

.prod__eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.prod__title {
  font-family: "IBM Plex Sans Arabic", var(--font-display);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.25rem);
  margin-top: 10px;
}

.pstrip {
  position: relative;
  overflow: hidden;
  --card-h: clamp(340px, 64vh, 640px);
  height: var(--card-h);
  /* مساحة عمودية تسمح بتكبير البطاقة عند المرور دون قصّها */
  padding-block: clamp(14px, 3vh, 34px);
}

.pstrip__track {
  display: flex;
  gap: clamp(16px, 2vw, 30px);
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.pcard-prod {
  position: relative;
  height: 100%;
  /* بطاقة بوستر طولية تحافظ على شكلها (لا تتحوّل لمربع) */
  aspect-ratio: 1054 / 1492;
  flex: 0 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  cursor: pointer;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}

.pcard-prod img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
  /* منع قائمة "حفظ/نسخ الصورة" عند الضغط المطوّل على الجوال */
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* عند المرور: تتوقف الحركة (JS) وتكبر البطاقة مع بقاء شكلها، وتخفت البقية */
.pstrip:hover .pcard-prod { opacity: 0.5; }
.pstrip .pcard-prod:hover {
  opacity: 1;
  transform: scale(1.13);
  z-index: 5;
}

/* ---------- صفحة تفاصيل المشروع: خلفية فيديو + 3 صور عرضية ---------- */

.proddetail {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ink);
}

/* الفيديو خلفية كامل الشاشة، معتم ومموّه */
.proddetail__bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.55); /* بدون بلور — الفيديو واضح مع تعتيم خفيف لوضوح الصور فوقه */
  z-index: 0;
}

.proddetail__scrim {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 85% at 50% 45%, rgba(5,5,5,0.18) 0%, rgba(5,5,5,0.5) 100%);
  z-index: 1;
}

/* الشريط العلوي */
.proddetail__bar {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3vh, 28px) clamp(16px, 4vw, 48px);
}

.proddetail__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 600;
  color: var(--paper);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: rgba(15, 15, 15, 0.45);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.proddetail__back:hover { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.proddetail__back svg { width: 15px; height: 15px; }

.proddetail__meta { text-align: left; line-height: 1.35; }

.proddetail__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(1rem, 2vw, 1.5rem);
  letter-spacing: 0.04em;
  color: var(--paper);
}

.proddetail__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(8px, 1vw, 10px);
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-top: 3px;
}

/* بطاقة معلومات المشروع: بوستر صغير + عنوان + Overview + Highlights
   (نص إنجليزي بمحاذاة يسار مثل تصميم العميل، نفس الأحجام لكل المشاريع) */
.pinfo {
  position: relative;
  z-index: 2;
  direction: ltr;
  text-align: left;
  width: min(94vw, 940px);
  margin-inline: auto;
  display: flex;
  align-items: flex-start;
  gap: clamp(18px, 3vw, 40px);
  padding-block: clamp(10px, 2.5vh, 28px) clamp(20px, 4vh, 44px);
}

.pinfo__poster {
  flex: 0 0 auto;
  width: clamp(104px, 15vw, 190px);
  height: auto;
  border-radius: 8px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}

.pinfo__text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: "IBM Plex Sans Arabic", "Archivo", sans-serif;
}

.pinfo__title {
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.1;
  color: var(--paper);
}

.pinfo__genre {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  margin-top: clamp(8px, 1.5vh, 14px);
  color: var(--paper);
}

.pinfo__metaline {
  font-weight: 400;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  color: var(--paper-dim);
  margin-top: 4px;
}

.pinfo__h {
  font-weight: 700;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--paper);
  margin-top: clamp(18px, 3.2vh, 34px);
}

.pinfo__p {
  font-weight: 400;
  font-size: clamp(0.95rem, 1.45vw, 1.15rem);
  line-height: 1.65;
  color: #E8E8E8;
  margin-top: 8px;
  max-width: 66ch;
}

.pinfo__list {
  margin: 8px 0 0 1.15em;
  padding: 0;
}

.pinfo__list li {
  font-size: clamp(0.95rem, 1.45vw, 1.15rem);
  line-height: 1.65;
  color: #E8E8E8;
  margin-top: 4px;
}

/* على الجوال: البوستر فوق والنص تحته */
@media (max-width: 640px) {
  .pinfo { flex-direction: column; }
  .pinfo__poster { width: clamp(120px, 38vw, 170px); }
}

/* عمود الصور العرضية الثلاث — كبيرة ومتدفّقة (تحتاج تمرير لرؤيتها كاملة) */
.stills {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 3vh, 34px);
  padding: clamp(16px, 3vh, 36px) clamp(16px, 4vw, 40px) clamp(40px, 8vh, 96px);
}

.still {
  width: min(88vw, 780px);
  height: auto;
  border-radius: 10px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(24px);
  animation: still-in 0.8s var(--ease-out) forwards;
  /* منع قائمة "حفظ/نسخ الصورة" عند الضغط المطوّل على الجوال */
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.still:nth-child(1) { animation-delay: 0.1s; }
.still:nth-child(2) { animation-delay: 0.25s; }
.still:nth-child(3) { animation-delay: 0.4s; }

@keyframes still-in {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- الصفحة الأخيرة: تصميم العميل الجاهز ---------- */

.finalpage {
  background: var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-block: clamp(24px, 5vh, 64px);
}

.finalpage__img {
  display: block;
  width: min(100%, 1402px);
  height: auto;
  -webkit-user-drag: none;
  user-select: none;
  /* منع قائمة "حفظ/نسخ الصورة" عند الضغط المطوّل على الجوال */
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* ---------- أيقونة واتساب عائمة (الرئيسية فقط) ---------- */

.wa-float {
  position: fixed;
  right: clamp(14px, 2.5vw, 28px);
  bottom: clamp(14px, 3vh, 28px);
  z-index: 90; /* تحت مشغل الفيديو (100) حتى لا تظهر فوقه */
  width: clamp(46px, 5vw, 54px);
  height: clamp(46px, 5vw, 54px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 15, 15, 0.72);
  border: 1px solid var(--accent);
  color: var(--accent);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s var(--ease-out);
}

.wa-float:hover {
  background: var(--accent);
  color: var(--ink);
  transform: translateY(-2px) scale(1.06);
}

.wa-float svg { width: 52%; height: 52%; }

/* ---------- تحسينات الجوال فقط (لا تمسّ تصميم الديسكتوب) ---------- */

@media (max-width: 640px) {

  /* الهيرو: فيديو العميل ثلاث لقطات جنب بعض — على الشاشة العمودية
     نعرضه كاملًا بدل قصّه على اللقطة الوسطى فقط،
     وارتفاع الهيرو على قدر الفيديو بالضبط (لا فراغ أسود حوله) */
  .screen__video { object-fit: contain; }
  .screen {
    background-size: contain;
    flex: 0 0 auto;
    height: calc(100vw * 1728 / 2966); /* نفس نسبة فيديو الغلاف */
  }
  .frame { height: auto; min-height: 0; }

  /* تقريب المسافات: الأقسام على قدر محتواها بدل ملء شاشة كاملة */
  .clients { padding-top: clamp(48px, 8vh, 64px); }
  .works {
    padding-top: clamp(48px, 8vh, 64px);
    padding-bottom: clamp(28px, 5vh, 44px);
  }
  .photos,
  .prod {
    min-height: 0;
    justify-content: flex-start;
    padding-block: clamp(48px, 8vh, 64px) clamp(36px, 6vh, 52px);
  }

  /* شريط اللقطات: بطاقات أصغر تناسب الجوال + يسمح بالسحب الأفقي بالإصبع
     (pan-y يبقي التمرير العمودي للصفحة شغالاً ويترك الأفقي لسحب JS) */
  .strip { --card-h: clamp(280px, 46vh, 400px); touch-action: pan-y; }

  /* شريط أغلفة الإنتاجات: أصغر حتى يظهر أكثر من غلاف */
  .pstrip { --card-h: clamp(280px, 42vh, 380px); }

  /* كاروسيل الريلز: مساحة على قدر البطاقات المصغّرة */
  .works .stage { height: clamp(280px, 40vh, 340px); }
}

/* ---------- تقليل الحركة ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bar--top, .bar--bottom, .title__name, .title__role {
    animation: none;
  }
  .still { animation: none; opacity: 1; transform: none; }
}