/* ============================================================================
   شمس — طبقة الحركة
   كل ما هنا تحسينٌ تدريجي: بلا JavaScript أو مع تقليل الحركة، يظهر المحتوى كاملًا.
   ========================================================================= */

/* ── انتقال بين الصفحات ─────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out .32s var(--ease-both) both; }
::view-transition-new(root) { animation: vt-in .5s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(1.25rem); } }

/* ── ستارة التحميل ──────────────────────────────────────────────────────
   عاجية: قرص ذهبي يشرق من خلف خطّ الأفق، ثم ترتفع الستارة كاملة. */

.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  background: var(--ivory);
  pointer-events: none;
  transition: transform 1.05s var(--ease-both) .1s, visibility 0s 1.2s;
}
.curtain::after {                            /* خطّ الأفق */
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 50%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgb(184 135 58 / .6), transparent);
  transform: scaleX(0);
  animation: curtain-line .9s var(--ease-out) both;
}

.curtain__mark {
  position: relative;
  z-index: 1;
  inline-size: clamp(5rem, 11vw, 7.5rem);
  aspect-ratio: 2 / 1;
  overflow: hidden;                          /* نصف القرص فوق الأفق فقط */
  translate: 0 -50%;
}
.curtain__mark svg { display: none; }
.curtain__mark::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #e9c98b, var(--gold) 70%);
  transform: translateY(100%);
  animation: curtain-rise 1.1s var(--ease-out) both .2s;
}
.curtain__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(40vmax 26vmax at 50% 50%, rgb(226 191 126 / .35), transparent 70%);
  animation: curtain-glow 1.3s var(--ease-out) both .2s;
}
@keyframes curtain-line { to { transform: scaleX(1); } }
@keyframes curtain-rise { to { transform: translateY(0); } }
@keyframes curtain-glow { from { opacity: 0; } to { opacity: 1; } }

html.is-loaded .curtain { transform: translateY(-100%); visibility: hidden; }
html:not(.js) .curtain { display: none; }

/* ── ظهور العناصر عند التمرير ──────────────────────────────────────────── */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 2rem));
  transition:
    opacity var(--dur-3) var(--ease-out) calc(var(--i, 0) * 90ms),
    transform var(--dur-3) var(--ease-out) calc(var(--i, 0) * 90ms);
  will-change: opacity, transform;
}
.js [data-reveal].is-in { opacity: 1; transform: none; will-change: auto; }

.js [data-reveal="fade"]  { --reveal-y: 0; }
.js [data-reveal="right"] { transform: translateX(2.5rem); }
.js [data-reveal="left"]  { transform: translateX(-2.5rem); }
.js [data-reveal="zoom"]  { transform: scale(.94); }

/* كشف الوسائط: قناع يرتفع + تكبير خفيف يستقرّ */
.js [data-reveal="media"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.15s var(--ease-out); }
.js [data-reveal="media"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="media"] > img { transform: scale(1.12); }
.js [data-reveal="media"].is-in > img { transform: scale(1); transition: transform 1.6s var(--ease-out), opacity var(--dur-3); }

/* كشف الوسائط داخل قوس شمسي */
.js [data-reveal="arc"] { clip-path: circle(0% at 50% 100%); transition: clip-path 1.8s var(--ease-soft); }
.js [data-reveal="arc"].is-in { clip-path: circle(150% at 50% 100%); }

/* ── كشف العناوين كلمة-كلمة ─────────────────────────────────────────────── */

/* قناع الكلمة: ارتفاع سطره أوسع قليلًا من سطر العنوان حتى لا تُقصّ
   نزول الحروف العربية (ي، ج، ؛) ولا علامات التشكيل فوقها. */
.split-w { display: inline-block; overflow: hidden; vertical-align: bottom; line-height: 1.36; }
.split-w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(115%);
  transition: transform .95s var(--ease-out) calc(var(--wi, 0) * 45ms);
}
.is-in .split-w > i, .split-ready.is-in > .split-w > i { transform: none; }

/* ── البانر: القوس ينفتح ثم تنساب الطبقات مع التمرير ──────────────────── */

.js .hero__arch { animation: arch-open 1.6s var(--ease-out) both .55s; }
.js .hero__arch .hero__layer { animation: arch-zoom 2.4s var(--ease-out) both .55s; }
@keyframes arch-open {
  from { clip-path: inset(46% 0 0 0 round 50% 50% 0 0); }
  to   { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes arch-zoom { from { transform: scale(1.18); } to { transform: scale(1); } }

/* الشمس تشرق من خلف الأفق عند فتح الصفحة */
.hero__sun { animation: sun-rise 2.6s var(--ease-out) both .35s; }
@keyframes sun-rise {
  from { transform: translateY(30%) scale(.6); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.js .hero__visual::before { animation: ring-in 1.8s var(--ease-out) both .9s; }
@keyframes ring-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__stage   { animation: hero-drift linear both; animation-timeline: scroll(); animation-range: 0 100vh; }
    .hero__content { animation: hero-lift linear both; animation-timeline: scroll(); animation-range: 0 85vh; }
  }
}
@keyframes hero-drift { to { transform: translateY(6%) scale(1.06); } }
@keyframes hero-lift  { to { transform: translateY(-2.5rem); opacity: .15; } }

/* تعاقب شرائح البانر */
.hero__slide { opacity: 0; transition: opacity 1.8s var(--ease-soft); }
.hero__slide.is-active { opacity: 1; }
html:not(.js) .hero__slide:first-child { opacity: 1; }

/* صورة ترويسة الصفحات الداخلية: القوس يرتفع من خطّ الأفق */
.js .page-head > .page-head__media { animation: head-rise 1.5s var(--ease-out) both .45s; }
@keyframes head-rise {
  from { clip-path: inset(100% 0 0 0); transform: translateY(2rem); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}

/* ── قرص التقدّم ────────────────────────────────────────────────────────── */

.progress-sun {
  position: fixed;
  inset-block-end: clamp(1rem, 3vw, 2rem);
  inset-inline-end: clamp(1rem, 3vw, 2rem);
  z-index: 50;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--gold) calc(var(--p, 0) * 1turn), rgb(47 48 100 / .12) 0);
  color: var(--ink);
  font-size: var(--fs-micro);
  font-family: var(--font-display);
  opacity: 0;
  visibility: hidden;
  transform: scale(.7);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility var(--dur-2);
  pointer-events: none;
}
.progress-sun.is-visible { opacity: 1; visibility: visible; transform: none; }
.progress-sun::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgb(251 248 241 / .94);
  backdrop-filter: blur(6px);
  box-shadow: 0 .5rem 1.5rem -.5rem rgb(92 66 30 / .3);
}
.progress-sun span { position: relative; }

/* ── التمرير الأفقي المثبَّت ────────────────────────────────────────────── */

.hpin { position: relative; }
.hpin__viewport {
  position: sticky;
  inset-block-start: 0;
  block-size: 100svh;
  display: grid;
  /* عمود واحد بعرض الشاشة: بدونه يمدّ الشريطُ الأفقي العمودَ بعرضه كاملًا
     فينزاح رأس القسم خارج الشاشة. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  overflow: hidden;
}
.hpin__track {
  display: flex;
  inline-size: max-content;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  padding-inline: var(--gutter);
  will-change: transform;
}
.hpin__panel { flex: none; inline-size: min(78vw, 30rem); }

@media (max-width: 61.99rem) {
  .hpin { block-size: auto !important; }
  .hpin__viewport { position: static; block-size: auto; padding-block: var(--section-y); }
  .hpin__track { flex-direction: column; inline-size: auto; transform: none !important; padding-inline: 0; }
  .hpin__panel { inline-size: 100%; }
}

/* ── البطاقات المتراكمة ────────────────────────────────────────────────── */

.stack { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.stack__item {
  position: sticky;
  inset-block-start: calc(var(--header-h) + clamp(1rem, 3vw, 2.5rem) + var(--k, 0) * .9rem);
}
.stack__card {
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.75rem, 3.2vw, 3rem);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  background: linear-gradient(160deg, var(--bg-raised), var(--bg));
  box-shadow: var(--shadow);
}
@media (max-width: 47.99rem) { .stack__item { position: static; } }

/* ── حركات دقيقة ───────────────────────────────────────────────────────── */

.magnetic { transition: transform var(--dur-2) var(--ease-out); }

.spotlight { position: relative; isolation: isolate; }
.spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(18rem 18rem at var(--mx, 50%) var(--my, 50%), rgb(226 191 126 / .22), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-soft);
}
.spotlight:hover::before { opacity: 1; }

/* موجة الفصل بين الأقسام */
.wave-divider {
  position: relative;
  block-size: clamp(3rem, 6vw, 5rem);
  z-index: var(--z-wave);
  pointer-events: none;
}
.wave-divider canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }

/* مؤشّر «مرّر للأسفل» */
.scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-size: var(--fs-micro);
  letter-spacing: .02em;
  color: var(--ink-mute);
}
.scroll-cue__rail {
  position: relative;
  inline-size: 1px;
  block-size: 3.25rem;
  background: rgb(47 48 100 / .18);
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 45%;
  background: var(--gold);
  animation: cue 2.4s var(--ease-both) infinite;
}
@keyframes cue {
  0%   { transform: translateY(-110%); }
  55%  { transform: translateY(230%); }
  100% { transform: translateY(230%); }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal] > img { transform: none !important; }
  .split-w > i { transform: none !important; }
  .marquee__track { animation: none; transform: none; }
  .marquee { mask-image: none; overflow-x: auto; }
  .hpin__viewport { position: static; block-size: auto; }
  .hpin { block-size: auto !important; }
  .hpin__track { flex-direction: column; inline-size: auto; transform: none !important; }
  .hpin__panel { inline-size: 100%; }
  .stack__item { position: static; }
  .curtain { display: none; }
  .js .hero__arch, .js .hero__arch .hero__layer, .js .page-head > .page-head__media { animation: none; clip-path: none; }
  .scroll-cue__rail::after { animation: none; transform: translateY(0); block-size: 100%; opacity: .6; }
  .hero__slide { transition: none; }
  .wave-divider { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}