/* =====================================================================
   Hero — من المخطط إلى المبنى (Double H Academy)
   كل الكلاسات بتبلش بـ hb- حتى ما تتعارض مع باقي الأقسام
   ===================================================================== */

:root {
  --hb-nav: 0px;                        /* النافبار عائم وشفاف فوق الهيرو */
  --hb-stage-h: calc(100svh - var(--hb-nav));
  --hb-scroll: 260vh;                   /* طول القصة بالسكرول */
  --hb-fly: 120vh;                      /* طول مشهد الدخول من الباب */
  --hb-blue: #0e2b2b;                   /* لون ورقة المخطط */
  --hb-teal-700: #143939;               /* brand-primary */
  --hb-teal-100: #d9ebeb;               /* primary-100 */
  --hb-gold: #d9a93f;                   /* DhCoins */
  --hb-gold-light: #f2d27f;
}

/* sticky ما بيشتغل جوّا overflow:hidden — clip بيعطي نفس النتيجة بدون ما يكسره */
.hb-clip-x { overflow-x: clip; }

/* ---------- المسار والمسرح ---------- */
.hb-track {
  position: relative;
  background: var(--hb-blue);
  color: #fff;
}
.hb-track.hb-live { height: calc(var(--hb-stage-h) + var(--hb-scroll) + var(--hb-fly)); }

.hb-stage {
  position: relative;
  z-index: 30;
  height: var(--hb-stage-h);
  min-height: 560px;
  overflow: hidden;
  pointer-events: none;
  /* خلفية احتياطية (قبل ما يجهز WebGL أو إذا ما انوجد) */
  background-color: var(--hb-blue);
  background-image:
    linear-gradient(rgba(217, 235, 235, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 235, 235, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(217, 235, 235, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 235, 235, 0.03) 1px, transparent 1px);
  background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px;
}
.hb-live .hb-stage {
  position: sticky;
  top: var(--hb-nav);
  background: none;
}
.hb-inner {
  position: relative;
  height: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 2rem;
}
.hb-stage a,
.hb-stage button { pointer-events: auto; }

/* ---------- الكانفس ---------- */
.hb-canvas {
  position: fixed;
  z-index: 20;
  top: var(--hb-nav);
  left: 0;
  width: 100%;
  height: var(--hb-stage-h);
  min-height: 560px;
  display: none;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.hb-has-gl ~ .hb-canvas,
.hb-has-gl .hb-canvas { display: block; }
.hb-ready ~ .hb-canvas,
.hb-ready .hb-canvas { opacity: 1; }
.hb-canvas.is-hidden { visibility: hidden; }
/* وضع ثابت (تقليل الحركة): الكانفس جوّا المسرح */
.hb-static .hb-canvas {
  position: absolute;
  inset: 0;
  top: 0;
  height: 100%;
  z-index: -1;
}

.hb-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* إشارة السكرول */
.hb-hint {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: rgba(217, 235, 235, 0.75);
  white-space: nowrap;
}
.hb-live .hb-hint { display: flex; }
.hb-hint__mouse {
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.hb-hint__mouse span {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  animation: hb-wheel 1.8s ease-in-out infinite;
}

/* الضو الأبيض بآخر الدخول — بيوصل بلون قسم الدورات */
.hb-flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

@keyframes hb-wheel {
  0% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* ---------- موبايل/تابلت: المشهد فوق والنص تحت ---------- */
@media (max-width: 899px) {
  .hb-inner { padding-inline: 1.25rem; }
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion: reduce) {
  .hb-canvas { transition: none; }
  .hb-hint__mouse span { animation: none; }
}