/* «أعمالنا» وصفحاتُ المشاريع السبع كـlusion.co/projects وصفحات مشاريعه (٤ تشرين الأوّل ٢٠٢٦) — «اريد تطبق كل الصفحه…
   بكل تفاصيله وانميشناته وانتقالاتها وحركه الماوس… حته الي داخل الصفحات… نسخ لصق». المقاساتُ مقاساتُ المرجع: شبكةُ ١٢
   عموداً بفجوة 2vw، وهامشُ max(5vw, 40px)، وعنوانٌ بـ17vw، وبطاقةٌ ارتفاعُها ٦٥٪ من عرضها، ونصفُ قطرٍ ٢٠ (١٠ على التلفون).
   والصفحةُ ليليّةٌ بألوان الهويّة (الموقعُ ليليٌّ وحدَه) ومن اليمين إلى اليسار، فما كان يساراً هناك يمينٌ هنا. والترويسةُ
   والذيلُ والخطوطُ من site.css كبقيّة الصفحات. والحركاتُ في assets/fx/works/. */

.wk {
  --wk-gap: 2vw;
  --wk-px: max(5vw, 40px);
  --wk-py: clamp(30px, 4vw, 50px);
  --wk-radius: 20px;
  --wk-cross: clamp(.875rem, 1vw, 2rem);
  --wk-head: clamp(1rem, 1vw, 2rem);
  --wk-vh: 1vh;
  --wk-bg: var(--bg);
  --wk-fg: var(--fg);
  --wk-dim: var(--fg-3);
  --wk-signal: var(--signal);
  --pd-bg: var(--bg);
  --pd-text: #F5F7F7;
  --pd-highlight: var(--signal);
  --pd-btn-bg: var(--paper);
  --pd-btn-text: var(--ink);
  --pd-btn-bg-hover: var(--signal);
  --pd-btn-text-hover: var(--ink);
  margin: 0;
  background: var(--wk-bg);
  color: var(--wk-fg);
  font-family: var(--font-ar);
}
@media (min-aspect-ratio: 21/9) { .wk { --wk-px: max(6vw, 60px); } }
@media (max-width: 812px) { .wk { --wk-gap: 4vw; --wk-radius: 10px; --wk-px: 25px; --wk-py: 25px; } }
@media (max-width: 400px) { .wk { --wk-px: 15px; --wk-py: 15px; } }
@media (max-width: 380px) { .wk { --wk-head: clamp(.75rem, 1vw, 2rem); } }
.wk a { color: inherit; text-decoration: none; }
.wk .lat { font-family: var(--font-lat); }

/* ---------- الهيكل: لا يتحرّك المتصفّح، بل تُزاح الصفحةُ بتحويلٍ واحد ---------- */
html.wk-js, html.wk-js body.wk { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.wk-js .wk-view { position: fixed; inset: 0; z-index: 1; overflow: hidden; touch-action: pinch-zoom; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
html.wk-js .wk-view a, html.wk-js .wk-view img { -webkit-user-drag: none; }
html.wk-js .pd-desc, html.wk-js .ag-footer { -webkit-user-select: text; user-select: text; }
.wk-content { position: relative; width: 100%; }
html.wk-js .wk-content { will-change: transform; }
.wk-gl { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
html:not(.wk-gl-on) .wk-gl { display: none; }
.wk-sec { position: relative; width: 100%; box-sizing: border-box; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--wk-gap); padding: var(--wk-py) var(--wk-px); }
@media (max-width: 812px) { .wk-sec { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wk *, .wk *::before, .wk *::after { box-sizing: border-box; }

/* ---------- شاشةُ التحميل: الشريطُ والعلامةُ في لوحةِ الانتقال. والعدّادُ الذي كان يعدّ إلى المئة في الزاوية ذهب
   بكلمته: «احذف العداد الي يحسب من 1 لل100 مو حلو» ---------- */
.wk-overlay { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: auto; display: none; }
.wk-pre { position: fixed; inset: 0; z-index: 210; pointer-events: none; display: none; }
html.wk-js .wk-pre.on { display: block; }
html.wk-js .wk-pre.on.is-black { background: #000; }

/* ---------- مؤشّرُ التمرير: شريطٌ رفيعٌ في الحافّة يظهر وأنت تمرّر ---------- */
.wk-bar { position: fixed; z-index: 60; width: 6px; height: calc(var(--wk-vh) * 20); top: calc(var(--wk-vh) * 40); inset-inline-end: 16px; border-radius: 3px; background: rgba(245, 247, 247, .1); opacity: 0; pointer-events: none; }
.wk-bar i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 3px; background: var(--paper); transform-origin: 0 0; }
@media (max-width: 812px) { .wk-bar { width: 2px; border-radius: 1px; inset-inline-end: 6px; } }
html:not(.wk-js) .wk-bar { display: none; }

/* ---------- العنوان: «أعمالنا» بـ17vw، والعددُ والسهمُ عند نهايته. كان بوزن ٤٠٠ وضمّةٍ معلّقة فبدا خيطاً رفيعاً بين
   عناوين الموقع العريضة — «التايتل مو حلو… اريده اجمل» — فصار بوزنها (٨٠٠) بلا تشكيل، وآخرَه نقطةٌ بلون الإشارة: نواةُ
   العلامة. والنقطةُ تقفز بعد آخر حرفٍ (cards.js يحرّك --wk-dot) ---------- */
.wk-list-main::after { content: ""; clear: both; display: block; }
.wk-list-top { position: relative; grid-column: 1 / span 12; margin-top: calc(var(--wk-vh) * 20); }
.wk-list-tw { position: relative; width: fit-content; font-size: 17vw; line-height: 1; right: -.01em; }
.wk-list-title { position: relative; display: block; margin: 0; font: 800 1em/1.1 var(--font-ar); overflow: hidden; right: -1vw; padding-bottom: .12em; margin-bottom: -.12em; }
.wk-list-title .wk-c { display: inline-block; position: relative; }
.wk-list-title::after { content: ""; display: inline-block; width: .16em; height: .16em; border-radius: 50%; background: var(--signal, #00C7B1); margin-inline-start: .06em; vertical-align: .02em; transform: scale(var(--wk-dot, 1)); }
/* وحين ترسم الصفحة صار العنوانُ نجوماً (fx/works/title.js — «الرقم 1 حلو طبقه»): الـh1 يبقى في مكانه للقارئ وللتخطيط
   شفّافاً، ويرجع هو إن تعثّرت النجوم (wk-title-dom) */
html.wk-gl-on:not(.wk-title-dom) .wk-list-title { color: transparent; }
html.wk-gl-on:not(.wk-title-dom) .wk-list-title::after { background: transparent; }
/* وعددُ الأعمال «07» وسهمُه ذهبا بكلمته («احذفه»): الكلمةُ وحدَها */
@media (max-width: 812px) { .wk-list-top { grid-column: 1 / span 6; margin-top: 6em; margin-bottom: 2em; } }

/* ---------- الشبكة: عمودان، والبطاقةُ ٦٥٪ من عرضها ---------- */
.wk-grid { position: relative; grid-column: 1 / span 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--wk-gap); margin-top: calc(var(--wk-vh) * 8); }
@media (max-width: 812px) { .wk-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-column: 1 / span 6; margin-top: 0; } }
.wk-item { position: relative; grid-column: span 6 / span 6; cursor: pointer; display: block; }
.wk-item:nth-child(n+3) { margin-top: 5em; }
@media (min-aspect-ratio: 21/9) { .wk-item:nth-child(n+3) { margin-top: 10em; } }
@media (max-width: 812px) { .wk-item:nth-child(n+3) { margin-top: 0; } .wk-item:not(:first-child) { margin-top: 2em; } }
.wk-item-main { position: relative; padding-top: 65%; }
.wk-item-image { position: absolute; inset: 0; border-radius: 15px; overflow: hidden; background: var(--bg-2); }
.wk-item-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.35, 0, 0, 1); }
html.wk-gl-on .wk-item-image { visibility: hidden; }
html:not(.wk-gl-on) .wk-item:hover .wk-item-image img { transform: scale(1.04); }
.wk-item-foot { position: relative; width: 100%; }
.wk-item-tags { font: 500 .9vw/1.2 var(--font-ar); margin: 1.5em 0 1em; color: var(--wk-fg); white-space: nowrap; overflow: hidden; min-height: 1.2em; }
@media (min-aspect-ratio: 21/9) { .wk-item-tags { font-size: .6vw; } }
@media (max-width: 812px) { .wk-item-tags { font-size: 2.5vw; } }
.wk-item-name { position: relative; overflow: hidden; font: 400 3vw/1.3 var(--font-ar); height: 1.3em; inset-inline-start: -.06em; }
@media (min-aspect-ratio: 21/9) { .wk-item-name { font-size: 2vw; } }
@media (max-width: 812px) { .wk-item-name { font-size: 6.5vw; } }
.wk-item-icon { display: inline-block; position: absolute; width: .8em; height: .8em; top: .25em; inset-inline-start: -1em; background: currentColor; -webkit-mask: var(--wk-arrow) center / contain no-repeat; mask: var(--wk-arrow) center / contain no-repeat; }
.wk { --wk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 12H4.5M10.5 5.5 4 12l6.5 6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
.wk-item-name-in { position: relative; display: flex; height: 100%; }
.wk-roll-w { display: flex; }
.wk-roll-col { display: flex; flex-direction: column; will-change: transform; }
.wk-roll-col span { display: block; height: 1.3em; line-height: 1.3em; white-space: pre; }
.wk-roll-sp { width: .3em; }
html.wk-js .wk-roll-col { transform: translateY(-400%); }
html:not(.wk-gl-on) .wk-item:hover .wk-item-name-in { transform: translateX(-1.5em); transition: transform .5s cubic-bezier(.35, 0, 0, 1); }

/* ---------- النهاية: «خلّينا نشتغل سوا!» وأشكالٌ تنصبّ وتتكوّم ---------- */
.wk-end { position: relative; height: calc(var(--wk-vh) * 350); font-size: clamp(.875rem, 1vw, 2rem); color: var(--wk-fg); padding: 0; display: block; }
.wk-end-outer { position: absolute; width: 100%; height: calc(var(--wk-vh) * 100); }
.wk-end-inner { position: absolute; inset: 0; }
.wk-end-content { position: absolute; left: 50%; top: calc(50% - 3em); transform: translate(-50%, -50%); text-align: center; width: 100%; }
@media (max-width: 560px) { .wk-end-content { top: 40%; } }
.wk-end-crosses { position: absolute; width: 60vw; height: calc(100% + 10vh); left: calc(50% - 30vw); top: -5vh; pointer-events: none; }
@media (max-width: 560px) { .wk-end-crosses { width: calc(100% - 2 * var(--wk-px)); left: var(--wk-px); } }
.wk-end-crosses i { position: absolute; width: var(--wk-cross); height: var(--wk-cross); }
.wk-end-crosses i::before, .wk-end-crosses i::after { position: absolute; content: ""; width: var(--wk-cross); height: calc(.125 * var(--wk-cross)); left: 0; top: calc(.5 * var(--wk-cross) - .0625 * var(--wk-cross)); background: var(--wk-fg); }
.wk-end-crosses i::after { transform: rotate(90deg); }
.wk-end-crosses i:nth-child(1) { left: 0; top: 0; }
.wk-end-crosses i:nth-child(2) { right: 0; top: 0; }
.wk-end-crosses i:nth-child(3) { left: 0; bottom: 0; }
.wk-end-crosses i:nth-child(4) { left: calc(50% - .5rem); bottom: 0; }
.wk-end-crosses i:nth-child(5) { right: 0; bottom: 0; }
.wk-end-sub { overflow: hidden; margin: 0; font: 500 1em/1.6 var(--font-ar); }
.wk-end-sub .wk-w { display: inline-block; }
@media (max-width: 560px) { .wk-end-sub { font-size: 1.2em; margin: auto; width: 60%; } }
.wk-end-title { --fs: 10vw; position: relative; display: block; width: fit-content; margin: .3em auto 0; font: 400 var(--fs)/1 var(--font-ar); color: var(--wk-fg); cursor: pointer; }
@media (min-aspect-ratio: 21/9) { .wk-end-title { --fs: 6.7vw; } }
@media (max-width: 560px) { .wk-end-title { --fs: 17vw; width: 100%; } }
.wk-end-line { position: relative; display: block; height: 1.25em; }
.wk-end-line .wk-w { display: inline-block; position: relative; overflow: hidden; height: 1.25em; vertical-align: top; }
.wk-end-line .wk-c-wrap { display: inline-block; position: relative; vertical-align: top; }
.wk-end-line .wk-c { display: block; height: 1.25em; line-height: 1.25em; }
.wk-end-line .wk-c-copy { position: absolute; top: 100%; inset-inline-start: 0; }
.wk-end-deco { position: absolute; height: .06em; background: var(--wk-fg); transform-origin: right; transform: scaleX(0); bottom: .14em; border-radius: .03em; }
.wk-end-pill { position: absolute; display: flex; align-items: center; justify-content: center; gap: 1em; height: 3.375em; width: 15em; left: 50%; bottom: calc(var(--wk-vh) * 7); transform: translateX(-50%); background: var(--bg-3); color: var(--wk-fg); border-radius: 100px; box-shadow: 0 6px 10px rgba(0, 0, 0, .16), 0 2px 4px rgba(0, 0, 0, .12); overflow: hidden; font-size: 1.1em; }
.wk-end-pill-texts { position: relative; overflow: hidden; height: 1.5em; }
.wk-end-pill-text { display: block; white-space: nowrap; line-height: 1.5; font: 500 .8em/1.875 var(--font-ar); animation: wk-text 3s .2s infinite cubic-bezier(.1, 0, .1, 1); }
.wk-end-pill-text:last-child { position: absolute; top: -1.5em; left: 0; right: 0; }
.wk-end-arrows { position: relative; overflow: hidden; width: 1em; height: 1em; }
.wk-end-arrows i { display: block; width: 1em; height: 1em; background: currentColor; -webkit-mask: var(--wk-down) center / contain no-repeat; mask: var(--wk-down) center / contain no-repeat; animation: wk-arrow 3s infinite cubic-bezier(.1, 0, .1, 1); }
.wk-end-arrows i:last-child { position: absolute; top: -1em; left: 0; }
.wk-end-arrows:last-child i { animation-delay: .3s; }
.wk { --wk-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v15.5M5.5 13 12 19.5l6.5-6.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E"); }
@keyframes wk-arrow { 0% { transform: translateZ(0); } 33% { transform: translate3d(0, 1em, 0); } to { transform: translate3d(0, 1em, 0); } }
@keyframes wk-text { 0% { transform: translateZ(0); } 33% { transform: translate3d(0, 1.5em, 0); } to { transform: translate3d(0, 1.5em, 0); } }

/* ---------- «واصل التمرير»: شريطٌ يمتلئ وأنت تمرّر بعد النهاية، ثمّ الصفحةُ التالية ---------- */
.wk-next { display: block; position: relative; background: var(--bg-2); color: var(--wk-fg); font-size: clamp(.875rem, 1vw, 2rem); padding: var(--wk-py) var(--wk-px); border-top: 1px solid var(--line-2); }
@media (max-width: 380px) { .wk-next { font-size: clamp(.75rem, 1vw, 2rem); } }
.wk-next-sub { margin: 0; padding-top: 1em; font: 500 1em/1.5 var(--font-ar); color: var(--wk-dim); }
.wk-next-main { position: relative; }
.wk-next-text { display: block; white-space: nowrap; font: 400 3.5em/1.3 var(--font-ar); padding: .7em 0; width: fit-content; }
.wk-next-go { position: absolute; display: flex; align-items: center; inset-inline-end: 0; top: 50%; margin-top: -.6em; min-width: 200px; width: 20%; line-height: 1.2em; }
@media (max-width: 812px) { .wk-next-go { position: relative; width: 100%; margin-top: 1em; } .wk-next { padding-bottom: calc(var(--wk-py) + 64px + env(safe-area-inset-bottom, 0px)); } }
.wk-next-go span { white-space: nowrap; font: 500 1em/1.2 var(--font-ar); }
.wk-next-bar { display: block; flex-grow: 1; height: 4px; margin: 0 .75em; background: #34393f; position: relative; }
.wk-next-bar b { position: absolute; inset: 0; background: var(--wk-signal); transform-origin: right; transform: scaleX(0); }
.wk-next-go svg { width: 1.2em; height: 1.2em; flex: none; }
.wk-next-crosses { position: relative; width: calc(100% - 1em); margin-inline-start: .5em; height: 1em; }
@media (max-width: 812px) { .wk-next-crosses { display: none; } }
.wk-next-crosses i { position: absolute; width: 1em; height: 1em; }
.wk-next-crosses i::before, .wk-next-crosses i::after { position: absolute; content: ""; width: 2px; height: 1em; left: 0; background: var(--wk-fg); }
.wk-next-crosses i::after { transform: rotate(90deg); }
.wk-next-crosses i:nth-child(1) { right: 0; }
.wk-next-crosses i:nth-child(2) { right: 25%; }
.wk-next-crosses i:nth-child(3) { right: 50%; }
.wk-next-crosses i:nth-child(4) { right: 75%; }
.wk-next-crosses i:nth-child(5) { right: 100%; }
html:not(.wk-js) .wk-next-go, html:not(.wk-js) .wk-end-pill { display: none; }
html:not(.wk-js) .wk-end { height: auto; padding: 120px 0; }
html:not(.wk-js) .wk-end-outer { position: relative; height: auto; }
html:not(.wk-js) .wk-end-content { position: relative; left: auto; top: auto; transform: none; }

/* ---------- صفحةُ المشروع ---------- */
.wk-pd { --pd-bg: #0D1117; position: relative; color: var(--pd-text); font-size: clamp(1rem, 1vw, 1.5rem); background: var(--pd-bg); padding: calc(var(--nav-height) + 40px) var(--wk-px) 60px; }
@media (max-width: 380px) { .wk-pd { font-size: clamp(.75rem, 1vw, 2rem); } }
@media (min-aspect-ratio: 21/9) { .wk-pd { font-size: clamp(.75rem, 1vw, 2.5rem); } }
html.wk-gl-on .wk-pd { background: transparent; }
.pd-meta { position: relative; width: 100%; }
.pd-meta::after { content: ""; display: block; clear: both; }
.pd-title, .pd-preview-title { font: 400 4.5em/1.1 var(--font-ar); margin: 0; }
.pd-left { width: 100%; }
.pd-right { width: 100%; }
.pd-desc { font: 400 .8em/1.7 var(--font-ar); margin: 2.5em 0; max-width: 34em; }
.pd-desc p { margin: 0; }
.pd-desc p + p { margin-top: 1em; }
.pd-desc a, .pd-side a { position: relative; display: inline-block; font-weight: 500; }
.pd-desc a { color: var(--pd-highlight); }
.pd-desc a::after, .pd-side a::after { position: absolute; content: ""; right: 0; top: 100%; width: 100%; height: 1px; background-color: currentColor; transition: transform .3s cubic-bezier(.16, 1, .3, 1); transform-origin: 100% 0; transform: scaleX(0); }
.pd-desc a::after { margin-top: -.15em; }
@media (hover: hover) { .pd-desc a:hover::after, .pd-side a:hover::after { transform: scaleX(1); } }
.pd-side { position: relative; font-size: .8em; display: grid; grid-template-columns: 1fr 1fr; gap: 2em; }
.pd-side-title { color: var(--pd-highlight); margin: 0 0 1em; font: 500 1em/1.4 var(--font-ar); }
.pd-side-item { display: block; color: var(--pd-text); line-height: 1.7; font-weight: 400; }
button.pd-side-item { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: start; }
.pd-cta { display: inline-flex; position: relative; height: 3.375em; padding: 1em 1.125em 1em 1.5em; align-items: center; gap: 1.125em; width: fit-content; overflow: hidden; background: var(--pd-btn-bg); border-radius: 100px; font: 500 1em/1 var(--font-ar); color: var(--pd-btn-text); border: 0; cursor: pointer; transition: background cubic-bezier(.35, 0, 0, 1) .5s; }
.pd-cta-dot { width: .5em; height: .5em; background: var(--pd-btn-text); border-radius: 100px; z-index: 1; flex: none; transition: background cubic-bezier(.35, 0, 0, 1) .5s, transform cubic-bezier(.35, 0, 0, 1) .4s; }
.pd-cta-text { font-size: .875em; position: relative; margin: 0; z-index: 1; font-weight: 500; white-space: nowrap; transition: color cubic-bezier(.35, 0, 0, 1) .5s .1s, transform cubic-bezier(.35, 0, 0, 1) .4s .1s; }
.pd-cta-arrow { position: absolute; display: flex; justify-content: center; align-items: center; top: calc(50% - .75em); left: .75em; height: 1.5em; width: 1.5em; background: var(--pd-btn-bg); border-radius: 100%; transform: scale(0); transition: transform cubic-bezier(.35, 0, 0, 1) .4s; z-index: 1; color: var(--pd-btn-text); }
.pd-cta-arrow svg { width: 90%; height: 90%; }
@media (hover: hover) {
  .pd-cta:hover { color: var(--pd-btn-text-hover); background: var(--pd-highlight); transition: background cubic-bezier(.35, 0, 0, 1) .5s .1s; }
  .pd-cta:hover .pd-cta-text { transform: translate3d(20%, 0, 0); transition: color cubic-bezier(.35, 0, 0, 1) .5s, transform cubic-bezier(.35, 0, 0, 1) .4s; }
  .pd-cta:hover .pd-cta-dot { transform: translate3d(-5em, 0, 0) scale(26); background: var(--pd-highlight); }
  .pd-cta:hover .pd-cta-arrow { transform: scale(1); transition: transform cubic-bezier(.35, 0, 0, 1) .4s .1s; }
}
.pd-cta-mobile { display: none; }
.pd-info { position: absolute; display: none; align-items: center; gap: .625em; font: 500 .75em/1 var(--font-ar); overflow: hidden; z-index: 1; color: var(--pd-highlight); inset-inline-end: var(--wk-px); }
.pd-info svg { width: 1em; height: 1em; }
.pd-items { margin-top: 3em; }
.pd-move { display: grid; gap: 1.5em; }
.pd-item { position: relative; border-radius: var(--wk-radius); overflow: hidden; background: var(--bg-2); }
.pd-item > img, .pd-item > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-item[data-film] { cursor: pointer; }
.pd-preview { display: none; }
.pd-film-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: inline-flex; align-items: center; gap: .6em; padding: .8em 1.4em; border-radius: 100px; background: rgba(13, 17, 23, .7); color: #fff; font: 500 .9em/1 var(--font-ar); border: 0; pointer-events: none; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.wk-gl-on .pd-film-btn { display: none; }

/* على الحاسبة: شاشةٌ واحدةٌ أفقيّة — النصُّ في جهة والأعمالُ تمرّ أفقيّاً، والمشروعُ التالي يدخل في آخرها */
@media (min-width: 813px) {
  html.wk-js .wk-pd { position: absolute; inset: 0; height: calc(var(--wk-vh) * 100); z-index: 10; padding: var(--wk-py) var(--wk-px); overflow: hidden; }
  html.wk-js .pd-meta { position: absolute; top: 50%; width: 34em; transform: translate3d(0, -50%, 0); pointer-events: none; inset-inline-start: var(--wk-px); }
  html.wk-js .pd-meta.is-active a, html.wk-js .pd-meta.is-active button { pointer-events: auto; }
  html.wk-js .pd-left { float: right; width: 60%; }
  html.wk-js .pd-right { float: left; width: 40%; padding-right: 20%; margin-top: 3em; }
  html.wk-js .pd-title { font-size: 4.5em; line-height: 1.05; }
  html.wk-js .pd-desc { font-size: .75em; line-height: 1.6em; margin: 4em 0; max-width: none; }
  html.wk-js .pd-side { display: block; font-size: .75em; }
  html.wk-js .pd-links { margin-top: 4em; }
  html.wk-js .pd-info { display: flex; }
  html.wk-js .pd-items { position: absolute; left: 0; width: 100%; margin: 0; height: calc(100% - var(--wk-py) * 4 - var(--wk-head) * 3.9); top: calc(var(--wk-py) * 2 + var(--wk-head) * 2.8); }
  html.wk-js .pd-move { position: absolute; display: block; top: 0; right: 0; height: 100%; padding-right: 48em; white-space: nowrap; }
  html.wk-js .pd-item { display: inline-block; vertical-align: top; margin-right: 5em; overflow: visible; border-radius: 0; background: none; }
  html.wk-js .pd-item:first-child { margin-right: 0; }
  html.wk-js .pd-item:last-child { margin-left: 10vw; }
  html.wk-js .pd-item > img, html.wk-js .pd-item > video { border-radius: var(--wk-radius); }
  html.wk-js .pd-item[data-fullscreen] > img, html.wk-js .pd-item[data-fullscreen] > video { border-radius: 0; }
  html.wk-js .pd-preview { display: block; position: absolute; inset: 0; pointer-events: none; }
  html.wk-js .pd-preview-in { position: absolute; inset: 0; }
  html.wk-js .pd-preview-title { position: absolute; right: 0; top: 50%; transform: translate3d(0, -50%, 0); white-space: nowrap; font-size: 4.5em; line-height: 1.05; }
  html.wk-js .pd-preview-foot { display: flex; align-items: center; gap: 1em; position: absolute; right: 0; bottom: var(--wk-py); width: 14em; }
}
@media (min-width: 813px) and (min-aspect-ratio: 21/9) { html.wk-js .pd-preview-foot { width: 16em; gap: 2em; } }
html.wk-gl-on .pd-item > img, html.wk-gl-on .pd-item > video { visibility: hidden; }
/* شريطُ الأعمال يمتدّ تحت النصّ، فلا يأخذ الضغطَ إلّا على الأعمال نفسِها — وإلّا غطّى «شاهد الفيلم» وروابطَ القائمة */
html.wk-js .pd-items, html.wk-js .pd-move { pointer-events: none; }
html.wk-js .pd-item { pointer-events: auto; }
html.wk-gl-on .pd-item { background: none; }
/* على التلفون: عمودٌ واحد — النصُّ ثمّ الأعمالُ واحداً تحت واحد، والتالي في آخرها */
@media (max-width: 812px) {
  html.wk-js .wk-pd { position: absolute; inset: 0; height: calc(var(--wk-vh) * 100); z-index: 10; padding: 0; overflow: hidden; }
  html.wk-js .pd-scroll { position: absolute; left: 0; top: 0; width: 100%; }
  html.wk-js .pd-meta { padding: calc(var(--wk-vh) * 10 + var(--nav-height)) var(--wk-px) 50px; }
  html.wk-js .pd-items { margin: 0; }
  html.wk-js .pd-move { display: block; padding: 0 var(--wk-px); }
  html.wk-js .pd-item { display: block; margin-top: 50px; }
  html.wk-js .pd-item:last-child { margin-bottom: 50px; }
  html.wk-js .pd-preview { display: block; position: relative; padding: calc(var(--wk-vh) * 2) var(--wk-px) calc(var(--wk-vh) * 12); }
  html.wk-js .pd-preview-title { font-size: 4.5em; line-height: 1.05; }
  html.wk-js .pd-preview-foot { display: flex; align-items: center; gap: 1em; margin-top: calc(var(--wk-vh) * 5); }
  .pd-desc { font-size: clamp(1rem, 1.5vw, 3rem); }
  .pd-side { font-size: clamp(1rem, 1.5vw, 3rem); }
  .pd-cta-mobile { display: inline-flex; margin-top: 4em; }
  .pd-left .pd-cta { display: none; }
}
.pd-preview-foot span { font: 500 .875em/1 var(--font-ar); color: var(--wk-dim); white-space: nowrap; }
.pd-preview-bar { position: relative; flex-grow: 1; height: 4px; border-radius: 16px; display: block; }
.pd-preview-bar em { position: absolute; inset: 0; height: 3px; background: var(--pd-text); opacity: .2; }
.pd-preview-bar b { position: absolute; inset: 0; height: 3px; background: var(--pd-highlight); transform-origin: 100% 50%; transform: scaleX(0); }
.pd-preview-foot svg { width: 1em; height: 1em; flex: none; color: var(--wk-dim); }
@media (max-width: 812px) { .pd-preview-foot svg { transform: rotate(-90deg); } }

/* زرُّ الرجوع: حبّةٌ بيضاءُ في وسط الترويسة، يمسحها لونُ الإشارة من تحت */
/* والترويسةُ شفّافةٌ في أعلى الصفحة كما في المرجع، وتأخذ خلفيّتَها حين يُمرَّر */
body.wk .site-header:not(.scrolled):not(.menu-open):not(.dropdown-open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wk-back { position: fixed; z-index: 101; top: calc(env(safe-area-inset-top, 0px) + 10px); left: 50%; translate: -50% 0; height: 2.8em; padding: 0 1em 0 1.5em; font: 500 .875em/1 var(--font-ar); background: var(--pd-btn-bg); color: var(--pd-btn-text); border-radius: 100px; border: none; cursor: pointer; display: none; align-items: center; gap: .625em; overflow: hidden; }
.wk-back.on { display: flex; }
.wk-back svg { position: relative; z-index: 1; width: 1.2em; height: 1.2em; transition: color .5s, transform .4s cubic-bezier(.4, 0, .1, 1); }
.wk-back-svg2 { position: absolute !important; left: 0; transform: translate3d(-1em, 0, 0); }
.wk-back-text { position: relative; z-index: 1; transition: color .5s, transform .4s cubic-bezier(.4, 0, .1, 1); }
.wk-back-bg { position: absolute; inset: 0; background: var(--pd-btn-bg-hover); transform: scaleY(0); transform-origin: bottom; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) {
  .wk-back:hover { color: var(--pd-btn-text-hover); }
  .wk-back:hover .wk-back-bg { transform: scaleY(1); }
  .wk-back:hover .wk-back-svg1 { transform: translate3d(2em, 0, 0); }
  .wk-back:hover .wk-back-text { transform: translate3d(1.3em, 0, 0); }
  .wk-back:hover .wk-back-svg2 { transform: translate3d(1em, 0, 0); }
}
@media (max-width: 812px) { .wk-back { width: 2.8em; padding: 0; justify-content: center; } .wk-back-text { display: none; } .wk-back-svg2 { display: none; } }

/* ---------- الفيلمُ بالصوت: ستارةٌ سوداء والفيلمُ بعرض الشاشة إلّا ١٠٪ من كلِّ جانب ---------- */
.wk-video { position: fixed; z-index: 150; inset: 0; background: rgba(0, 0, 0, .9); opacity: 0; display: none; font-size: clamp(1rem, 1vw, 1.75rem); cursor: none; }
.wk-video-box { position: fixed; left: 10vw; right: 10vw; top: 50%; translate: 0 -50%; aspect-ratio: 16 / 9; border-radius: var(--wk-radius); overflow: hidden; background: #000; max-height: 80vh; margin-inline: auto; }
.wk-video-box video { width: 100%; height: 100%; display: block; object-fit: contain; }
.wk-video-controls { position: absolute; bottom: 5vh; left: 0; width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--wk-gap); padding: 0 var(--wk-px); direction: rtl; }
.wk-video-controls button { font: 500 1em/1 var(--font-ar); background: transparent; border: none; padding: 0; color: #fff; cursor: pointer; white-space: pre; }
.wk-video-play { grid-column: 1 / span 2; text-align: start; }
.wk-video-mute { grid-column: 11 / span 2; text-align: end; }
.wk-video-progress { position: relative; grid-column: 3 / span 8; height: 1.4em; cursor: pointer; }
.wk-video-progress i, .wk-video-progress b { position: absolute; top: 50%; right: 0; transform: translateY(-50%); height: .375em; border-radius: .1875em; }
.wk-video-progress i { width: 100%; background: rgba(255, 255, 255, .2); }
.wk-video-progress b { width: 0; background: #fff; }
@media (max-width: 812px) { .wk-video-controls { grid-template-columns: repeat(6, minmax(0, 1fr)); } .wk-video-play { grid-column: 1 / span 1; } .wk-video-progress { grid-column: 2 / span 4; } .wk-video-mute { grid-column: 6 / span 1; } .wk-video { cursor: auto; } }
.wk-video-cursor { position: absolute; top: 0; left: 0; width: 6.25em; height: 6.25em; border-radius: 100%; background: var(--paper); transform: scale(0); display: flex; justify-content: center; align-items: center; pointer-events: none; color: var(--ink); }
.wk-video-cursor svg { width: 36%; height: 36%; }
.wk-video-close { position: absolute; top: var(--wk-py); inset-inline-end: var(--wk-px); width: 2.8em; height: 2.8em; border-radius: 100%; background: var(--bg-3); color: #fff; border: 0; display: none; justify-content: center; align-items: center; }
.wk-video-close svg { width: 35%; height: 35%; }
@media (max-width: 812px) { .wk-video-close { display: flex; } .wk-video-cursor { display: none; } }

/* ---------- الحركةُ المطفأة: كلُّ شيءٍ في مكانه الأخير ---------- */
@media (prefers-reduced-motion: reduce) {
  html.wk-js .wk-roll-col { transform: none; }
  .wk-end-pill-text, .wk-end-arrows i { animation: none; }
}