/* =========================================================
   Alpha 20 — عبارة "ألفا الذيب اللي يفزع لك" الكبيرة (بين الأعمال ومن نحن)
   بالكمبيوتر: سطر واحد — بالجوال: كل كلمة بسطر
   ========================================================= */

#statement {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(48px, 8vw, 120px) clamp(16px, 4vw, 48px);
  overflow: hidden;
}

.statement__text {
  margin: 0;
  display: flex;
  justify-content: center;
  gap: 0 0.22em;
  white-space: nowrap; /* سطر واحد بالكمبيوتر */
  font-family: 'Free Palestine', 'Tajawal', sans-serif;
  font-weight: normal;
  font-size: clamp(2rem, 11.5vw, 16rem);
  line-height: 1.1;
  color: #F1E2CB; /* بيج */
  text-align: center;
}

.statement__word {
  display: inline-block;
}

/* ---------- الإنجليزي: نفس التصميم بالضبط، بس بخط Poppins وحجم يدخل الشاشة ---------- */
html[lang^="en"] .statement__text {
  direction: ltr;               /* اتجاه الإنجليزي (ما يميل ولا تنعكس الكلمات) */
  font-family: 'Poppins', 'Arial', sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: min(4.3vw, 6rem);  /* ✏️ حجم الكمبيوتر: سطر واحد كامل */
}

/* الجوال: كل كلمة بسطر وبخط كبير */
@media (max-width: 600px) {
  .statement__text {
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-size: 28vw;
    line-height: 1.05;
  }

  /* الإنجليزي بالجوال: نفس العربي (كل جزء بسطر بالنص)، بحجم يخلي أطول سطر يدخل كامل */
  html[lang^="en"] .statement__text {
    font-size: 14.5vw;          /* ✏️ حجم الجوال */
    line-height: 1.05;
  }
}

/* الكلمات تطلع من تحت وحدة ورا الثانية،
   وتكتمل كلها (بلونها الكامل) قبل ما توصل العبارة نص الشاشة */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement__word {
      animation: statement-rise linear both;
      animation-timeline: view();
    }
    .statement__word:nth-child(1) { animation-range: entry 0%  entry 50%; }
    .statement__word:nth-child(2) { animation-range: entry 10% entry 60%; }
    .statement__word:nth-child(3) { animation-range: entry 20% entry 70%; }
    .statement__word:nth-child(4) { animation-range: entry 30% entry 80%; }
    .statement__word:nth-child(5) { animation-range: entry 40% entry 90%; }
  }
}

@keyframes statement-rise {
  from { opacity: 0; transform: translateY(45%) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}