/* =========================================================
   NAGHAM PERFUME — المنتجات · هيرو القوس الدوّار (Arc carousel)
   ---------------------------------------------------------
   قوس تمشي عليه القوارير بحركة لا نهائية: الأطراف مرفوعة
   والمنتصف أخفض وأكبر، مع عمق (تمويه وتلاشٍ) كلّما ابتعدت
   القارورة، وبقعة ضوء ذهبية ثابتة في القلب. الهندسة تُحسب
   في js/plp-arc.js — هذا الملف للشكل فقط.
   ========================================================= */

.plp-arc {
  /* خطّ العنوان لهذه الكتلة وحدها. بدّليه من هنا فقط لو حبّيتي
     تجرّبي عائلة ثانية — مثلًا: "Amiri", serif (كلاسيكي فخم)
     أو "Tajawal", sans-serif (هندسي حديث). */
  --plp-display: "El Messiri", "Alexandria", serif;

  position: relative;
  overflow: hidden;
  background: #fff;
  /* نَفَس أوسع فوق: العنوان لا يلتصق بالهيدر. */
  padding-block-start: calc(var(--header-h) + clamp(1.7rem, 4.6vh, 3.1rem));
  /* ونَفَس أوسع تحت: القوارير لا تلامس شريط التصنيفات. */
  padding-block-end: clamp(1.7rem, 4.2vh, 2.9rem);
}

/* ---------- 1. العنوان ---------- */
/* كتلة واحدة متمركزة، سطر تحت سطر:
      سطر لاتيني  →  العنوان  →  شعرة ذهبية  →  الوصف
   كل سطر أضيق من الذي قبله، فالكتلة تقرأ كمثلّث هادئ يقود
   العين للنزول نحو الرفّ بدل عمودين متجاورين. */
.plp-arc__head {
  position: relative;
  z-index: 3;                 /* الكتابة فوق أطراف القوس المرتفعة */
  max-inline-size: min(var(--container), 60rem);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(.45rem, 1.3vh, .85rem);
}

/* السطر اللاتيني بخطّ لاتيني (Marcellus) لا بالعربي: حروف
   رومانية داخل خطّ عربي تطلع باهتة وغير متناسقة. تباعد واسع
   وحجم صغير بين شعرتين ذهبيتين. */
.plp-arc__eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(.7rem, 1.6vw, 1.1rem);
  font-family: var(--font-en);
  font-weight: 400;
  font-size: clamp(.64rem, .58rem + .16vw, .76rem);
  letter-spacing: .42em;
  text-indent: .42em;         /* يعوّض تباعد آخر حرف فيبقى متمركزًا */
  text-transform: uppercase;
  color: var(--gold-deep);
  direction: ltr;
  margin-block-end: clamp(.1rem, .6vh, .35rem);
}
.plp-arc__eyebrow::before,
.plp-arc__eyebrow::after {
  content: "";
  inline-size: clamp(26px, 5.5vw, 62px);
  block-size: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
  flex: none;
}
.plp-arc__eyebrow::after { background: linear-gradient(270deg, transparent, var(--gold)); }

/* العنوان: وزن 600 لا 700 (الـ700 يقفل عيون الحروف العربية)،
   وبلا letter-spacing سالب — التباعد السالب في العربية يضغط
   الوصلات بين الحروف ويخرّب شكل الكلمة. الارتفاع السطري أوسع
   حتى تتنفّس الحركات (الضمّة في "عالمٌ"). */
.plp-arc__title {
  font-family: var(--plp-display);
  font-weight: 600;
  font-size: clamp(1.95rem, 1.15rem + 2.8vw, 3.4rem);
  line-height: 1.32;
  letter-spacing: 0;
  color: var(--ink);
  text-wrap: balance;
  max-inline-size: 20ch;
}
/* الكلمة المميّزة بتدرّج ذهبي داخل النص نفسه. */
.plp-arc__title em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
/* شعرة ذهبية تفصل العنوان عن الوصف — بديل الخطّ العمودي الذي
   كان بينهما لمّا كانا جنبًا إلى جنب. */
.plp-arc__title::after {
  content: "";
  display: block;
  inline-size: clamp(52px, 8vw, 92px);
  block-size: 1px;
  margin: clamp(.7rem, 1.7vh, 1.1rem) auto 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* الوصف: سطر واحد لا ينكسر، بوزن ٤٠٠ ولون أغمق من السابق —
   أقوى قليلًا حتى يوازن العنوان بدل أن يبهت تحته. */
.plp-arc__lead {
  max-inline-size: 100%;
  font-family: var(--font-ar);
  font-size: clamp(.9rem, .82rem + .3vw, 1.06rem);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .005em;
  color: var(--ink-soft);
  white-space: nowrap;
}
/* تحت ٦٨٠px السطر الواحد ما بيسع، فيرجع ينكسر بتوازن. */
@media (max-width: 680px) {
  .plp-arc__lead {
    white-space: normal;
    max-inline-size: 34ch;
    line-height: 1.85;
    text-wrap: balance;
  }
}

/* ---- دخول متدرّج للعنوان: سطر بعد سطر، ثم القوس ---- */
.plp-arc__head > * { opacity: 0; translate: 0 16px; }
.plp-arc.is-ready .plp-arc__head > * {
  opacity: 1;
  translate: 0 0;
  transition: opacity .9s var(--ease-out-expo), translate .9s var(--ease-out-expo);
  transition-delay: calc(var(--step, 0) * 120ms);
}
.plp-arc__stage { opacity: 0; transition: opacity 1s var(--ease-out-expo) .35s; }
.plp-arc.is-ready .plp-arc__stage { opacity: 1; }

/* ---------- 2. المسرح ---------- */
/* ارتفاع مقيَّد بالـvh حتى لا "يوكل" الهيرو الصفحة على الشاشات
   القصيرة، ومقيَّد بحد أعلى ثابت حتى لا يتضخم على الشاشات الطويلة. */
.plp-arc__stage {
  --floor: clamp(24px, 4.4vh, 40px);
  position: relative;
  inline-size: 100%;
  /* أطول قليلًا من السابق: القوس صار أعمق (قطر أصغر) فالأطراف
     ترتفع أكثر، ولازم مساحة فوق حتى لا تُقصّ آخر قارورة. */
  block-size: clamp(280px, 39vh, 430px);
  margin-block-start: clamp(.3rem, 1.2vh, .8rem);
  touch-action: pan-y;            /* السحب أفقي لنا، والتمرير العمودي للصفحة */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  overflow: hidden;
}
.plp-arc__stage.is-dragging { cursor: grabbing; }

/* حواف تتلاشى بدل أن تُقصّ القارورة قصًّا حادًّا */
.plp-arc__track {
  position: absolute;
  inset: 0;
  direction: ltr;                 /* الحساب بالبكسل — لا نريد قلب المحاور */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
}

/* خط القوس الذهبي — مساره يُرسم من الـJS ليطابق مسار القوارير */
.plp-arc__curve {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 0;
}
.plp-arc__curve path { fill: none; }
.plp-arc__rail {
  stroke: url(#plpArcGrad);
  stroke-width: 1.1;
}
/* ومضة ذهبية تمشي على القضيب: شرطة قصيرة تدور على طول المسار.
   طول المسار و dasharray يُضبطان من الـJS بعد رسم المنحنى. */
.plp-arc__glint {
  stroke: var(--gold-light);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .85;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--gold-light) 70%, transparent));
  animation: plp-arc-glint 9s linear infinite;
}
@keyframes plp-arc-glint {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}

/* بقعة ضوء ذهبية ثابتة في قلب القوس — تعطي عمقًا وتقول أين
   ينظر البصر، وتتنفّس ببطء حتى لا يبدو المشهد صورة ساكنة. */
.plp-arc__spot {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: -22%;
  translate: -50% 0;
  inline-size: min(38%, 500px);
  block-size: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%,
    color-mix(in srgb, var(--gold) 13%, transparent) 0%,
    color-mix(in srgb, var(--gold) 4%,  transparent) 46%,
    transparent 74%);
  filter: blur(24px);
  pointer-events: none;
  animation: plp-arc-breathe 8s ease-in-out infinite;
}
@keyframes plp-arc-breathe {
  0%, 100% { opacity: .55; scale: 1; }
  50%      { opacity: .85;  scale: 1.08; }
}

/* ---------- 3. القارورة ---------- */
.arc-item {
  position: absolute;
  inset-block-end: var(--floor);
  inset-inline-start: 50%;
  inline-size: auto;
  /* الارتفاع مشتقّ من المسرح نفسه: كامل الارتفاع ناقص الأرضية
     وناقص هامش صغير للرفعة والطفو — فالقارورة الوسطى (وهي
     الأكبر) لا تُقصّ من فوق مهما تغيّر ارتفاع المسرح. */
  /* الارتفاع مشتقّ من المسرح، مقسومًا على أقصى تكبير للقارورة
     الوسطى (1.42) حتى تتّسع لها المساحة بلا قصّ من فوق. */
  block-size: calc((100% - var(--floor) - 20px) / 1.42);
  max-block-size: 310px;
  padding: 0;
  border: 0;
  background: none;
  transform-origin: 50% 100%;
  will-change: transform;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.arc-item__img {
  display: block;
  /* المعايرة في js/plp-arc.js تكتب transform على هذا العنصر:
     الأصل عند أسفل المنتصف حتى تقف القارورة على الخط. */
  transform-origin: 50% 100%;
  block-size: 100%;
  inline-size: auto;
  max-inline-size: clamp(112px, 16vw, 260px);
  object-fit: contain;
  object-position: bottom center;
  pointer-events: none;
  /* لا انعكاس هنا: صور المنتجات مستطيلات بخلفية بيضاء، فالمنعكس
     يطلع لوحًا رماديًّا تحت كل قارورة بدل أن يكون انعكاس زجاج. */
  /* بلا ظل حول الصورة: صور المنتجات خلفيتها بيضاء، والظل
     يرسم حدود المستطيل بدل أن يظلّل القارورة. الظل الأرضي
     تحت العنصر هو ما يثبّتها على الخط. */
}

/* ظل أرضي خفيف — يثبّت القارورة على الخط بدل أن تطفو فوقه */
.arc-item::after {
  content: "";
  position: absolute;
  inset-inline: -6%;
  inset-block-end: -4px;
  block-size: 15px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(23, 19, 16, .18) 0%, transparent 70%);
  filter: blur(4px);
  opacity: .6;
  pointer-events: none;
}

/* بديل الصورة الناقصة: قارورة مرسومة بخطّ ذهبي وحرف الدار في
   قلبها. مقاسها وموضعها مثل القوارير المصوّرة تمامًا (واقفة على
   الخط، بنفس نسبة الارتفاع) حتى لا تكسر إيقاع الرفّ. */
.arc-item__ghost {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 50%;
  translate: -50% 0;
  block-size: 74%;
  aspect-ratio: 3 / 5;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.arc-item__ghost svg {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: .5;
}
.arc-item__ghost em {
  position: relative;
  font-family: var(--font-en);
  font-style: normal;
  font-size: clamp(1rem, 1.5vw, 1.55rem);
  letter-spacing: .02em;
  color: var(--gold-deep);
  opacity: .8;
  translate: 0 12%;
}

/* عند الـhover: الحركة تقف والقارورة تكبر وترتفع قليلًا — والتكبير
   يُحسب داخل نفس الـtransform في js/plp-arc.js. أي ظل أو توهّج هنا
   يرسم حدود المستطيل الأبيض لصورة المنتج بدل أن يضيء القارورة،
   ولهذا لا يوجد أي فلتر في هذه الحالة. */
.arc-item.is-hover::after { opacity: .9; }

/* ---------- 4. شاشات صغيرة ---------- */
@media (max-width: 760px) {
  .plp-arc__stage { block-size: clamp(256px, 36vh, 344px); }
  .arc-item { max-block-size: 258px; }
  .plp-arc__title { max-inline-size: 16ch; }
  .plp-arc__lead  { max-inline-size: 36ch; line-height: 1.9; }
}

@media (max-width: 460px) {
  .plp-arc__eyebrow { letter-spacing: .3em; text-indent: .3em; font-size: .6rem; }
  .plp-arc__eyebrow::before,
  .plp-arc__eyebrow::after { inline-size: 20px; }
  .plp-arc__stage { block-size: 248px; }
  .arc-item__img { max-inline-size: 112px; }
}

/* ---------- 5. تقليل الحركة ---------- */
/* لا دوران تلقائي، لكن السحب والأسهم تبقى شغّالة. */
@media (prefers-reduced-motion: reduce) {
  .plp-arc__spot, .plp-arc__glint { animation: none; }
  .plp-arc__glint { opacity: 0; }
  .plp-arc__head > *, .plp-arc__stage { opacity: 1; translate: none; }
  .arc-item__cap { transition: none; }
}

/* ---------- 6. الوصلة مع الشبكة ---------- */
/* النقر على القارورة الوسطى ينزل إلى بطاقتها؛ ومضة قصيرة
   تقول "هذه هي" بدل أن تترك الزائرة تبحث عنها بعد التمرير. */
.pcard.is-flash {
  animation: plp-arc-flash 1.4s var(--ease-luxe);
}
@keyframes plp-arc-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 55%, transparent); }
  70%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 30%, transparent); }
}