/* ==========================================================================
   أم سارة — لمسات الحركة (مأخوذة من قالب «معرض» ومهدّأة لهوية الموقع)
   المؤشر الدائري والدائرة الدوّارة. كل ما هنا طبقة تحسين: الموقع كامل بدونها،
   ولا شيء منها يعمل عند prefers-reduced-motion أو على الأجهزة اللمسية.
   ========================================================================== */

/* ---------- المؤشر الدائري: نقطة تتبع فوراً ودائرة تلحق بتأخير ---------- */

.cursor { display: none; }

.has-cursor .cursor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 95; /* دون نافذة العمل (.case) والسلة كي لا يعلو عليهما */
  pointer-events: none;
  transition: opacity 0.3s;
}
.has-cursor .cursor.is-hidden { opacity: 0; }

.cursor__dot,
.cursor__ring {
  position: fixed;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--primary);
}
.cursor__ring {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(107, 45, 92, 0.45);
  transition: width 0.45s var(--ease), height 0.45s var(--ease), background-color 0.35s, border-color 0.35s;
}
.cursor.is-hover .cursor__ring {
  width: 56px;
  height: 56px;
  border-color: rgba(107, 45, 92, 0.3);
  background: rgba(107, 45, 92, 0.07);
}
.cursor.is-label .cursor__ring {
  width: 86px;
  height: 86px;
  border-color: transparent;
  background: var(--primary);
}
.cursor.is-label .cursor__dot { opacity: 0; }

.cursor__label {
  font-family: var(--f-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.3s, transform 0.4s var(--ease);
}
.cursor.is-label .cursor__label { opacity: 1; transform: none; }

/* نُخفي مؤشر النظام على الكمبيوتر فقط، وحين يعمل مؤشرنا فعلاً.
   حقول الكتابة تحتفظ بمؤشرها كي لا يضيع مكان الكتابة. */
@media (hover: hover) and (pointer: fine) {
  .has-cursor body,
  .has-cursor a,
  .has-cursor button,
  .has-cursor [role="button"] { cursor: none; }
  .has-cursor input,
  .has-cursor textarea,
  .has-cursor select,
  .has-cursor [contenteditable] { cursor: auto; }
}

/* ---------- الدائرة الدوّارة: نص على محيطها وسهم في مركزها ---------- */

.spinner {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(6rem, 8vw, 7.5rem);
  aspect-ratio: 1;
  flex-shrink: 0;
  color: var(--primary);
  text-decoration: none;
}
.spinner__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: currentColor;
  font-family: var(--f-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.2px;
}
.has-motion .spinner__ring { animation: us-spin 26s linear infinite; }
.spinner:hover .spinner__ring,
.spinner:focus-visible .spinner__ring { animation-play-state: paused; }

.spinner__core {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-ink);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.5s var(--ease), background-color 0.4s;
}
.spinner:hover .spinner__core,
.spinner:focus-visible .spinner__core { background: var(--gold); transform: scale(1.12); }

@keyframes us-spin { to { rotate: 360deg; } }

/* الواجهة: الدائرة بجانب الأزرار دون أن تزحزح ترتيبها */
.hero .actions { flex-wrap: wrap; }
.hero__spin { margin-inline-start: auto; }
@media (max-width: 720px) {
  .hero__spin { margin-inline-start: 0; }
  .spinner { width: 5.5rem; }
}

/* الدعوة الأخيرة: الدائرة داخل الصندوق */
.cta .spinner { color: var(--primary); }

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

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
  .has-cursor body,
  .has-cursor a,
  .has-cursor button { cursor: auto; }
  .spinner__ring { animation: none !important; }
  .spinner__core { transition: none; }
}

/* ==========================================================================
   المرحلة 2
   ========================================================================== */

/* ---------- التمرير الناعم (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- العناوين كلمة كلمة ---------- */
/* العنوان نفسه لا يختفي (نلغي ظهور الكتلة)؛ كلماته هي التي تصعد بالتتابع. */
.reveal-on .display[data-words][data-reveal] { opacity: 1; transform: none; }
.display[data-words] .w { display: inline-block; }
.reveal-on .display[data-words] .w {
  opacity: 0;
  transform: translateY(0.45em);
  filter: blur(6px);
  transition: opacity 0.7s var(--ease), transform 0.8s var(--ease), filter 0.7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal-on .display[data-words].is-in .w { opacity: 1; transform: none; filter: none; }

/* ---------- بقعة الضوء في الواجهة ---------- */
.hero { position: relative; isolation: isolate; }
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(36rem circle at var(--gx, 70%) var(--gy, 40%), rgba(107, 45, 92, 0.09), transparent 62%),
    radial-gradient(22rem circle at var(--gx, 70%) var(--gy, 40%), rgba(184, 146, 90, 0.1), transparent 60%);
}

/* ---------- الشريط النصي (مستقل عن .belt) ---------- */
.ticker:empty { display: none; }
.ticker {
  direction: ltr;
  overflow: hidden;
  padding-block: clamp(1.2rem, 3vw, 2rem);
  border-block: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker__track { display: flex; width: max-content; will-change: transform; }
.ticker__group { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.4rem); padding-inline-end: clamp(1.2rem, 3vw, 2.4rem); }
.ticker__item {
  direction: rtl;
  white-space: nowrap;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1.5;
  color: var(--ink);
}
.ticker__item.is-outline { color: transparent; -webkit-text-stroke: 1px var(--primary); }
.ticker__star { color: var(--gold); font-size: clamp(1rem, 0.8rem + 1vw, 1.6rem); }

/* ---------- انكشاف الصور ---------- */
.has-motion .img-reveal { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease); }
.has-motion .img-reveal.is-shown { clip-path: inset(0 0 0 0); }
.has-motion .img-reveal img { transform: scale(1.14); transition: transform 1.4s var(--ease); }
.has-motion .img-reveal.is-shown img { transform: none; }

/* ---------- صورة العمل تتبع المؤشر داخل إطارها ---------- */
@media (hover: hover) and (pointer: fine) {
  .has-motion .work:hover .work__media.is-shown img {
    transform: scale(1.09) translate(var(--px, 0), var(--py, 0));
    transition: transform 0.7s var(--ease);
  }
}

/* ---------- دائرة السهم المائل «كل الأعمال» ---------- */
.orbit-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: fit-content;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
}
.orbit-link__circle {
  display: grid;
  place-items: center;
  width: clamp(4.2rem, 6vw, 5.4rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--primary);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s;
}
.orbit-link__circle svg { width: 34%; height: 34%; transform: rotate(45deg); transition: transform 0.7s var(--ease); }
.orbit-link:hover .orbit-link__circle,
.orbit-link:focus-visible .orbit-link__circle { background: var(--primary); color: #fff; border-color: var(--primary); }
.orbit-link:hover .orbit-link__circle svg,
.orbit-link:focus-visible .orbit-link__circle svg { transform: rotate(0deg); }
.orbit-link small { display: block; font-family: var(--f-body); font-weight: 500; font-size: 0.85rem; color: var(--mute); }
/* نسخة مدمجة بجانب عنوان القسم */
.orbit-link--head { margin: 0; gap: 0.8rem; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); }
.orbit-link--head .orbit-link__circle { width: clamp(3.2rem, 4.2vw, 3.8rem); }
.orbit-link--head small { font-size: 0.8rem; }

/* ---------- شريط تقدّم القراءة ---------- */
.read-progress {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 70;
  height: 2px;
  background: linear-gradient(270deg, var(--gold), #d9b77f);
  transform: scaleX(0);
  transform-origin: right; /* RTL: يبدأ من اليمين */
  pointer-events: none;
}

/* ---------- ستارة الانتقال: ::after على <html> فتغطي قبل رسم أي شيء ---------- */
html.curtain-in::after,
html.curtain-leave::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background: var(--primary);
}
html.curtain-in::after { clip-path: inset(0 0 0 0); transition: clip-path 0.24s cubic-bezier(0.7, 0, 0.3, 1); }
html.curtain-in.curtain-out::after { clip-path: inset(0 0 100% 0); }
html.curtain-leave::after { animation: us-curtain-leave 0.22s cubic-bezier(0.7, 0, 0.3, 1) forwards; }
@keyframes us-curtain-leave { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  html.curtain-in::after, html.curtain-leave::after { display: none; }
  .read-progress, .hero__glow { display: none; }
  .img-reveal { clip-path: none !important; }
}

/* النص الدائري: الصفحة RTL فيبدأ النص من نهاية المسار ويخرج عنه فلا يُرسم.
   نجعل الدائرة LTR (الحروف العربية تتشكّل كما هي)، ونمدّه على المحيط كاملاً. */
.spinner__ring { direction: ltr; unicode-bidi: isolate; letter-spacing: 0; }
/* الأزرار بجانب الدائرة لا تتمدّد لطولها */
.hero .actions, .cta .actions { align-items: center; }
/* الدائرة داخل صندوق الدعوة العنابي: بلون كريمي/ذهبي كي تُرى */
.cta .spinner { color: #f3d9a8; }
.cta .spinner__core { background: #f3d9a8; color: var(--primary); }
.cta .spinner:hover .spinner__core, .cta .spinner:focus-visible .spinner__core { background: #fff; }

/* ==========================================================================
   المرحلة 3 — مجموعة بطاقات الواجهة + ظهور الأقسام عند النزول
   ========================================================================== */

/* ---------- مجموعة البطاقات ---------- */
.hero { overflow-x: clip; }
.hero__media { display: block; position: relative; }
.deck { position: relative; width: 100%; max-width: 31rem; aspect-ratio: 4 / 4.7; margin-inline: auto; }
.deck__blob {
  position: absolute;
  inset: 4% -10% 2% 6%;
  z-index: 0;
  border-radius: 46% 54% 40% 60% / 50% 38% 62% 50%;
  background: linear-gradient(150deg, var(--primary-soft), #efe6dc 70%);
  transform: rotate(-8deg);
}
.deck__card {
  position: absolute;
  top: 7%;
  left: 13%;
  width: 74%;
  height: 80%;
  overflow: hidden;
  border-radius: 28px;
  background: var(--sand);
  box-shadow: 0 34px 60px -34px rgba(43, 18, 38, 0.5), 0 0 0 1px rgba(28, 27, 34, 0.05);
  transform-origin: 80% 80%;
  transform: translate(var(--tx, 0), var(--ty, 0)) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s;
  will-change: transform;
}
.deck__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: filter 0.6s; }
.deck__card:not(.is-front) img { filter: saturate(0.8) brightness(0.96); }
.deck__card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(28, 27, 34, 0.28)); pointer-events: none; }
.deck__card.is-front:hover { box-shadow: 0 44px 70px -34px rgba(43, 18, 38, 0.6), 0 0 0 1px rgba(28, 27, 34, 0.05); }

.deck__bar {
  position: absolute;
  z-index: 1;
  inset-inline: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(28, 27, 34, 0.35);
}
.deck__icon { display: grid; place-items: center; flex-shrink: 0; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 1.2rem; }
.deck__txt { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.4; }
.deck__txt b { overflow: hidden; color: var(--ink); font-size: 0.92rem; white-space: nowrap; text-overflow: ellipsis; }
.deck__txt small { color: var(--mute); font-size: 0.75rem; }
.deck__go { display: grid; place-items: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 1.1rem; transition: transform 0.45s var(--ease), background-color 0.3s, color 0.3s; }
.deck__card:hover .deck__go, .deck__card:focus-visible .deck__go { transform: translateX(-4px); background: var(--primary); color: #fff; }

.deck__dots { position: absolute; z-index: 20; bottom: -2.2rem; left: 50%; display: flex; gap: 0.45rem; translate: -50% 0; transition: opacity 0.4s; }
.deck__dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width 0.45s var(--ease), background-color 0.3s; }
.deck__dots button[aria-selected="true"] { width: 26px; background: var(--primary); }
.deck.is-spread .deck__dots { opacity: 0; pointer-events: none; }

.deck .hero__chip { z-index: 12; transition: opacity 0.5s, translate 0.9s var(--ease); }
.deck .hero__chip--a { top: 3%; inset-inline-start: -6%; }
.deck .hero__chip--b { bottom: 14%; inset-inline-end: -8%; }
.deck.is-spread .hero__chip { opacity: 0; translate: 0 -12px; }

/* دخول المجموعة: البطاقات تسقط إلى أماكنها من الخلف إلى الأمام، ثم البطاقتان الصغيرتان */
.has-motion .deck:not(.is-ready) .deck__card,
.has-motion .deck:not(.is-ready) .hero__chip { opacity: 0; }
.has-motion .deck.is-ready .deck__card { animation: deck-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--d, 0) * 110ms); }
.deck__card:nth-of-type(1) { --d: 3; }
.deck__card:nth-of-type(2) { --d: 2; }
.deck__card:nth-of-type(3) { --d: 1; }
.deck__card:nth-of-type(4) { --d: 0; }
.has-motion .deck.is-ready .hero__chip { animation: chip-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.65s backwards; }
.has-motion .deck.is-ready .hero__chip--b { animation-delay: 0.8s; }
@keyframes deck-in { from { opacity: 0; translate: 0 -16%; rotate: 9deg; } }
@keyframes chip-in { from { opacity: 0; translate: 0 14px; scale: 0.92; } }

@media (max-width: 960px) {
  .deck { max-width: 26rem; margin-top: 1rem; margin-bottom: 2.5rem; }
  .deck .hero__chip--a { inset-inline-start: 0; }
  .deck .hero__chip--b { inset-inline-end: 0; }
}

/* ---------- ظهور الأقسام عند النزول (خفيف جداً) ---------- */
.has-motion [data-m] {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.8s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), color 0.3s;
  transition-delay: var(--md, 0ms);
}
.has-motion [data-m="scale"] { translate: none; scale: 0.965; }
.has-motion [data-m].m-in { opacity: 1; translate: none; scale: none; }

/* خط الكلمة الصغيرة فوق العناوين يُرسم من اليمين */
.has-motion .kicker[data-m] { translate: none; }
.has-motion .kicker[data-m]::before { transform: scaleX(0); transform-origin: right; transition: transform 0.8s var(--ease) 0.15s; }
.has-motion .kicker[data-m].m-in::before { transform: none; }

/* البطاقات داخل الشبكات تتتابع (التأخير يُزال بعد الظهور كي لا يبطئ الوقوف عليها) */
.reveal-on [data-reveal].has-md { transition-delay: var(--md, 0ms); }

@media (prefers-reduced-motion: reduce) {
  .has-motion [data-m] { opacity: 1 !important; translate: none !important; scale: none !important; }
  .deck__card { transition: none; }
}

/* ==========================================================================
   شبكة الهبوط «أعمال تصنع الفرق»: تستقبل بطاقات الواجهة وتنضمّ إليها أعمال أخرى
   ========================================================================== */
.hero { position: relative; z-index: 3; }
.deck__card { transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, opacity 0.35s; }
.deck.is-spread .deck__card { transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s, opacity 0.35s; }
.deck.is-landed .deck__card { opacity: 0; pointer-events: none; }

.land__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: clamp(0.75rem, 1.4vw, 1.2rem);
  height: clamp(540px, 46vw, 680px);
}
.land__card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-radius: 24px;
  background: var(--sand);
  box-shadow: 0 24px 44px -32px rgba(43, 18, 38, 0.45), 0 0 0 1px rgba(28, 27, 34, 0.05);
  transition: box-shadow 0.4s, transform 0.5s var(--ease);
}
.land__card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 0.9s var(--ease); }
.land__card::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(28, 27, 34, 0.25)); pointer-events: none; }
.land__card:hover { transform: translateY(-4px); box-shadow: 0 34px 54px -30px rgba(43, 18, 38, 0.55), 0 0 0 1px rgba(28, 27, 34, 0.05); }
.land__card:hover img { transform: scale(1.05); }
.land__card:hover .deck__go { transform: translateX(-4px); background: var(--primary); color: #fff; }
.land__card .deck__bar { inset-inline: 8px; bottom: 8px; padding: 0.5rem 0.55rem; gap: 0.55rem; border-radius: 16px; }
.land__card .deck__icon { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
.land__card .deck__txt b { font-size: 0.85rem; }
.land__card .deck__txt small { font-size: 0.72rem; }
.land__card .deck__go { width: 1.7rem; height: 1.7rem; }

.land__card--0 { grid-column: 1; grid-row: 1 / 7; }
.land__card--1 { grid-column: 2; grid-row: 1 / 3; }
.land__card--2 { grid-column: 2; grid-row: 3 / 7; }
.land__card--3 { grid-column: 3; grid-row: 1 / 5; }
.land__card--4 { grid-column: 3; grid-row: 5 / 7; }
.land__card--5 { grid-column: 4; grid-row: 1 / 3; }
.land__card--6 { grid-column: 4; grid-row: 3 / 7; }
.land__card--7 { grid-column: 5; grid-row: 1 / 5; }
.land__card--8 { grid-column: 5; grid-row: 5 / 7; }
/* الخانات القصيرة: شريط مختصر بلا وصف */
.land__card--1 .deck__txt small, .land__card--4 .deck__txt small,
.land__card--5 .deck__txt small, .land__card--8 .deck__txt small { display: none; }

/* الحالات — فقط حين تعمل الحركة؛ بدونها تظهر الشبكة كاملة ثابتة */
.landing.is-live .land__card.is-target { opacity: 0; transition: opacity 0.35s, box-shadow 0.4s, transform 0.5s var(--ease); }
.landing.is-live.is-landed .land__card.is-target { opacity: 1; }
.landing.is-live .land__card:not(.is-target) {
  opacity: 0;
  translate: 0 46px;
  scale: 0.94;
  transition: opacity 0.7s var(--ease), translate 0.9s var(--ease), scale 0.9s var(--ease), box-shadow 0.4s, transform 0.5s var(--ease);
  transition-delay: calc(var(--k, 0) * 55ms);
}
.landing.is-live.is-filling .land__card:not(.is-target) { opacity: 1; translate: none; scale: none; }

@media (max-width: 900px) {
  .land__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 92px; grid-auto-flow: dense; height: auto; }
  .land__card { grid-column: auto !important; grid-row: span 2 !important; }
  .land__card.is-target { grid-row: span 3 !important; }
  .land__card--0 { display: none; }
}
@media (max-width: 900px) {
  .land__card .deck__bar { inset-inline: 6px; bottom: 6px; padding: 0.4rem 0.45rem; gap: 0.45rem; border-radius: 13px; }
  .land__card .deck__icon { width: 1.8rem; height: 1.8rem; font-size: 0.9rem; }
  .land__card .deck__txt small, .land__card .deck__go { display: none; }
  .land__card .deck__txt b { font-size: 0.78rem; }
}