/* ═══════════════════════════════════════════════
   الرؤيا من الصفر — ثيم ليل هادئ، جوال أولاً
   تباين عالٍ لكل الأعمار · قراءة سريعة مريحة
   ═══════════════════════════════════════════════ */

:root {
  --bg:        #0a1024;   /* كحلي ليلي عميق */
  --bg-soft:   #121a38;
  --bg-card:   #0f1730;
  --text:      #f3ecdc;   /* كريمي دافئ — تباين عالٍ */
  --text-soft: #d9d2c2;
  --muted:     #9a96a8;
  --gold:      #e3b85e;
  --gold-dim:  rgba(227, 184, 94, 0.35);
  --gold-bg:   rgba(227, 184, 94, 0.06);
  --sky:       #8ec9ff;
  --sky-dim:   rgba(142, 201, 255, 0.28);
  --sky-bg:    rgba(142, 201, 255, 0.055);
  --line:      rgba(243, 236, 220, 0.10);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1.1rem;          /* كبير وواضح لكل الأعمار */
  line-height: 2;             /* تنفّس — المخ يقرأ أسرع */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── شريط التقدم ─── */
#progress {
  position: fixed;
  top: 0;
  right: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(270deg, var(--gold), #f3d999);
  z-index: 99;
  transition: width 0.1s linear;
}

/* ═══════════ Hero — سماء الليل ═══════════ */

.hero {
  position: relative;
  min-height: 96svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding: 48px 24px;
  background:
    radial-gradient(ellipse 120% 70% at 50% -10%, #1a2550 0%, var(--bg) 60%);
}

/* نجوم — طبقتان، بلا صور، خفيفة */
.stars, .stars-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stars::before, .stars-2::before {
  content: '';
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    8vw   12vh 0 0 rgba(255,255,255,.8),  22vw  6vh  0 0 rgba(255,255,255,.5),
    35vw  18vh 0 0 rgba(255,255,255,.9),  48vw  9vh  0 0 rgba(255,255,255,.45),
    61vw  15vh 0 0 rgba(255,255,255,.75), 74vw  5vh  0 0 rgba(255,255,255,.55),
    88vw  13vh 0 0 rgba(255,255,255,.8),  15vw  26vh 0 0 rgba(255,255,255,.5),
    29vw  31vh 0 0 rgba(255,255,255,.65), 55vw  28vh 0 0 rgba(255,255,255,.45),
    69vw  33vh 0 0 rgba(255,255,255,.85), 82vw  24vh 0 0 rgba(255,255,255,.5),
    94vw  30vh 0 0 rgba(255,255,255,.6),  5vw   38vh 0 0 rgba(255,255,255,.55),
    42vw  40vh 0 0 rgba(255,255,255,.7),  90vw  44vh 0 0 rgba(255,255,255,.4);
  animation: twinkle 4.5s ease-in-out infinite alternate;
}
.stars-2::before {
  width: 1px; height: 1px;
  box-shadow:
    12vw  8vh  0 0 rgba(255,255,255,.4),  26vw  20vh 0 0 rgba(255,255,255,.35),
    39vw  4vh  0 0 rgba(255,255,255,.45), 52vw  22vh 0 0 rgba(255,255,255,.3),
    66vw  10vh 0 0 rgba(255,255,255,.4),  79vw  18vh 0 0 rgba(255,255,255,.35),
    93vw  7vh  0 0 rgba(255,255,255,.45), 18vw  35vh 0 0 rgba(255,255,255,.3),
    47vw  33vh 0 0 rgba(255,255,255,.4),  73vw  41vh 0 0 rgba(255,255,255,.3),
    9vw   45vh 0 0 rgba(255,255,255,.35), 60vw  46vh 0 0 rgba(255,255,255,.4);
  animation-duration: 6s;
  animation-delay: 1.2s;
}
@keyframes twinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* هلال */
.moon {
  position: absolute;
  top: 9vh;
  left: 11vw;
  width: 58px; height: 58px;
  border-radius: 50%;
  box-shadow: inset 11px -7px 0 0 #ecd9a8;
  transform: rotate(-22deg);
  opacity: .9;
}

.hero-inner { position: relative; max-width: 560px; }

.hero-kicker {
  color: var(--gold);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  margin-bottom: 22px;
}

.hero-title {
  font-family: 'Amiri', serif;
  font-size: clamp(3.4rem, 16vw, 5.6rem);
  font-weight: 700;
  line-height: 1.25;
}
.hero-title span { color: var(--gold); }

.hero-sub {
  margin: 26px auto 0;
  max-width: 420px;
  color: var(--text-soft);
  font-size: 1.05rem;
}

.hero-btn {
  display: inline-block;
  margin-top: 34px;
  padding: 15px 44px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0cf85, var(--gold));
  color: #1d1604;
  font-weight: 800;
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(227, 184, 94, 0.28);
}
.hero-btn:active { transform: translateY(1px); }

.hero-meta {
  margin-top: 18px;
  color: var(--muted);
  font-size: 0.85rem;
}

.hero-fade {
  position: absolute;
  bottom: 0; right: 0; left: 0;
  height: 110px;
  background: linear-gradient(180deg, transparent, var(--bg));
}

/* ═══════════ المحتوى العام ═══════════ */

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 22px;
}

p + p { margin-top: 0.9em; }

/* ─── العهد ─── */
.promise {
  padding: 64px 0 40px;
  text-align: center;
}
.promise-title {
  font-family: 'Amiri', serif;
  font-size: 1.9rem;
  color: var(--gold);
  margin-bottom: 26px;
}
.promise-lines p {
  font-size: 1.15rem;
  margin-top: 0.55em;
}
.promise-lines strong { color: var(--gold); }
.promise-note {
  margin-top: 30px;
  text-align: right;
  color: var(--text-soft);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px;
  font-size: 1rem;
}
.whisper-ref { color: var(--sky); font-weight: 700; }

/* ─── خط الرحلة والمحطات ─── */
.journey {
  position: relative;
  padding: 30px 46px 10px 0;
}
.journey::before {
  content: '';
  position: absolute;
  right: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg,
    transparent, var(--gold-dim) 4%, var(--gold-dim) 96%, transparent);
}

.station { position: relative; padding-bottom: 72px; }

.station-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.station-num {
  position: absolute;
  right: -46px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px var(--bg);
}
.station-head h2 {
  font-family: 'Amiri', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
}

.station p { color: var(--text-soft); }

.lead {
  margin-top: 1.3em !important;
  font-size: 1.18rem;
  color: var(--text) !important;
}
.lead strong { color: var(--gold); }

.lead-questions {
  font-family: 'Amiri', serif;
  font-size: 1.45rem;
  line-height: 2.1;
  color: var(--gold) !important;
  text-align: center;
  margin-top: 1.2em !important;
}

/* قاعدة مستخلصة */
.rule {
  margin: 1.2em 0 !important;
  padding: 16px 20px;
  background: var(--gold-bg);
  border: 1px solid var(--gold-dim);
  border-right: 3px solid var(--gold);
  border-radius: 12px;
  color: var(--text) !important;
  font-weight: 700;
  font-size: 1.06rem;
}

/* ─── بطاقة الآية ─── */
.ayah {
  margin: 30px 0;
  padding: 28px 22px 20px;
  text-align: center;
  background:
    radial-gradient(ellipse 90% 100% at 50% 0%, rgba(227,184,94,0.10), rgba(227,184,94,0.025) 70%);
  border: 1px solid var(--gold-dim);
  border-radius: 16px;
}
.ayah-text {
  font-family: 'Amiri', serif;
  font-size: 1.5rem;
  line-height: 2.25;
  color: #f8f1de;
  font-weight: 400;
}
.ayah-ref {
  margin-top: 14px;
  color: var(--gold);
  font-size: 0.88rem;
  letter-spacing: 0.06em;
}
.ayah-ref::before, .ayah-ref::after { content: ' ⊹ '; opacity: .6; }

.ayah-major { box-shadow: 0 0 44px rgba(227, 184, 94, 0.07); }
.ayah-major .ayah-text { font-size: 1.6rem; }

/* ─── فقاعة «الذي في بالك الآن» ─── */
.whisper {
  margin: 34px 0 6px;
  padding: 22px 22px 18px;
  background: var(--sky-bg);
  border: 1px solid var(--sky-dim);
  border-radius: 18px 18px 4px 18px;
}
.whisper-tag {
  color: var(--sky);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}
.whisper-q {
  font-size: 1.12rem;
  font-weight: 800;
  color: #dceeff;
  line-height: 1.85;
  margin-bottom: 12px;
}
.whisper-a p {
  color: var(--text-soft);
  font-size: 1.02rem;
}
.whisper-a b { color: var(--sky); font-weight: 700; }

/* ─── خاتمة الجزء ─── */
.cliff {
  margin-top: 26px;
  padding: 40px 26px;
  text-align: center;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 20px;
}
.cliff-kicker {
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.cliff h2 {
  font-family: 'Amiri', serif;
  font-size: 2rem;
  color: var(--gold);
  margin-bottom: 18px;
}
.cliff p { color: var(--text-soft); }
.cliff strong { color: var(--text); }
.cliff-q {
  margin-top: 1.2em !important;
  font-size: 1.12rem;
  color: var(--text) !important;
  font-weight: 700;
}
.cliff-soon {
  margin-top: 1.6em !important;
  color: var(--gold) !important;
  font-weight: 800;
  font-size: 1.05rem;
}

/* ─── خريطة الأجزاء ─── */
.parts { padding: 72px 0 10px; }
.parts-title {
  font-family: 'Amiri', serif;
  font-size: 2rem;
  color: var(--text);
  text-align: center;
  margin-bottom: 10px;
}
.parts-sub {
  text-align: center;
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 420px;
  margin: 0 auto 34px;
}
.parts-list { list-style: none; }

.part {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 18px;
  margin-bottom: 12px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.part-num {
  flex: 0 0 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.part-body { flex: 1; min-width: 0; }
.part-body h3 {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.6;
}
.part-body p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin-top: 2px;
}
.part-status {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.part.current {
  border-color: var(--gold);
  box-shadow: 0 0 30px rgba(227, 184, 94, 0.10);
}
.part.current .part-num {
  background: var(--gold);
  border-color: var(--gold);
  color: #1d1604;
}
.st-now { background: var(--gold-bg); color: var(--gold); border: 1px solid var(--gold-dim); }

.part.writing .part-num { border-color: var(--sky-dim); color: var(--sky); }
.st-writing { background: var(--sky-bg); color: var(--sky); border: 1px solid var(--sky-dim); }

.part.locked { opacity: 0.62; }
.st-soon { background: rgba(154,150,168,0.12); color: var(--muted); border: 1px solid rgba(154,150,168,0.25); }

/* ─── ما وراء الرحلة ─── */
.behind {
  margin-top: 56px;
  padding: 30px 24px;
  border: 1px dashed var(--line);
  border-radius: 16px;
}
.behind h2 {
  font-family: 'Amiri', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: 14px;
}
.behind p { color: var(--text-soft); font-size: 1rem; }

/* ─── Footer ─── */
.footer {
  margin-top: 70px;
  padding: 44px 24px 56px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.footer-title {
  font-family: 'Amiri', serif;
  font-size: 1.4rem;
  color: var(--gold);
}
.footer-line { color: var(--muted); font-size: 0.9rem; margin-top: 6px; }
.footer-next { color: var(--text-soft); font-size: 0.95rem; margin-top: 16px; }

/* ─── ظهور ناعم عند التمرير ───
   الإخفاء فقط عندما يعمل JavaScript (body.js) —
   لو تعطّل لأي سبب تظهر الصفحة كاملة فوراً */
body.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
body.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* احترام من يفضّل تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .stars::before, .stars-2::before { animation: none; }
}

/* ─── شاشات أوسع ─── */
@media (min-width: 700px) {
  body { font-size: 1.13rem; }
  .journey { padding-right: 60px; }
  .station-num { right: -60px; }
  .ayah { padding: 34px 34px 24px; }
  .ayah-text { font-size: 1.65rem; }
  .ayah-major .ayah-text { font-size: 1.8rem; }
}