/* ============================================================
   ALC Site Enhancer v3.1 — الطبقة البصرية «المسار الذهبي»
   طبقة بصرية فقط: لا تغيير في النصوص أو الهيكل أو حركة 3.0.
   كل القواعد مقيدة بـ [data-m2] (تُضاف من الإضافة) للرجوع الفوري.
   ============================================================ */

/* ── 1) الهيرو: فيديو الموجات + تدرّج يحفظ وضوح النص + المسار الذهبي ── */
[data-m2] #hero.alc-m2-on { background: var(--ink); }
[data-m2] .alc-m2-hero {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background-color: var(--ink); background-size: cover; background-position: center;
}
[data-m2] .alc-m2-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.4s var(--ease);
}
[data-m2] .alc-m2-video.is-ready { opacity: .9; }
/* تدرّج: داكن خلف عمود النص (inline-start) وأخف عند الطرف الآخر، وتلاشٍ سفلي نحو شريط الثقة */
/* (الاتجاهات المنطقية غير مدعومة داخل التدرجات في Chromium → قاعدتان صريحتان RTL/LTR) */
[data-m2] .alc-m2-hero::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(15,22,32,.35) 0%, rgba(15,22,32,0) 30%, rgba(15,22,32,0) 70%, rgba(15,22,32,.92) 100%),
    linear-gradient(to left, rgba(15,22,32,.90) 0%, rgba(15,22,32,.66) 48%, rgba(15,22,32,.38) 100%);
}
[data-m2][dir="ltr"] .alc-m2-hero::after {
  background:
    linear-gradient(to bottom, rgba(15,22,32,.35) 0%, rgba(15,22,32,0) 30%, rgba(15,22,32,0) 70%, rgba(15,22,32,.92) 100%),
    linear-gradient(to right, rgba(15,22,32,.90) 0%, rgba(15,22,32,.66) 48%, rgba(15,22,32,.38) 100%);
}
/* المسار الذهبي: يُرسم مرة واحدة عند فتح الصفحة ثم يتنفس بهدوء */
[data-m2] .alc-m2-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
[data-m2] .alc-m2-path path {
  fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke;
  stroke-linecap: round; opacity: .75;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(179,155,110,.55));
}
[data-m2] #hero.alc-m2-on.loaded .alc-m2-path path, [data-m2-js] #hero.alc-m2-on .alc-m2-path path {
  animation: alc-m2-draw 2.6s .35s var(--ease) forwards, alc-m2-breathe 7s 3.2s ease-in-out infinite;
}
[dir="ltr"] [data-m2] .alc-m2-path, [data-m2][dir="ltr"] .alc-m2-path { transform: scaleX(-1); }
@keyframes alc-m2-draw { to { stroke-dashoffset: 0; } }
@keyframes alc-m2-breathe { 0%,100% { opacity: .75; } 50% { opacity: .45; } }
/* الهيرو يظل كما هو: الشبكة الذهبية والتوهج يُرسمان فوق الفيديو كنسيج خفيف */
[data-m2] #hero.alc-m2-on .hero-grid, [data-m2] #hero.alc-m2-on .hero-glow { z-index: 1; }
[data-m2] #hero.alc-m2-on .hero-watermark { z-index: 2; }

/* الجوال: لا فيديو (صورة الملصق فقط) — السرعة أولاً */
@media (max-width: 860px) {
  [data-m2] .alc-m2-video { display: none; }
  [data-m2] .alc-m2-hero::after {
    background:
      linear-gradient(to bottom, rgba(15,22,32,.55) 0%, rgba(15,22,32,.35) 40%, rgba(15,22,32,.95) 100%);
  }
}

/* ── 2) خيط ذهبي يُرسم مع التمرير على حافة قسم الخدمات ───── */
[data-m2] #sv-preview { position: relative; }
[data-m2] .alc-m2-thread {
  position: absolute; top: 0; bottom: 0; inset-inline-start: max(16px, calc((100% - 1280px) / 2 + 12px));
  width: 1.5px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--gold) 12%, var(--gold) 88%, transparent);
  transform: scaleY(var(--alc-thread, 0)); transform-origin: top; opacity: .55;
  box-shadow: 0 0 10px rgba(179,155,110,.35);
}
@media (max-width: 860px) { [data-m2] .alc-m2-thread { display: none; } }

/* ── 3) بطاقات الخدمات في الرئيسية: صورة الهوية + اتساع من إطار ضيق ── */
[data-m2] .sv-item { isolation: isolate; }
[data-m2] .sv-item::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background-image: var(--m2-img); background-size: cover; background-position: center;
  opacity: .62; transform: scale(1.08);
  transition: opacity .7s var(--ease), transform 1.4s var(--ease);
}
/* مساحة علوية تُظهر الصورة قبل النص (سطح المكتب) */
@media (min-width: 861px) { [data-m2] .sv-item { padding-top: 132px; } }
[data-m2] .sv-item::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(26,35,50,.97) 0%, rgba(26,35,50,.92) 38%, rgba(26,35,50,.35) 72%, rgba(26,35,50,.15) 100%);
  transition: background .4s;
}
[data-m2] .sv-item:hover::before { opacity: .85; transform: scale(1); }
[data-m2] .sv-item:hover::after { background: linear-gradient(to top, rgba(26,35,50,.96) 0%, rgba(26,35,50,.88) 38%, rgba(26,35,50,.22) 72%, rgba(26,35,50,.05) 100%); }
[data-m2] .sv-item[data-num="01"] { --m2-img: url(../media/img/balance-card.webp); }
[data-m2] .sv-item[data-num="02"] { --m2-img: url(../media/img/ribbons-card.webp); }
[data-m2] .sv-item[data-num="03"] { --m2-img: url(../media/img/path-card.webp); }
[data-m2] .sv-item[data-num="04"] { --m2-img: url(../media/img/gates-card.webp); }
[data-m2] .sv-item[data-num="05"] { --m2-img: url(../media/img/prism-card.webp); }
[data-m2] .sv-item[data-num="06"] { --m2-img: url(../media/img/shield-card.webp); }
/* الاتساع: من إطار ضيق إلى اللوح الكامل عند الظهور (مرة واحدة، فوق حركة reveal الحالية) */
.alc-js[data-m2] .sv-item.reveal { clip-path: inset(14% 10% 14% 10% round 12px); }
.alc-js[data-m2] .sv-item.reveal.in {
  clip-path: inset(0 0 0 0 round 0px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), clip-path 1s var(--ease), background .24s;
}

/* ── 4) أغلفة المقالات: دخول من العمق في البطاقات + خلفية مخفّفة في رأس المقال ── */
[data-m2] .alc-card .alc-cover {
  display: block; position: relative; aspect-ratio: 16 / 7; overflow: hidden;
  background: var(--navy-2); perspective: 900px;
}
[data-m2] .alc-card.article-featured .alc-cover { aspect-ratio: 16 / 5.4; }
[data-m2] .alc-card .alc-cover img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform-origin: 50% 100%;
  transition: transform 1.1s var(--ease), opacity .9s var(--ease), filter .5s;
}
.alc-js[data-m2] .alc-card.reveal .alc-cover img { opacity: 0; transform: translateY(16px) scale(1.12) rotateX(7deg); }
.alc-js[data-m2] .alc-card.reveal.in .alc-cover img { opacity: 1; transform: none; }
[data-m2] .alc-card .alc-cover::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,27,36,.10) 0%, rgba(20,27,36,.0) 45%, rgba(20,27,36,.92) 100%);
}
[data-m2] .alc-card:hover .alc-cover img { transform: scale(1.04); }
[data-m2] .alc-card .alc-card-top { margin-top: -22px; position: relative; z-index: 1; }
/* رأس صفحة المقال */
[data-m2] .alc-m2-cover {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(to left, rgba(15,22,32,.82) 0%, rgba(15,22,32,.30) 55%, rgba(15,22,32,.10) 100%), var(--m2-cover);
  background-size: cover; background-position: center; opacity: .34;
  -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
  animation: alc-m2-cover-in 1.8s var(--ease) both;
}
[data-m2][dir="ltr"] .alc-m2-cover { background-image: linear-gradient(to right, rgba(15,22,32,.82) 0%, rgba(15,22,32,.30) 55%, rgba(15,22,32,.10) 100%), var(--m2-cover); }
@keyframes alc-m2-cover-in { from { opacity: 0; transform: scale(1.06); } to { opacity: .34; transform: none; } }

/* ── تقليل الحركة: كل شيء ثابت فوراً ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-m2] .alc-m2-video { display: none; }
  [data-m2] .alc-m2-path path { animation: none !important; stroke-dashoffset: 0; opacity: .6; }
  [data-m2] .alc-m2-thread { transform: none; opacity: .35; }
  .alc-js[data-m2] .sv-item.reveal, .alc-js[data-m2] .sv-item.reveal.in { clip-path: none; transition: none; }
  [data-m2] .sv-item::before { transition: none; transform: none; }
  .alc-js[data-m2] .alc-card.reveal .alc-cover img, .alc-js[data-m2] .alc-card.reveal.in .alc-cover img { opacity: 1; transform: none; transition: none; }
  [data-m2] .alc-m2-cover { animation: none; }
}

/* ============================================================
   v3.2 — ملاحظات 14 أكتوبر
   ============================================================ */

/* ── الهيرو: عبارات متغيرة (كشف رأسي داخل إطار، ارتفاع ثابت، H1 واحد) ── */
[data-m2] .hero-title.alc-rot { position: relative; display: block; }
[data-m2] .alc-rot-win { display: block; position: relative; }
[data-m2] .alc-rot-item { display: block; }
[data-m2] .alc-rot-item:not(.is-on) { display: none; }                       /* بدون JavaScript/تقليل الحركة: العبارة الأولى فقط */
[data-m2-js] .alc-rot.is-live .alc-rot-win { overflow: hidden; }
[data-m2-js] .alc-rot.is-live .alc-rot-item {
  display: block; position: absolute; top: 50%; inset-inline: 0;
  opacity: 0; transform: translateY(calc(-50% + 38%));
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events: none;
}
[data-m2-js] .alc-rot.is-live .alc-rot-item.is-on  { opacity: 1; transform: translateY(-50%); pointer-events: auto; }
[data-m2-js] .alc-rot.is-live .alc-rot-item.is-out { opacity: 0; transform: translateY(calc(-50% - 34%)); }
/* الحركة الأصلية للهيرو بعد إدراج زر الإيقاف (nth-child تغيّر) */
[data-m2] #hero.loaded .h-anim.alc-h-lead    { transition: opacity .7s .44s var(--ease), transform .7s .44s var(--ease); }
[data-m2] #hero.loaded .h-anim.alc-h-actions { transition: opacity .7s .58s var(--ease), transform .7s .58s var(--ease); }
/* زر الإيقاف/الاستئناف: صغير، واضح، لا يزاحم الأزرار */
[data-m2] .alc-rot-toggle {
  display: none; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; border: 1px solid var(--h-dark); color: var(--fd3); background: rgba(246,242,234,.03);
  margin-top: 10px; transition: color .18s, border-color .18s, background .18s;
}
[data-m2-js] .alc-rot-toggle { display: inline-flex; }
[data-m2] .alc-rot-toggle:hover, [data-m2] .alc-rot-toggle:focus-visible { color: var(--gold); border-color: var(--gold-40); outline: none; }
[data-m2] .alc-rot-toggle .ic-play { display: none; }
[data-m2] .alc-rot-toggle[aria-pressed="true"] .ic-pause { display: none; }
[data-m2] .alc-rot-toggle[aria-pressed="true"] .ic-play { display: block; }
@media (prefers-reduced-motion: reduce) { [data-m2] .alc-rot-toggle { display: none !important; } }

/* ── قسم «عن المكتب»: الصورة الجديدة بنفس الإطار والتدرّج ─── */
[data-m2] .brand-strip-img img { object-position: center; }

/* ── القطاعات: صورة أعلى البطاقة + اتساع الإطار عند الظهور ── */
[data-m2] .ind-card.alc-ind { padding: 0 0 36px; }
[data-m2] .alc-ind-media { display: block; position: relative; aspect-ratio: 16 / 8; overflow: hidden; margin: 0 0 24px; background: var(--navy-3); }
[data-m2] .alc-ind-media img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); transition: transform 1.3s var(--ease); }
[data-m2] .alc-ind-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,35,50,0) 55%, var(--navy-2) 100%); }
[data-m2] .ind-card.alc-ind > :not(.alc-ind-media) { margin-inline: 30px; }
[data-m2] .ind-card.alc-ind .ind-ic { margin-top: -52px; position: relative; z-index: 1; background: var(--navy-2); }
[data-m2] .ind-card.alc-ind .ind-tags { margin-bottom: 30px; }
.alc-js[data-m2] .ind-card.alc-ind.reveal { clip-path: inset(10% 7% 10% 7% round 12px); }
.alc-js[data-m2] .ind-card.alc-ind.reveal.in { clip-path: inset(0 0 0 0 round 0px); transition: opacity .7s var(--ease), transform .7s var(--ease), clip-path 1s var(--ease), box-shadow .26s, border-color .26s; }
.alc-js[data-m2] .ind-card.alc-ind.reveal.in .alc-ind-media img { transform: scale(1); }
@media (max-width: 600px) {
  [data-m2] .alc-ind-media { aspect-ratio: 16 / 6; }
  .alc-js[data-m2] .ind-card.alc-ind.reveal { clip-path: inset(0 0 0 0 round 12px); }   /* الجوال: نسخة أبسط بلا اتساع */
}

/* ── المقالات: المقال المميز متوازن (صورة جانبية بدل شريط عريض) ── */
@media (min-width: 861px) {
  [data-m2] .alc-card.article-featured { display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: auto 1fr; }
  [data-m2] .alc-card.article-featured .alc-cover { grid-row: 1 / 3; grid-column: 1; aspect-ratio: auto; min-height: 300px; height: 100%; }
  [data-m2] .alc-card.article-featured .alc-cover::after { background: linear-gradient(to left, rgba(20,27,36,.0) 60%, rgba(20,27,36,.85) 100%); }
  [data-m2][dir="ltr"] .alc-card.article-featured .alc-cover::after { background: linear-gradient(to right, rgba(20,27,36,.0) 60%, rgba(20,27,36,.85) 100%); }
  [data-m2] .alc-card.article-featured .alc-card-top { grid-column: 2; margin-top: 0; }
  [data-m2] .alc-card.article-featured .article-body { grid-column: 2; grid-template-columns: 1fr; }
  [data-m2] .alc-card.article-featured h3 { grid-row: auto; }
  [data-m2] .alc-card.article-featured p { grid-row: auto; }
}
/* بطاقات المقالات بلا تواريخ: الصف العلوي يبقى متوازناً */
[data-m2] .alc-card .alc-card-top .article-cat:last-child { margin-inline-end: auto; }

/* ── تقليل الحركة (v3.2) ── */
@media (prefers-reduced-motion: reduce) {
  .alc-js[data-m2] .ind-card.alc-ind.reveal, .alc-js[data-m2] .ind-card.alc-ind.reveal.in { clip-path: none; transition: none; }
  [data-m2] .alc-ind-media img { transform: none; transition: none; }
}
/* الأداء: المقال المميز فوق الطية هو عنصر LCP — غلافه يظهر فوراً بلا حركة عمق (بقية البطاقات تدخل من العمق) */
.alc-js[data-m2] .alc-card.article-featured.reveal .alc-cover img { opacity: 1; transform: none; transition: transform 1.1s var(--ease); }