/* ==========================================================================
   صفحة "عن واو" — مبنية على الرسمة الأساسية في ملف الهوية
   ---------------------------------------------------------------------------
   لغة الهوية البصرية: خط واحد (line art) بلون واحد على أرضية محايدة،
   وفيها إيدين وعناصر طبيعة متشابكة بتطلع من الأرض لفوق زي حديقة.
   العناصر الملوّنة في الملف هي نسخة الاستيكرات — مش لغة الصفحات.

   الحركة الوحيدة: المشهد بيتكشف من تحت لفوق كأنه بينمو،
   وبعدين بياخد نَفَس هادي — "rhythm of nature".
   ========================================================================== */

:root {
  --waw-cream:  #f8f5ec;
  --waw-cream2: #f2ece0;
  --waw-green:  #0b9d4a;
  --waw-orange: #eb4e1b;
  --waw-yellow: #eec626;
  --waw-blue:   #3f6bb4;
  --waw-ink:    #1f2a24;

  --breath: 6s;
}

/* ==========================================================================
   المشهد
   ========================================================================== */
.scene {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.scene-art {
  display: block;
  width: 100%;
  height: auto;
  /* الوضع الافتراضي: ظاهر بالكامل. الحركة بتتفعّل بس لو الجافاسكريبت اشتغل. */
  transform-origin: 50% 100%;
}

/* خط الأرض اللي المشهد طالع منه */
.scene::after {
  content: "";
  position: absolute;
  inset: auto 20px 0 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,157,74,.28) 22%, rgba(11,157,74,.28) 78%, transparent);
}

/* ---------- النمو من تحت لفوق ---------- */
.scene.js-grow .scene-art {
  clip-path: inset(100% 0 0 0);
}
.scene.js-grow.is-grown .scene-art {
  clip-path: inset(0 0 0 0);
  transition: clip-path 2.6s cubic-bezier(.16,.84,.36,1);
}

/* النَفَس بيبدأ بعد ما المشهد يخلص نمو */
.scene.is-grown .scene-art {
  animation: scene-breathe var(--breath) ease-in-out 2.6s infinite;
}
@keyframes scene-breathe {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.014); }
}

/* ---------- كلمة النَفَس ---------- */
.scene-caption {
  text-align: center;
  margin: 18px 0 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: 6px;
  color: var(--waw-green);
  animation: scene-caption var(--breath) ease-in-out infinite;
}
@keyframes scene-caption {
  0%, 100% { opacity: .28; }
  46%      { opacity: .9; }
}

/* ==========================================================================
   القصة
   ========================================================================== */
.story {
  max-width: 680px;
  margin: 0 auto;
  padding: 64px 24px 0;
  text-align: center;
}

.story-beat {
  margin: 0 0 48px;
  transition: opacity .8s ease, transform .8s ease;
}
.story-beat:last-child { margin-bottom: 10px; }

/* الإخفاء المبدئي بيتفعّل بس لما الجافاسكريبت يتحكّم في الظهور —
   من غيره القصة ظاهرة عادي. */
.story.js-reveal .story-beat { opacity: 0; transform: translateY(18px); }
.story.js-reveal .story-beat.is-in { opacity: 1; transform: none; }

.beat-mark {
  display: block;
  width: 34px;
  height: 1px;
  margin: 0 auto 18px;
  background: var(--accent, var(--waw-green));
  opacity: .5;
}

.story-beat p {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.14rem);
  line-height: 2.1;
  color: #4a4638;
}
.story-beat:first-child p {
  font-size: clamp(1.22rem, 2.5vw, 1.66rem);
  font-weight: 800;
  line-height: 1.72;
  color: var(--waw-ink);
}
.story-beat:first-child .beat-mark { display: none; }

/* ==========================================================================
   الأعمدة الثلاثة — بخط الهوية، من غير أيقونات ملوّنة
   ========================================================================== */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
  border-top: 1px solid #e6ddc9;
  border-bottom: 1px solid #e6ddc9;
}
.pillar {
  padding: 30px 16px;
  text-align: center;
  position: relative;
}
.pillar + .pillar::before {
  content: "";
  position: absolute;
  inset: 22% auto 22% 0;
  width: 1px;
  background: #e6ddc9;
}
.pillar strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 900;
  color: var(--waw-ink);
}
.pillar span {
  display: block;
  margin-top: 8px;
  font-size: .72rem;
  letter-spacing: 3px;
  color: var(--waw-green);
  font-weight: 800;
}

/* ==========================================================================
   شاشات أصغر
   ========================================================================== */
@media (max-width: 640px) {
  .story { padding-top: 44px; }
  .story-beat { margin-bottom: 38px; }
  .pillars { grid-template-columns: 1fr; }
  .pillar + .pillar::before { inset: 0 12% auto 12%; width: auto; height: 1px; }
}

/* ==========================================================================
   احترام تقليل الحركة
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .scene-art, .scene-caption { animation: none !important; }
  .scene.js-grow .scene-art { clip-path: none; transition: none; }
  .story.js-reveal .story-beat { opacity: 1; transform: none; }
}