/* =========================================================
   Alpha 20 — تقليل المسافات بين الأقسام (عشان تكون متتالية بدون فجوات)
   هذا الملف لازم يكون آخر ملف CSS في index.html عشان يغلب اللي قبله
   ✏️ تبيها أضيق؟ صغّر الأرقام. أوسع؟ كبّرها.
   ========================================================= */

:root {
  --gap-section: clamp(48px, 6vw, 88px);   /* المسافة فوق وتحت كل قسم */
}

/* الهيرو: كان شاشتين (200vh)، صار شاشة ونص
   (العنوان يصغر بنفس الحركة بس أسرع، وتوصل لـ"من نحن" أبكر) */
#hero {
  height: 150vh;
}

/* قسم بداية تدرّج الألوان: فاضي، فما نبيه ياخذ مساحة */
#color-transition {
  height: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
}

/* من نحن: بطول محتواه بس بدل ما ياخذ شاشة كاملة */
#about.ab-about {
  min-height: 0;
  padding-block: var(--gap-section);
}

/* الخدمات */
#services {
  padding-block: var(--gap-section);
}

/* الأعمال */
#works {
  padding-block: var(--gap-section);
}

/* العبارة الكبيرة: مسافة بسيطة بدل شاشة كاملة */
#statement {
  min-height: 0;
  padding-block: clamp(56px, 8vw, 120px);
}

/* تواصل معنا */
#contact.cf-contact {
  padding-block: var(--gap-section) clamp(40px, 5vw, 64px);
}

/* ---------- الجوال ----------
   الشاشة صغيرة، فتثبيت العنوان وتصغيره يطلع كأنه فراغ أسود طويل.
   بالجوال: الهيرو بطول ثلثين الشاشة بس، والعنوان أكبر ويصغر ويختفي وأنت تنزل، و"من نحن" يجي بعده على طول */
@media (max-width: 768px) {
  #hero {
    height: auto;
  }
  #hero .hero__pin {
    position: relative;
    height: 68vh;
    height: 68svh;
  }
  #hero .hero__title {
    font-size: clamp(3rem, 15vw, 5rem);
  }
  /* يصغر ويختفي مع النزول (القيم تجي من heroPin.js) */
  #hero .hero__title.is-visible {
    opacity: var(--hero-fade, 1);
    transition: opacity .9s cubic-bezier(0.16, 1, 0.3, 1), transform .5s cubic-bezier(0.16, 1, 0.3, 1);
  }
  #about.ab-about {
    padding-top: 24px;
  }
}

/* =========================================================
   "من نحن" تطلع بدري: تبدأ تغطي المساحة الفاضية والعنوان لسه يصغر فوق
   (الكمبيوتر بس)
   ========================================================= */
@media (min-width: 769px) {
  #about.ab-about {
    position: relative;
    z-index: 3;
    margin-top: -45vh;      /* كم تطلع بدري: كبّر الرقم = تطلع أبكر */
    /* أعلى القسم يذوب بنعومة فوق الهيرو */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 56px);
  }
}
/* الفوتر: الوصف يطلع سطرين (تبي علامتك تفرق، خلها عند أهلها / خلها للذيب) */
.cf-footer__desc {
  white-space: pre-line;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.8;
}
/* =========================================================
   وضوح عناوين "خدماتنا" و"أعمالنا" (والعناوين الكبيرة بنفس الخط)
   رسم أنعم وأحد للحروف، بدون تعريض مزيّف
   ========================================================= */
.services__heading,
.works__heading,
.statement__text,
.hero__title,
#about .ab-title,
#contact .cf-contact__title {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  font-synthesis: none;          /* يمنع المتصفح يعرّض الخط بنفسه فتتشوه الحروف */
  font-weight: normal;
}