/* ============================================================================
   هيرو المنصة — أرض فاضية تُبنى حتى تُنار
   ----------------------------------------------------------------------------
   القرار التقني: 3D بتحويلات CSS لا WebGL.
   السبب: (١) المشهد المطلوب رصّ طوابق وإنارة — تحويلات CSS تؤديه بدقة أعلى
   وبلا 360KB مكتبة · (٢) يعمل على كل جوال بلا اعتماد على توفّر WebGL ·
   (٣) قابل للتحقق البصري في بيئتنا (WebGL معطّل بمتصفح الخادم) — وقاعدتنا
   ألّا نسلّم ما لم نره يعمل.
   المبنى تخيّلي بالكامل — صفر أصول عميل (أمر أحمد: لا تستخدم البرجين).
   ========================================================================== */

/* المسرح = خلفية الصفحة كلها، لا بطاقة جانبية (أمر أحمد 53).
   يذوب من سماء المشهد إلى لون اللوحة --bg بتدرّج، فتبدو الصفحة قطعة واحدة. */
.stage{
  position:absolute; inset:0; overflow:hidden; z-index:0;
  background:linear-gradient(180deg,#E7E2D4 0%,#F0EBE0 38%,#F7F4EC 68%,var(--bg) 100%);
  transition:background 900ms var(--ease);
  --p:0;
}
.stage[data-night="1"]{
  background:linear-gradient(180deg,#0F131B 0%,#1A1F2A 34%,#3A3229 72%,var(--bg) 100%);
}
/* قناع الذوبان: أسفل المشهد وحوافّه تتلاشى في لون الصفحة */
.stage::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 62%,
    color-mix(in srgb,var(--bg) 48%,transparent) 82%, var(--bg) 100%);
  transition:background 900ms var(--ease);
}

/* ---------- فضاء ثلاثي الأبعاد: أصلٌ واحد على مستوى الأرض ----------
   كل العناصر تُوضع left:50% bottom:0 نسبةً لهذا الخط، فلا تتباعد المراجع. */
.scene{ position:absolute; inset:0; perspective:1000px; perspective-origin:50% 34%; }
.world{
  position:absolute; left:0; right:0; bottom:30%; height:0;
  transform-style:preserve-3d; transform-origin:50% 0;
  transform:rotateX(var(--tilt,24deg));
  transition:transform 420ms var(--ease);
}
.turn{ position:absolute; left:0; right:0; bottom:0; height:0;
  transform-style:preserve-3d; transform-origin:50% 0;
  transform:rotateY(var(--turn,-28deg));
  transition:transform 420ms var(--ease); }
.plane{ position:absolute; left:50%; bottom:0; transform-origin:50% 50%; }

/* ---------- الأرض ----------
   طبقة مستقلة خلف الهندسة، لا داخلها.
   السبب: CSS 3D لا يملك z-buffer — يرتّب العناصر كاملةً بعمق مركزها، فمستوٍ
   كبير يتقاطع مع المباني يُرسم فوقها كلها. فصلُه في سياق ثلاثي أبعاد مستقل
   يجعل ترتيبه بترتيب DOM: الأرض أولاً فالمباني فوقها — وتنتهي المشكلة. */
.groundwrap{ position:absolute; inset:0; overflow:hidden; }
.ground{
  position:absolute; top:70%; bottom:-18%; left:-40%; right:-40%;
  transform-origin:50% 0; transform:perspective(760px) rotateX(62deg);
  background:
    repeating-linear-gradient(90deg,rgba(20,20,19,.10) 0 1px,transparent 1px 56px),
    repeating-linear-gradient(0deg,rgba(20,20,19,.10) 0 1px,transparent 1px 56px),
    linear-gradient(180deg,#E4DDCB 0%,#EFE9DB 42%,#DFD7C4 100%);
  transition:filter var(--dur-slow) var(--ease);
}
.ground::after{                       /* تلاشي عند الأفق وفي الأسفل */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(244,240,231,.98) 0%,rgba(244,240,231,0) 30%,rgba(244,240,231,0) 62%,rgba(250,249,245,.92) 100%);
}
.stage[data-night="1"] .ground{ filter:brightness(.30) saturate(.6); }

/* ظلّ التلامس — يجعل المبنى واقفاً لا طائراً */
.shadow{
  position:absolute; left:34%; top:69.5%; width:270px; height:64px; opacity:0;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(closest-side,rgba(52,44,34,.55),rgba(52,44,34,0) 72%);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.stage[data-night="1"] .shadow{
  background:radial-gradient(closest-side,rgba(0,0,0,.62),rgba(0,0,0,0) 72%);
}
.stage[data-night="1"] .ground::after{
  background:linear-gradient(180deg,rgba(26,31,42,.98) 0%,rgba(26,31,42,0) 30%,rgba(26,31,42,0) 58%,rgba(58,50,41,.92) 100%);
}

.plot{
  width:290px; height:200px; opacity:0;
  transform:translateX(-50%) translateY(50%) rotateX(90deg);
  border:2px dashed var(--accent); border-radius:3px;
  transition:opacity var(--dur-slow) var(--ease);
}

/* ---------- أوجه الصناديق ---------- */
.bld,.crane{ position:absolute; left:34%; bottom:0; transform-style:preserve-3d; }
.boxg{ position:absolute; left:0; bottom:0; transform-style:preserve-3d; }
.face{
  position:absolute; left:50%; bottom:0; transform-origin:50% 100%; overflow:hidden;
  background:linear-gradient(180deg,#F8F4EA,#E6DFCE);
  border:1px solid rgba(20,20,19,.13);
}
.face.side{ background:linear-gradient(180deg,#E4DCCA,#D2C9B2); }
.face.roof{
  transform-origin:50% 50%;
  background:linear-gradient(160deg,#F0EADB,#D9D1BD); border-color:rgba(20,20,19,.16);
}
.stage[data-night="1"] .face{ background:linear-gradient(180deg,#2B2F39,#1F232B); border-color:rgba(255,255,255,.09); }
.stage[data-night="1"] .face.side{ background:linear-gradient(180deg,#232732,#191C23); }
.stage[data-night="1"] .face.roof{ background:linear-gradient(160deg,#262A33,#1B1E25); }

/* الشبابيك: نمط متكرر — طابق كل 18px */
.win{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(20,20,19,.13) 6px 15px, transparent 15px 18px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(20,20,19,.07) 5px 13px, transparent 13px 18px);
}
/* طبقة الإنارة — تظهر مع الليل */
.win::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(255,196,120,.92) 6px 15px, transparent 15px 18px),
    repeating-linear-gradient(90deg, transparent 0 5px, rgba(0,0,0,.55) 5px 13px, transparent 13px 18px);
  transition:opacity 900ms var(--ease);
}
.stage[data-night="1"] .win::after{ opacity:1; }
.stage[data-night="1"] .face.front,.stage[data-night="1"] .face.side{
  box-shadow:0 0 34px rgba(255,186,110,.20);
}

/* الزعانف الرأسية — لغة معمارية سعودية معاصرة (تظليل الواجهة) */
.fins{
  position:absolute; inset:0; opacity:0;
  background:repeating-linear-gradient(90deg, rgba(20,20,19,.16) 0 2px, transparent 2px 13px);
  transition:opacity var(--dur-slow) var(--ease);
}

/* التاج */
.crown{
  position:absolute; height:10px;
  background:var(--accent); opacity:0; border-radius:2px;
  transition:opacity var(--dur-slow) var(--ease);
  box-shadow:0 0 0 rgba(217,119,87,0);
}
.stage[data-night="1"] .crown{ box-shadow:0 0 22px rgba(217,119,87,.75); }

/* ---------- الرافعة — تظهر أثناء البناء وتختفي عند الاكتمال ---------- */
.crane{ opacity:0; transition:opacity 500ms var(--ease); }
.crane .mast{ position:absolute; transform:translateX(-50%); bottom:0; width:3px; background:#B9532F; border-radius:1px; }
.crane .jib{ position:absolute; transform:translateX(-50%); height:2px; background:rgba(185,83,47,.72); border-radius:1px; }
.crane .hook{ position:absolute; transform:translateX(-50%); width:1px; background:rgba(20,20,19,.45); }

/* ---------- وسم المرحلة ---------- */
.stagelbl{
  position:absolute; inset-block-end:var(--s-6); inset-inline-start:var(--s-5); z-index:5;
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--t-xs); font-weight:var(--w-bold);
  background:rgba(20,20,19,.74); color:#fff; padding:var(--s-1) var(--s-3);
  border-radius:var(--r-full); backdrop-filter:blur(6px);
}
.stagelbl::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); }

/* شريط التقدّم أسفل المسرح */
.progress{
  position:absolute; inset-block-end:0; inset-inline:0; height:2px;
  background:transparent; z-index:5;
}
.progress i{ display:block; height:100%; width:calc(var(--p) * 100%); background:var(--accent); }

.replay{
  position:absolute; inset-block-end:var(--s-6); inset-inline-end:var(--s-5); z-index:5;
  font:inherit; font-size:var(--t-xs); cursor:pointer;
  background:rgba(255,255,255,.86); color:var(--ink);
  border:1px solid var(--border); border-radius:var(--r-full);
  padding:var(--s-1) var(--s-3);
}
.stage[data-night="1"] .replay{ background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.22); }

@media (prefers-reduced-motion:reduce){
  .world,.crown,.fins,.win::after,.crane{ transition:none; }
}


/* ---------- قراءة النص فوق المشهد ----------
   المشهد يتحوّل من نهار فاتح إلى ليل داكن، فلون النص يتبع الحالة وإلا اختفى.
   والسّتار خلف الكلام يضمن التباين في كل لحظة من الانتقال. */
.hcopy::before{
  content:""; position:absolute; inset:-40% -10% -40% -60%;
  z-index:-1; pointer-events:none;
  background:radial-gradient(58% 46% at 78% 50%,
    color-mix(in srgb, var(--bg) 74%, transparent) 0%,
    color-mix(in srgb, var(--bg) 34%, transparent) 46%, transparent 72%);
  transition:background 900ms var(--ease);
}
#stage[data-night="1"] ~ .hcopy{ color:#F6F3EC }
#stage[data-night="1"] ~ .hcopy h1{ color:#FBF8F1 }
#stage[data-night="1"] ~ .hcopy .sub{ color:#DCD6CB }
#stage[data-night="1"] ~ .hcopy .eyebrow{ color:#CFC8BC; border-color:rgba(255,255,255,.26) }
#stage[data-night="1"] ~ .hcopy .btn.ghost{ color:#F6F3EC; border-color:rgba(255,255,255,.34) }
#stage[data-night="1"] ~ .hcopy .btn.ghost:hover{ background:rgba(255,255,255,.10) }
#stage[data-night="1"] ~ .hcopy::before{
  background:radial-gradient(58% 46% at 78% 50%,
    rgba(8,11,17,.80) 0%, rgba(8,11,17,.40) 46%, transparent 72%);
}

/* ---------- الجوال: المشهد ينزل تحت الكلام لا خلفه ----------
   على الشاشة الضيقة يصير الكلام ملء العرض، فالمبنى خلفه يقتل قراءته.
   الحل: المشهد يهبط لأسفل الشاشة ويصغر، والستار يصير عمودياً من الأعلى. */
@media (max-width:760px){
  .hero{ align-items:flex-start }
  .hcopy{ padding-top:var(--s-7) }
  .world{ bottom:12%; transform:rotateX(20deg) scale(.72) }
  .bld,.crane{ left:50% }
  .shadow{ left:50%; top:84%; width:200px; height:46px }
  .ground{ top:86%; bottom:-24% }
  .hcopy::before{
    inset:-30% -20% -10% -20%;
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--bg) 88%, transparent) 0%,
      color-mix(in srgb,var(--bg) 72%, transparent) 62%, transparent 100%);
  }
  #stage[data-night="1"] ~ .hcopy::before{
    background:linear-gradient(180deg,
      rgba(8,11,17,.88) 0%, rgba(8,11,17,.66) 62%, transparent 100%);
  }
  .stagelbl,.replay{ inset-block-end:var(--s-4) }
}