/* كادوكس — «عالم أعمالنا» (المهمة 2.3-و): غرفة المشروع، العالم (/projects/)، وشريط الرئيسية (caducs/reel).
   يُحمَّل فقط في الصفحات التي فيها أحد البلوكات الثلاثة (inc/works.php). كل :hover داخل (hover: hover).
   المراجع (أفكار وتقنيات فقط): غرفة المشروع ومراحلها — Don't Board Me وOpal Tadpole (الإيقاع خطوة بخطوة)، وNoomo (بطاقات بإمالة ثلاثية الأبعاد). */

/* إطار صورة عمل بلا قص (قرار المالك 2026-10-30): الإطار بنسبة الصورة (--ar من الخادم)، والصورة كاملة دائماً؛ الاستثناء الوحيد بطاقات شريط الرئيسية الصغيرة.
   حين تخرج نسبة الصورة عن حدود الإطار تظهر كاملة على هامش داكن (.wf--mat). لا تكبير عند المرور: التكبير داخل إطار مقصوص يخفي الأطراف. */
.wf { position: relative; display: block; aspect-ratio: var(--ar, 1.6); overflow: hidden; background: #0d0c0b; }
.wf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.wf--mat { background: radial-gradient(120% 120% at 50% 40%, #24201b, #121110); }
.wf--mat img { inset: 2.5%; width: 95%; height: 95%; }

/* ============ غرفة المشروع ============ */
.room { --mood: #fbbb43; position: relative; }
.room::before { content: ""; position: absolute; inset: 0 0 auto; height: 120vh; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 78% 30%, color-mix(in srgb, var(--mood) 16%, transparent), transparent 70%), radial-gradient(40% 40% at 10% 10%, #fdcf4812, transparent 70%); }

.rm-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(28px, 5vw, 80px);
  min-height: 100svh; padding: calc(var(--nav-h) + 48px) var(--pad) 72px; }
.rm-hero__title { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 58px); line-height: 1.38; letter-spacing: -.01em; text-wrap: balance; }
.rm-hero__answer { margin-block-start: 18px; color: var(--dim); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.85; max-width: 36em; }
.rm-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; }
.rm-facts div { display: grid; gap: 2px; padding: 10px 16px; border-radius: 16px; border: 1px solid #ffffff14; background: #ffffff06; }
.rm-facts dt { font-size: 12px; line-height: 1.7; color: var(--faint); }
.rm-facts dd { font-size: 15px; line-height: 1.7; color: var(--ink); }
.rm-hero__go { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 30px; }
.rm-hero__cover { --hmax: min(72svh, 640px); position: relative; justify-self: center; width: min(100%, calc(var(--hmax) * var(--ar, 1.6))); border-radius: 22px; overflow: hidden; border: 1px solid #ffffff1a;
  box-shadow: 0 60px 120px -50px #000, 0 0 0 1px #00000080, 0 30px 90px -40px color-mix(in srgb, var(--mood) 45%, transparent);
  transform: perspective(1400px) rotateY(-9deg) rotateX(3deg); transform-style: preserve-3d; transition: transform .8s var(--ease-out); }
.rm-hero__glare { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, #ffffff1f, #fff0 38%, #fff0 70%, #fdcf4814); mix-blend-mode: screen; }
@media (hover: hover) and (pointer: fine) { .rm-hero__cover:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-4px); } }
@media (max-width: 900px) {
  .rm-hero { grid-template-columns: 1fr; min-height: 0; padding-block-start: calc(var(--nav-h) + 28px); }
  .rm-hero__cover { transform: none; order: -1; }
}

/* الجهاز: حاسوب، آيفون، نافذة برنامج. الصورة أولاً، والإطار يُنشأ عند الضغط فقط (room.js) */
.rm-live .sec-head { margin-block-end: clamp(24px, 5vh, 48px); }
.dev { --bezel: #0c0b0a; position: relative; margin-inline: auto; }
.dev__body { position: relative; background: var(--bezel); border: 1px solid #ffffff1c; box-shadow: 0 80px 140px -60px #000, 0 0 0 1px #000, inset 0 1px 0 #ffffff1a, 0 40px 120px -60px color-mix(in srgb, var(--mood) 60%, transparent); }
.dev__screen { position: relative; overflow: hidden; background: #0f0e0d; container-type: inline-size; }
.dev__poster, .dev__poster img { display: block; width: 100%; height: 100%; }
.dev__poster img { object-fit: contain; transition: filter .6s; }
.dev__screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #13121000 40%, #131210b3); transition: opacity .5s; }
.dev__play { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--ink); text-align: center; }
.dev__ring { position: relative; width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--on-gold); box-shadow: 0 0 0 10px #fdcf4824, 0 20px 60px -10px #faa83ecc; }
.dev__ring::before, .dev__ring::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid #fdcf4866; animation: devPulse 2.6s var(--ease-out) infinite; }
.dev__ring::after { animation-delay: 1.3s; }
.dev__ring svg { margin-inline-start: 4px; }
.dev__label { font: 700 clamp(16px, 1.4vw, 19px)/1.5 var(--f-display); padding: 8px 18px; border-radius: 999px; background: #131210cc; border: 1px solid #ffffff22; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
@keyframes devPulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@media (hover: hover) and (pointer: fine) { .dev__play:hover ~ .dev__poster img, .dev:hover .dev__poster img { transform: scale(1.03); } .dev__play:hover .dev__ring { box-shadow: 0 0 0 14px #fdcf4833, 0 24px 70px -8px #fdcf48; } }
.dev iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; background: #fff; }
.dev.is-live .dev__play, .dev.is-live .dev__poster, .dev.is-live .dev__screen::after { opacity: 0; pointer-events: none; visibility: hidden; }
.dev.is-loading .dev__ring { animation: devSpin 1s linear infinite; } @keyframes devSpin { to { transform: rotate(360deg); } }
/* حاسوب */
.dev--laptop { width: min(1100px, 100%); }
.dev--laptop .dev__body { padding: clamp(8px, 1.1vw, 16px); border-radius: clamp(14px, 1.6vw, 24px) clamp(14px, 1.6vw, 24px) 6px 6px; }
.dev--laptop .dev__screen { aspect-ratio: 16 / 10; border-radius: 6px; }
.dev__base { height: clamp(10px, 1.3vw, 18px); margin-inline: -6%; border-radius: 0 0 22px 22px / 0 0 14px 14px; background: linear-gradient(#2a2622, #141210 60%, #0a0908); box-shadow: 0 30px 50px -20px #000; position: relative; }
.dev__base::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 42%; height: 40%; border-radius: 0 0 10px 10px; background: #0c0b0a; }
/* نافذة برنامج */
.dev--desktop { width: min(1100px, 100%); }
.dev--desktop .dev__body { border-radius: 14px; overflow: hidden; }
.dev__bar { display: flex; align-items: center; gap: 8px; height: 38px; padding-inline: 14px; background: #1b1917; border-bottom: 1px solid #ffffff12; font-size: 13px; line-height: 1.6; color: var(--faint); direction: ltr; }
.dev__bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a342d; } .dev__bar i:first-child { background: #f2785c; } .dev__bar i:nth-child(2) { background: #fbbb43; } .dev__bar i:nth-child(3) { background: #4fc9a0; }
.dev__bar span { flex: 1; text-align: center; direction: rtl; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-inline-end: 50px; }
.dev--desktop .dev__screen { aspect-ratio: 16 / 10; }
/* آيفون */
.dev--phone { width: min(360px, 82vw); }
.dev--phone .dev__body { padding: 11px; border-radius: 52px; }
.dev--phone .dev__screen { aspect-ratio: 390 / 844; border-radius: 42px; }
.dev__island { position: absolute; z-index: 3; inset-block-start: 22px; left: 50%; width: 31%; height: 28px; margin-left: -15.5%; border-radius: 20px; background: #000; }
/* الجوال: الموقع يظهر في آيفون حين يوجد مدخل الجوال (phone.html) */
@media (max-width: 767px) {
  .dev--adapt { width: min(340px, 84vw); }
  .dev--adapt .dev__body { padding: 10px; border-radius: 48px; }
  .dev--adapt .dev__screen { aspect-ratio: 390 / 844; border-radius: 39px; }
  .dev--adapt .dev__base { display: none; }
}
.rm-live__links { margin-block-start: 26px; text-align: center; }
.rm-live__links a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; color: var(--g2); border-bottom: 1px solid #fdcf4844; }
@media (hover: hover) { .rm-live__links a:hover { border-color: var(--g2); } }

/* المراحل: شريط أفقي (يُسحب بالتمرير على الكمبيوتر؛ تمرير أصلي على الجوال وبلا JavaScript) */
.rm-stages { overflow: hidden; }
.rm-stages__path { color: var(--faint); font-size: 15px; }
.rm-track { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); padding-block: 8px 20px; }
.rm-track::-webkit-scrollbar { display: none; }
.rm-track__in { display: flex; gap: clamp(16px, 2.4vw, 36px); width: max-content; }
.rm-track { --sh: clamp(250px, 44vh, 400px); }
.rm-stage { position: relative; width: max(240px, calc(var(--sh) * var(--ar, 1.33))); flex: none; scroll-snap-align: start; }
.rm-stage__img { height: var(--sh); aspect-ratio: auto; border-radius: 18px; border: 1px solid #ffffff14; box-shadow: 0 40px 80px -50px #000; }
.rm-stage--logo .rm-stage__img { background: radial-gradient(circle at 50% 40%, #2a2622, #141210); }
.rm-stage--logo .rm-stage__img img { padding: 8%; }
.rm-stage.is-here .rm-stage__img { border-color: var(--g2); box-shadow: 0 0 0 1px var(--g2), 0 30px 80px -30px #faa83e88; }
.rm-stage__n { margin-block-start: 16px; font-size: 14px; line-height: 1.7; color: var(--dim); display: flex; gap: 10px; align-items: baseline; }
.rm-stage__n .num { color: var(--g2); font-size: 13px; }
.rm-stage__n b { color: var(--g2); font-weight: 500; }
.rm-stage__t { margin-block-start: 4px; font: 500 clamp(16px, 1.3vw, 19px)/1.55 var(--f-display); }
.rm-stage__t a { display: inline-block; min-height: 44px; padding-block: 8px; background: linear-gradient(var(--g2), var(--g2)) no-repeat 100% 100% / 0 1px; transition: background-size .5s var(--ease-out); }
@media (hover: hover) { .rm-stage__t a:hover { background-size: 100% 1px; color: var(--g2); } }
.rm-stage::before { content: ""; position: absolute; inset-block-start: calc(50% - 40px); inset-inline-end: calc(clamp(16px, 2.4vw, 36px) * -1); width: clamp(16px, 2.4vw, 36px); height: 1px; background: linear-gradient(90deg, #fdcf4800, #fdcf4888); }
.rm-stage:last-child::before { display: none; }
.rm-track__bar { height: 2px; margin-block-start: 22px; border-radius: 2px; background: #ffffff10; overflow: hidden; max-width: 420px; }
.rm-track__bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform-origin: 100% 50%; transform: scaleX(var(--p, .08)); }
.rm-stages.is-pinned .rm-track { overflow: visible; scroll-snap-type: none; }

/* المشكلة وما عملناه */
.rm-story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 6vw, 110px); }
.rm-story__col { position: relative; }
.rm-story__k { font-size: clamp(80px, 11vw, 168px); line-height: 1; font-weight: 700; color: transparent; -webkit-text-stroke: 1px #fdcf4840; margin-block-end: -.32em; user-select: none; }
.rm-story__h { position: relative; font: 700 clamp(24px, 2.4vw, 36px)/1.4 var(--f-display); margin-block-end: 18px; }
.rm-story__h::after { content: ""; display: block; width: 54px; height: 2px; margin-block-start: 14px; background: var(--gold); border-radius: 2px; }
.rm-story__p { color: var(--dim); font-size: clamp(16px, 1.2vw, 18.5px); line-height: 1.95; }
@media (max-width: 800px) { .rm-story { grid-template-columns: 1fr; } }

/* النتيجة (أرقام حقيقية فقط) وما سلّمناه */
.rm-result__text { max-width: 1040px; font: 500 clamp(20px, 2vw, 30px)/1.75 var(--f-display); color: var(--ink); }
.rm-result__text .num { background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.rm-result__note { margin-block-start: 18px; color: var(--faint); font-size: 14px; line-height: 1.8; }
.rm-deliv__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.rm-deliv__list li { display: flex; gap: 14px; align-items: baseline; padding: 22px 24px; border-radius: 18px; border: 1px solid #ffffff12; background: linear-gradient(160deg, #1b1917, #151311); font-size: 17px; line-height: 1.75; }
.rm-deliv__list .num { color: var(--g2); font-size: 14px; }

/* الصور */
.rm-shots { --rowh: clamp(180px, 23vw, 340px); display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 20px); }
.rm-shots::after { content: ""; flex-grow: 999999; }
.rm-shot { flex-grow: calc(var(--r) * 100); flex-basis: calc(var(--r) * var(--rowh)); max-width: 100%; }
.rm-pages { --ph: min(640px, 76svh); display: flex; gap: clamp(12px, 1.6vw, 20px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; margin-block-start: clamp(14px, 2vw, 22px); padding-block-end: 10px; scrollbar-width: thin; scrollbar-color: #3a342d transparent; }
.rm-page { flex: none; width: calc(var(--ph) * var(--r)); scroll-snap-align: start; }
.rm-shot, .rm-page { display: block; border-radius: 14px; overflow: hidden; background: #0d0c0b; box-shadow: 0 0 0 1px #ffffff14, 0 24px 50px -30px #000; transition: transform .6s var(--ease-out), box-shadow .6s; }
.rm-shot img, .rm-page img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); }
@media (hover: hover) and (pointer: fine) { .rm-shot:hover, .rm-page:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px #fdcf4866, 0 34px 60px -30px #000; } }
@media (max-width: 640px) { .rm-pages { --ph: 440px; margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); } }
@media (prefers-reduced-motion: reduce) { .rm-shot, .rm-page { transition: none; } }
.rm-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0a09f2; display: none; }
.rm-lb[open] { display: grid; place-items: center; }
.rm-lb img { max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: 10px; }
.rm-lb button { position: absolute; min-width: 48px; min-height: 48px; border-radius: 50%; background: #1b1917; border: 1px solid #ffffff22; font-size: 20px; line-height: 1.4; }
.rm-lb__x { inset-block-start: 16px; inset-inline-start: 16px; } .rm-lb__p { inset-inline-end: 16px; top: 50%; } .rm-lb__n { inset-inline-start: 16px; top: 50%; }

/* الختام: بوابة ذهبية، واتساب، والمشروع التالي */
.rm-cta { text-align: center; display: grid; justify-items: center; overflow: hidden; padding-block-end: clamp(70px, 12vh, 140px); }
.rm-cta__portal { position: absolute; top: 46%; left: 50%; width: min(900px, 140vw); aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none; z-index: -1; }
.rm-cta__portal i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid #fdcf481f; animation: portalSpin 40s linear infinite; }
.rm-cta__portal i:nth-child(1) { background: conic-gradient(from 0deg, #fdcf4800, #fdcf4838, #faa83e00 30%); -webkit-mask: radial-gradient(circle, #0000 69.6%, #000 70%, #000 70.4%, #0000 71%); mask: radial-gradient(circle, #0000 69.6%, #000 70%, #000 70.4%, #0000 71%); border: 0; }
.rm-cta__portal i:nth-child(2) { inset: 14%; animation-duration: 60s; animation-direction: reverse; border-style: dashed; border-color: #fdcf4814; }
.rm-cta__portal i:nth-child(3) { inset: 30%; background: radial-gradient(circle, #fdcf4814, #0000 70%); border: 0; animation: none; }
@keyframes portalSpin { to { transform: rotate(360deg); } }
.rm-cta__title { font: 700 clamp(30px, 4.4vw, 68px)/1.35 var(--f-display); max-width: 18em; text-wrap: balance; }
.rm-cta .sub { margin-inline: auto; }
.rm-cta__go { margin-block-start: 32px; }
.rm-next { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(140px, 22vw, 320px); grid-template-rows: auto auto 1fr; column-gap: 28px; align-items: start; text-align: start;
  width: min(980px, 100%); margin-block-start: clamp(60px, 12vh, 120px); padding: 22px; border-radius: 24px; border: 1px solid #ffffff14; background: linear-gradient(150deg, #1b1917ee, #131210ee); overflow: hidden; }
.rm-next__k { grid-column: 1; font-size: 14px; line-height: 1.7; color: var(--g2); }
.rm-next__t { grid-column: 1; margin-block-start: 6px; font: 700 clamp(19px, 2vw, 28px)/1.45 var(--f-display); }
.rm-next__s { grid-column: 1; margin-block-start: 8px; font-size: 14px; line-height: 1.7; color: var(--faint); }
.rm-next__img { grid-column: 2; grid-row: 1 / span 3; justify-self: center; width: min(100%, calc(200px * var(--ar, 1.6))); border-radius: 14px; }
@media (hover: hover) and (pointer: fine) { .rm-next:hover { border-color: #fdcf4855; } }
@media (max-width: 640px) { .rm-next { grid-template-columns: 1fr; } .rm-next__img { grid-column: 1; grid-row: auto; order: -1; margin-block-end: 14px; } }

/* الانتقال إلى الغرفة التالية: بوابة ذهبية تتسع من الرابط */
.rm-wipe { position: fixed; z-index: 90; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, #131210 58%, #faa83e 64%, #fdcf48 66%, #131210 70%); pointer-events: none; transform: scale(0); }

@media (prefers-reduced-motion: reduce) {
  .rm-hero__cover, .rm-hero__cover:hover { transform: none; }
  .dev__ring::before, .dev__ring::after, .rm-cta__portal i { animation: none; }
}

/* ============ العالم (/projects/) ============
   المراجع: Codrops camera-path gallery (2026-07-07) وscroll-reactive gallery (2026-03-09)، bizarro/infinite-webl-gallery، Lusion v3، Igloo Inc. */
.wo { position: relative; }
.wo__stage { display: none; }
.wo__intro { position: relative; z-index: 3; padding: calc(var(--nav-h) + 48px) var(--pad) 40px; max-width: 980px; }
.wo__title { font: 700 clamp(32px, 4.4vw, 68px)/1.35 var(--f-display); text-wrap: balance; }
.wo__answer { margin-block-start: 18px; max-width: 40em; color: var(--dim); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.85; }
.wo__counts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-block-start: 26px; color: var(--dim); font-size: 15px; line-height: 1.7; }
.wo__counts b { font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; margin-inline-end: 4px; vertical-align: -4px; }
.wo__go { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
.wo__note { margin-block-start: 14px; color: var(--dim); font-size: 14.5px; line-height: 1.8; }
.wo__note a { display: inline-block; min-height: 44px; padding-block: 10px; color: var(--g2); text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) { .wo__note a:hover { color: var(--ink); } }
.wo__hint { display: none; margin-block-start: 16px; color: var(--faint); font-size: 14px; line-height: 1.7; }
.wo__fly { display: none; }

/* طريقة 3d: المسرح ثابت والصفحة تطول بقدر المسار */
.wo--3d .wo__stage { display: block; position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; z-index: 1; background: #0d0c0b; }
.wo--3d .wo__fly { display: block; }
.wo--3d .wo__intro { position: absolute; inset: 0 0 auto; height: 100vh; max-width: none; display: flex; flex-direction: column; justify-content: center; padding-inline-end: max(var(--pad), 42vw);
  background: radial-gradient(70% 90% at 85% 50%, #0d0c0bf0 30%, #0d0c0b00 75%); pointer-events: none; }
.wo--3d .wo__intro > * { pointer-events: auto; }
.wo--3d .wo__hint { display: block; margin-block-end: 70px; }
.wo__cv { display: block; width: 100%; height: 100%; cursor: grab; touch-action: pan-y; opacity: 0; transition: opacity 1.4s var(--ease-out); }
.wo.is-live .wo__cv { opacity: 1; }
.wo__vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, #0000 55%, #0d0c0bcc 100%), linear-gradient(#0d0c0b 0, #0d0c0b00 18%, #0d0c0b00 82%, #0d0c0b 100%); }
.wo__hud { position: absolute; inset-block-end: 92px; inset-inline-start: var(--pad); pointer-events: none; }
.wo__dn { font: 700 clamp(30px, 3.6vw, 56px)/1.3 var(--f-display); background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wo__dc { color: var(--dim); font-size: 15px; line-height: 1.7; }
.wo__prog { width: 180px; height: 2px; margin-block-start: 14px; background: #ffffff14; border-radius: 2px; overflow: hidden; }
.wo__prog i { display: block; height: 100%; background: var(--gold); transform-origin: 100% 50%; transform: scaleX(0); }
.wo__switch { position: absolute; inset-block-end: 24px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #151311d9; border: 1px solid #ffffff17;
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px -24px #000d; max-width: calc(100vw - 2 * var(--pad)); overflow-x: auto; scrollbar-width: none; }
.wo__switch button { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 14px; line-height: 1.6; color: var(--dim); white-space: nowrap; transition: color .3s, background .3s; }
.wo__switch button .num { font-size: 12px; color: var(--faint); }
.wo__switch button[aria-current] { color: var(--ink); background: #ffffff10; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m) 55%, transparent); }
.wo__switch button[aria-current]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m); box-shadow: 0 0 10px var(--m); }
.wo__switch .wo__tolist { color: var(--g2); border-inline-start: 1px solid #ffffff14; border-radius: 0 999px 999px 0; }
@media (hover: hover) { .wo__switch button:hover { color: var(--ink); } }
.wo__tip { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; display: grid; gap: 2px; max-width: 320px; padding: 14px 18px; border-radius: 16px; background: #151311ee; border: 1px solid #fdcf4840;
  box-shadow: 0 30px 60px -20px #000; opacity: 0; transition: opacity .25s; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wo__tip.is-on { opacity: 1; }
.wo__tip b { font: 700 16px/1.5 var(--f-display); }
.wo__tip span { color: var(--dim); font-size: 13px; line-height: 1.6; }
.wo__tip em { margin-block-start: 6px; color: var(--g2); font-size: 13px; line-height: 1.6; }
.wo--loading .wo__stage::after { content: ""; position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px; border-radius: 50%; border: 2px solid #fdcf4822; border-top-color: var(--g2); animation: devSpin 1s linear infinite; }

/* القائمة (تحت العالم دائماً) */
.wo-list .sec-head { align-items: center; }
.wo-list__back { display: none; }
.wo--list ~ .wo-list .wo-list__back { display: inline-flex; }
.wo-list__chips { position: sticky; top: calc(var(--nav-h) + 8px); z-index: 5; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; margin-block-end: 18px; }
.wo-list__chips a { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1b1917e6; border: 1px solid #ffffff14; font-size: 14px; line-height: 1.6; color: var(--dim);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.wo-list__chips a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--m); }
.wo-list__chips .num { font-size: 12px; color: var(--faint); }
@media (hover: hover) { .wo-list__chips a:hover { color: var(--ink); border-color: color-mix(in srgb, var(--m) 50%, transparent); } }
.wo-d { margin-block-start: clamp(36px, 7vh, 72px); }
.wo-d__h { display: flex; align-items: baseline; gap: 12px; font: 700 clamp(22px, 2.2vw, 32px)/1.4 var(--f-display); margin-block-end: 20px; }
.wo-d__h::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--m); box-shadow: 0 0 16px var(--m); align-self: center; }
.wo-d__h .num { font-size: 15px; color: var(--faint); font-weight: 500; }
.wo-d__ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: clamp(14px, 2vw, 26px); }
.wo-card a { display: grid; gap: 6px; border-radius: 18px; }
.wo-card__img { border-radius: 16px; border: 1px solid #ffffff12; margin-block-end: 8px; transition: border-color .4s, transform .6s var(--ease-out); }
.wo-card__live { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 3px 12px; border-radius: 999px; background: #131210d9; border: 1px solid #fdcf4855; color: var(--g2); font-size: 12px; line-height: 1.7; }
.wo-card__t { font: 500 17px/1.55 var(--f-display); }
.wo-card__m { color: var(--faint); font-size: 13px; line-height: 1.7; }
@media (hover: hover) and (pointer: fine) { .wo-card a:hover .wo-card__img { border-color: color-mix(in srgb, var(--m) 55%, transparent); transform: translateY(-4px); } .wo-card a:hover .wo-card__t { color: var(--g2); } }

/* الجوال: بطاقات تُسحب واحدة واحدة (snap)، الصورة كاملة بنسبتها فوق العنوان (2.3.42: كانت ملء البطاقة مقصوصة)، وشرائح الأقسام ثابتة أعلاها */
html.wo-snap { scroll-snap-type: y proximity; }
.wo-list--deck .wo-d__ul { grid-template-columns: 1fr; gap: 18px; }
.wo-list--deck .wo-card { scroll-snap-align: center; }
.wo-list--deck .wo-card a { padding: 10px 10px 16px; border-radius: 22px; border: 1px solid #ffffff17; background: #151311; }
.wo-list--deck .wo-card__img { border-radius: 14px; margin-block-end: 6px; }
.wo-list--deck .wo-card__t { font-size: 21px; line-height: 1.5; }
.wo-list--deck .wo-card__m { color: var(--dim); }

/* الغرفة فوق العالم */
html.wo-room-open { overflow: hidden; }
.wo-room { position: fixed; inset: 0; z-index: 55; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
.wo-room[hidden] { display: none; }
.wo-room__x { position: fixed; z-index: 3; inset-block-start: 14px; inset-inline-end: 16px; display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 999px; background: #151311e6;
  border: 1px solid #fdcf4855; color: var(--ink); font-size: 15px; line-height: 1.6; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 50px -20px #000; }
@media (hover: hover) { .wo-room__x:hover { border-color: var(--g2); color: var(--g2); } }
.wo-room__in:focus { outline: none; }
.wo-room .rm-hero { padding-block-start: 88px; }
html.wo-room-open .nav, html.wo-room-open .dock, html.wo-room-open .rail { visibility: hidden; }
@media (max-width: 767px) { .wo__intro { padding-block-start: calc(var(--nav-h) + 24px); } .wo-room__x { inset-block-start: auto; inset-block-end: 16px; inset-inline-end: auto; left: 50%; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { html.wo-snap { scroll-snap-type: none; } }


/* ============ شريط الأعمال في الرئيسية: «الأسطوانة» ثم «البوابة» (2.3-و، صيغة المالك 2026-10-28) ============
   الإطار 1440×1080 وحدة، u = min(100vw/1440, 100vh/1080). البطاقات يرسمها reel.js كل إطار (موضع، عرض، ارتفاع حافتين، clip-path).
   بلا JavaScript أو مع تقليل الحركة: النص، ثم صف بطاقات يُمرَّر أفقياً، ثم الحلقة وزرها ساكنة. */
@font-face{font-family:"Aref Ruqaa";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/aref-ruqaa-arabic-700.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
.reel { --u: min(calc(100vw / 1440), calc((100vh - var(--nav-h)) / 1080)); position: relative; background: radial-gradient(70% 60% at 50% 62%, #1d180f, #131210 72%); }
.reel__pin { position: relative; padding: clamp(80px, 12vh, 140px) var(--pad); display: grid; gap: 44px; }
.reel__frame { position: relative; display: grid; justify-items: center; gap: 28px; }
.reel__copy { display: grid; justify-items: center; text-align: center; gap: 14px; }
.reel__badge { display: inline-flex; align-items: center; gap: 10px; padding: 6px 18px; border-radius: 999px; border: 1px solid #fdcf4866; background: #fdcf480d; color: var(--g2); font-size: 15px; line-height: 1.7; }
.reel__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--g2); box-shadow: 0 0 10px var(--g2); }
.reel__h { display: grid; font: 700 clamp(34px, 5.4vw, 80px)/1.3 "Plex Arabic", var(--f-display); }
/* العربية بلا تتبّع أبداً (يفكّ الوصل)، وخط 400 بـ swap هنا: القسم تحت الطيّة، و«optional» كان يترك الوصف بخط النظام في أول زيارة («و هويات») */
@font-face{font-family:"Plex Arabic Reel";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/ibm-plex-sans-arabic-400.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
.reel, .reel * { letter-spacing: 0 !important; word-spacing: normal; }
.reel__sub, .reel__badge, .reel__ringline, .reel__counts span { font-family: "Plex Arabic Reel", "Plex Arabic", var(--f-body, system-ui), sans-serif; }
.reel__h span { display: block; }
.reel__sub { display: grid; color: var(--dim); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.8; }
.reel__row { display: flex; gap: 14px; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: 10px; scrollbar-width: none; }
.reel__row::-webkit-scrollbar { display: none; }
.rc { position: relative; flex: none; width: 190px; aspect-ratio: 3 / 5; border-radius: 15px; overflow: hidden; scroll-snap-align: center; background: #1b1917; -webkit-tap-highlight-color: transparent; }
@media (max-width: 820px) { .rc { width: 120px; } }
.rc__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; pointer-events: none; user-select: none; }
.rc__edge { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rc__edge path { fill: none; transform: translate(.5px, .5px) scale(.996); stroke: #fdcf48; stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-opacity .3s; }
.rc__lbl { position: absolute; inset-inline: 8px; inset-block-end: 10%; display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: #131210b8; border: 1px solid #ffffff1f;
  -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out); pointer-events: none; }
.rc__lbl i { font-style: normal; color: var(--g2); font-size: 11px; line-height: 1.6; }
.rc__lbl b { font: 500 12.5px/1.55 var(--f-display); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rc:focus-visible { outline: none; }
.rc:focus-visible .rc__lbl { opacity: 1; transform: none; }
.rc:focus-visible .rc__edge path { stroke-opacity: 1; stroke-width: 2; }
@media (hover: hover) and (pointer: fine) { .rc:hover .rc__lbl { opacity: 1; transform: none; } .rc:hover .rc__edge path { stroke-opacity: 1; } }
.reel__go { position: relative; display: flex; justify-content: center; width: max-content; margin-inline: auto; }
.reel__go::before { content: ""; position: absolute; inset: -14px -22px; border-radius: 999px; border: 1.5px dashed #fdcf4866; pointer-events: none; }
.reel__note { display: none; }
.reel__gate { display: grid; justify-items: center; gap: 26px; text-align: center; }
.reel__counts { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 48px; }
.reel__counts li { display: grid; justify-items: center; }
.reel__counts b { font-size: clamp(36px, 4vw, 60px); line-height: 1.1; font-weight: 700; background: var(--gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reel__counts span { color: var(--dim); font-size: 14px; line-height: 1.7; }
.reel__ringbox { position: relative; display: grid; place-items: center; width: min(520px, 82vw); aspect-ratio: 1; }
.reel__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #fdcf4800, #fdcf48, #faa83e, #fdcf4800 62%);
  -webkit-mask: radial-gradient(circle closest-side, #0000 64%, #000 66%, #000 69%, #0000 71%); mask: radial-gradient(circle closest-side, #0000 64%, #000 66%, #000 69%, #0000 71%); filter: drop-shadow(0 0 18px #faa83e); animation: portalSpin 18s linear infinite; }
.reel__ringline { color: var(--dim); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.8; max-width: 30em; }
.reel-wipe { position: fixed; z-index: 90; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle, #131210 56%, #faa83e 62%, #fdcf48 65%, #131210 70%); pointer-events: none; transform: scale(0); }
.reel__dust { display: none; }

/* ===== مع JavaScript: المشهد المثبّت ===== */
.reel--js .reel__pin { height: 100vh; height: 100svh; padding: 0; display: block; overflow: hidden; }
.reel--js .reel__frame { position: absolute; top: calc(50% + var(--nav-h) / 2); left: 50%; width: calc(1440 * var(--u)); height: calc(1080 * var(--u)); translate: -50% -50%; display: block; }
.reel--js .reel__copy { position: absolute; top: calc(52 * var(--u)); left: calc(170 * var(--u)); right: calc(170 * var(--u)); gap: calc(14 * var(--u)); }
.reel--js .reel__badge { font-size: max(13px, calc(17 * var(--u))); padding: calc(6 * var(--u)) calc(20 * var(--u)); }
.reel--js .reel__h { font-size: calc(78 * var(--u)); }
.reel--js .reel__sub { font-size: max(15px, calc(22 * var(--u))); }
.reel--js .reel__row { position: absolute; left: calc(50% - 50vw); width: 100vw; top: calc(487 * var(--u)); height: calc(400 * var(--u)); display: block; overflow: hidden; padding: 0; scroll-snap-type: none; cursor: grab; touch-action: pan-y; user-select: none; }
.reel--js .reel__row.is-drag { cursor: grabbing; }
.reel--js .reel__row.is-spiral { overflow: visible; }
.reel--js .rc { position: absolute; top: 0; left: 0; width: 100px; height: 100px; aspect-ratio: auto; border-radius: 0; visibility: hidden; }
.reel--js .reel__go { position: absolute; left: 50%; translate: -50% 0; width: max-content; top: calc(920 * var(--u)); }
.reel--js .reel__note { display: grid; position: absolute; font: 700 calc(30 * var(--u))/1.4 "Aref Ruqaa", var(--f-display); color: var(--g2); pointer-events: none; }
.reel--js .reel__note--cards { left: calc(110 * var(--u)); top: calc(300 * var(--u)); justify-items: center; }
.reel--js .reel__note--cards .reel__arrow { width: calc(84 * var(--u)); margin-block-start: calc(4 * var(--u)); }
.reel--js .reel__note--cta { left: calc(912 * var(--u)); top: calc(860 * var(--u)); justify-items: start; }
.reel--js .reel__note--cta .reel__arrow { width: calc(150 * var(--u)); margin-inline-start: calc(20 * var(--u)); transform: scaleX(1); }
.reel__arrow { overflow: visible; }
.reel__arrow path { fill: none; stroke: var(--g2); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px #faa83e66); }
.reel--js .reel__dust { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.reel--js .reel__gate { position: absolute; inset: 0; z-index: 4; display: grid; place-content: center; justify-items: center; gap: calc(16 * var(--u)); opacity: 0; visibility: hidden; }
.reel--js .reel__ringbox { width: calc(520 * var(--u)); }
.reel--js .reel__ring { opacity: 0; }
.reel--js .reel__counts { gap: calc(16 * var(--u)) calc(60 * var(--u)); }
.reel--js .reel__counts b { font-size: calc(56 * var(--u)); }
/* الجوال (2.3.34): نص متراص، ثم «جرّبها حيّة» يساراً وسهمها نحو البطاقات، ثم شريط بطاقات صغيرة (62–74 بكسل، 5–6 على القوس) بارتفاع 150،
   ثم «عرض سعر خلال 48 ساعة» يميناً وسهمها نحو الزر، ثم الزر داخل حلقته المتقطعة (بعيداً عن الأزرار العائمة أسفل اليسار) */
@media (max-width: 820px) {
  .reel { --u: calc(100vw / 640); }
  .reel--js .reel__frame { position: absolute; inset: 0; width: auto; height: auto; translate: none; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: calc(var(--nav-h) + 4px) 16px 100px; } /* 100: الأزرار العائمة أسفل اليسار */
  .reel--js .reel__copy { position: static; gap: 8px; order: 0; }
  .reel--js .reel__badge { font-size: 13px; padding: 4px 14px; }
  .reel--js .reel__h { font-size: clamp(30px, 8.6vw, 44px); }
  .reel--js .reel__sub { font-size: 15px; line-height: 1.75; }
  .reel--js .reel__row { position: relative; top: auto; left: auto; flex: none; width: 100vw; height: 150px; order: 2; perspective: 600px; }
  .reel--js .reel__go { position: relative; left: auto; top: auto; translate: none; order: 4; margin-block-start: 10px; }
  .reel--js .reel__go::before { inset: -10px -16px; }
  .reel--js .reel__note { position: relative; left: auto; top: auto; font-size: 20px; line-height: 1.4; display: flex; align-items: center; gap: 4px; }
  .reel--js .reel__note--cards { order: 1; align-self: flex-end; margin-block-end: -14px; margin-inline-end: 6%; z-index: 2; }
  .reel--js .reel__note--cards .reel__arrow { width: 30px; height: 32px; margin: 10px 0 -12px; }
  .reel--js .reel__note--cta { order: 3; align-self: flex-start; margin-block: -6px -10px; margin-inline-start: 12%; }
  .reel--js .reel__note--cta .reel__arrow { width: 56px; height: 30px; transform: rotate(-38deg) translateY(10px); }
  .reel--js .reel__ringbox { width: min(78vw, 340px); }
  .reel--js .reel__counts b { font-size: 34px; }
  .reel--js .reel__counts { gap: 8px 22px; }
}
@media (max-width: 820px) and (max-height: 700px) {
  .reel--js .reel__h { font-size: 28px; }
  .reel--js .reel__sub { font-size: 14px; line-height: 1.7; }
  .reel--js .reel__row { height: 140px; }
}
@media (prefers-reduced-motion: reduce) { .reel__ring { animation: none; } }
/* الجوال «الخفيف»: حواف مدورة وحد ذهبي رفيع بلا SVG، ومنظور للقوس، وwill-change أثناء الحركة فقط */
.reel--lite .rc { border-radius: 8px; border: 1px solid #fdcf4859; clip-path: none; backface-visibility: hidden; }
.reel--lite .rc__edge { display: none; }
.reel--lite .rc__lbl { display: none; }
.reel--lite.reel--moving .rc { will-change: transform; }
.reel--js:not(.reel--lite) .rc { will-change: transform, clip-path; }
/* تقليل الحركة: صف مقوّس ساكن ثم الحلقة في مكانها */
.reel--still .reel__pin { height: auto; overflow: visible; }
.reel--still .reel__frame { position: relative; top: auto; left: auto; translate: none; margin-inline: auto; inset: auto; }
.reel--still .reel__gate { position: relative; inset: auto; opacity: 1; visibility: visible; padding-block: 40px 100px; }
.reel--still .reel__ring { opacity: 1; }
.reel--still .reel__dust { display: none; }
.reel--still .reel__row { cursor: default; }

/* 2.3.39: رابط رحلة العلامة في غرفة العمل، وشريط «رحلات العلامات» في /projects/ */
.rm-hero__journey a { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; padding: 8px 16px; border-radius: 14px; border: 1px solid #fdcf4840; background: #fdcf480b; color: var(--g2); font-size: 15px; line-height: 1.6; transition: border-color .3s, background .3s; }
.rm-hero__journey small { color: var(--dim); font-size: 13px; }
@media (hover: hover) { .rm-hero__journey a:hover { border-color: var(--g2); background: #fdcf4814; } }
.pfb { padding-inline: var(--pad); }
.pfb__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.pfb__a { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; min-height: 92px; padding: 10px 14px 10px 10px; border-radius: 18px; border: 1px solid #ffffff14; background: #1b1917b8; transition: border-color .3s, background .3s; }
.pfb__img { display: grid; place-items: center; width: 76px; aspect-ratio: 1; border-radius: 12px; background: #121110; overflow: hidden; }
.pfb__img img { width: 100%; height: 100%; object-fit: contain; }
.pfb__t { display: grid; gap: 2px; min-width: 0; }
.pfb__t b { font: 700 16px/1.5 var(--f-display); }
.pfb__t small { color: var(--dim); font-size: 13px; line-height: 1.6; }
.pfb__t em { color: var(--faint); font-size: 12.5px; line-height: 1.6; }
@media (hover: hover) { .pfb__a:hover { border-color: #fdcf4870; background: #fdcf480d; } }