/* ============================================================================
   شمس — طبقة الحركة
   كل ما هنا تحسينٌ تدريجي: بلا 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(--navy-abyss);
  pointer-events: none;
}
.curtain::before, .curtain::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 50.5%;
  background: var(--navy-abyss);
  transition: transform 1s var(--ease-both) .15s;
}
.curtain::before { inset-block-start: 0; }
.curtain::after  { inset-block-end: 0; }

.curtain__mark { inline-size: clamp(3.5rem, 8vw, 5.5rem); position: relative; z-index: 1; }
.curtain__mark svg { inline-size: 100%; block-size: auto; overflow: visible; }
.curtain__disc { transform-origin: center; animation: curtain-disc 1.1s var(--ease-out) both; }
.curtain__wave path, .curtain__wave line { stroke-dasharray: 60; stroke-dashoffset: 60; animation: curtain-draw .8s var(--ease-out) both .25s; }
.curtain__glow {
  position: absolute;
  inset: -140%;
  background: radial-gradient(circle, rgb(182 183 27 / .22), transparent 62%);
  animation: curtain-glow 1.2s var(--ease-out) both;
}
@keyframes curtain-disc { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes curtain-draw { to { stroke-dashoffset: 0; } }
@keyframes curtain-glow { from { opacity: 0; } 60% { opacity: 1; } to { opacity: .55; } }

html.is-loaded .curtain { transition: visibility 0s 1.15s; visibility: hidden; }
html.is-loaded .curtain::before { transform: translateY(-100%); }
html.is-loaded .curtain::after  { transform: translateY(100%); }
html.is-loaded .curtain__mark, html.is-loaded .curtain__glow {
  opacity: 0;
  transition: opacity .35s var(--ease-soft);
}
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.4s var(--ease-out); }
.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; }

/* ── البانر: طبقات parallax ────────────────────────────────────────────── */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__layer {
      animation: hero-drift linear both;
      animation-timeline: scroll();
      animation-range: 0 100vh;
    }
    .hero__layer--back  { --drift: 9%;  --zoom: 1.09; }
    .hero__layer--mid   { --drift: 15%; --zoom: 1.05; }
    .hero__content      { animation: hero-lift linear both; animation-timeline: scroll(); animation-range: 0 78vh; }
    .hero__sun          { animation: hero-sun linear both; animation-timeline: scroll(); animation-range: 0 100vh; }
  }
}
@keyframes hero-drift { to { transform: translateY(var(--drift)) scale(var(--zoom)); } }
@keyframes hero-lift  { to { transform: translateY(-3.5rem); opacity: 0; } }
@keyframes hero-sun   { to { transform: translateY(-38vh) scale(.55); opacity: .25; } }

/* شروق الشمس عند فتح الصفحة */
.hero__sun { animation: sun-rise 2.4s var(--ease-out) both .35s; }
@keyframes sun-rise {
  from { transform: translateY(28vh) scale(.7); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

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

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

.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(--lime) calc(var(--p, 0) * 1turn), rgb(247 245 238 / .16) 0);
  color: var(--paper);
  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(23 24 51 / .92);
  backdrop-filter: blur(6px);
}
.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(182 183 27 / .13), 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: .18em;
  color: rgb(247 245 238 / .68);
}
.scroll-cue__rail {
  position: relative;
  inline-size: 1px;
  block-size: 3.25rem;
  background: rgb(247 245 238 / .25);
  overflow: hidden;
}
.scroll-cue__rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 45%;
  background: var(--lime-bright);
  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; }
  .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; }
}