/* ============================================================
   مهد — الهيرو: خريطة العالم والأقواس الداخلة إلى السعودية
   طبقة الخريطة الثابتة (img) وطبقة الحركة (svg) تتشاركان
   نفس viewBox ونفس التموضع، فتتطابق الإحداثيات تمامًا.
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
  background:
    radial-gradient(1100px 780px at 62% 42%, var(--sand-100), transparent 62%),
    var(--sand-200);
}

/* ---------- طبقات الخريطة ---------- */
.hero-map {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
  pointer-events: none;
  /* التركيب: نضع الرياض في المساحة الحرة المقابلة لعمود النص.
     الإحداثيات فيزيائية (left) لا منطقية — الجغرافيا لا تنعكس مع اتجاه الكتابة. */
  --map-x: -58%;
  --map-y: 1%;
  --map-w: 155%;
}
[dir="ltr"] .hero-map { --map-x: -36%; }

.hero-map > * {
  position: absolute;
  top: var(--map-y);
  left: var(--map-x);
  width: var(--map-w);
  height: auto;
  max-width: none;       /* يتجاوز قاعدة img{max-width:100%} العامة */
  aspect-ratio: 2 / 1;   /* يطابق viewBox 1440×720 فتتطابق طبقتا الخريطة */
}
.hero-map__base { opacity: .92; }

/* حركة لطيفة تتبع المؤشر — تُلغى عند reduced-motion */
.hero-map {
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0);
  transition: transform 900ms var(--ease-out);
  will-change: transform;
}

/* ضباب يفتح مساحة القراءة على جهة النص */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  background: linear-gradient(
    to left,
    var(--sand-200) 24%,
    rgba(239, 231, 215, .58) 46%,
    rgba(239, 231, 215, 0) 70%
  );
}
[dir="ltr"] .hero-scrim { transform: scaleX(-1); }

.hero-vignette {
  position: absolute;
  inset: 0;
  z-index: var(--z-raised);
  pointer-events: none;
  box-shadow: inset 0 0 190px 46px rgba(239, 231, 215, .92);
}

/* ---------- عناصر الـ SVG المتحركة ---------- */
.ksa {
  fill: url(#ksaFill);
  stroke: var(--navy-900);
  stroke-width: 1.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 12px rgba(11, 31, 62, .34));
  opacity: 0;
  animation: heroFade 1.2s var(--ease-out) .45s forwards;
}

.arc {
  fill: none;
  stroke: url(#arcFill);
  stroke-linecap: round;
  stroke-dasharray: var(--len, 2600);
  stroke-dashoffset: var(--len, 2600);
  animation: heroDraw 1.6s var(--ease-swift) var(--delay, 0s) forwards;
}

.hub {
  fill: var(--navy-700);
  opacity: 0;
  animation: heroFade .7s var(--ease-out) var(--delay, 0s) forwards;
}

/* ⑤ الرياض: اللمسة الذهبية الوحيدة في الهيرو */
.riyadh-ring {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.4;
  transform-origin: center;
}
.riyadh-dot { fill: var(--gold-text); }


@keyframes heroFade { to { opacity: 1; } }
@keyframes heroDraw { to { stroke-dashoffset: 0; } }

/* ---------- المحتوى ---------- */
.hero-inner {
  position: relative;
  z-index: 20;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: var(--space-lg);
}
.hero-copy { max-width: 41rem; grid-column: 1; }

.hero h1 {
  /* مقيّد ليبقى سطرين على سطح المكتب — Kufam أعرض من El Messiri */
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1.32;
  margin-bottom: var(--space-xs);
}
.hero h1 .line {
  display: block;
  opacity: 0;
  transform: translateY(22px);
  animation: heroUp .95s var(--ease-out) forwards;
}
.hero h1 .line:nth-child(1) { animation-delay: .3s; }
.hero h1 .line:nth-child(2) { animation-delay: .44s; }

.hero .tag-en { margin-bottom: var(--space-md); }
.hero .lead { margin-bottom: var(--space-lg); }

.hero .eyebrow,
.hero .tag-en,
.hero .lead,
.hero .btn-row,
.hero-chips {
  opacity: 0;
  animation: heroUp .95s var(--ease-out) forwards;
}
.hero .eyebrow  { animation-delay: .18s; }
.hero .tag-en   { animation-delay: .58s; }
.hero .lead     { animation-delay: .70s; }
.hero .btn-row  { animation-delay: .84s; }
.hero-chips     { animation-delay: 1s; }

@keyframes heroUp { to { opacity: 1; transform: none; } }

.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}
.hero-chip {
  display: flex;
  align-items: baseline;
  gap: var(--space-3xs);
  font-size: var(--fs-xs);
  color: var(--text-subtle);
}
.hero-chip b {
  font-family: var(--font-head);
  font-weight: var(--fw-semi);
  font-size: var(--fs-base);
  color: var(--text-strong);
}
.hero-chip + .hero-chip {
  padding-inline-start: var(--space-md);
  border-inline-start: 1px solid var(--border);
}

/* ---------- مؤشّر التمرير ---------- */
.hero-scroll {
  position: absolute;
  bottom: var(--space-md);
  inset-inline-start: var(--gutter);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  letter-spacing: .12em;
  color: var(--text-subtle);
  opacity: 0;
  animation: heroFade 1s var(--ease-out) 1.5s forwards;
}
.hero-scroll::after {
  content: "";
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  animation: scrollCue 2.4s var(--ease-out) infinite;
  transform-origin: top;
}
@keyframes scrollCue {
  0%, 100% { transform: scaleY(.35); opacity: .45; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ---------- الاستجابة ---------- */
@media (max-width: 900px) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--space-xl)) var(--space-2xl); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: none; }
  .hero-map { --map-x: -78%; --map-w: 210%; --map-y: 6%; opacity: .75; }
  [dir="ltr"] .hero-map { --map-x: -78%; }
  .hero-scrim {
    background: linear-gradient(
      to bottom,
      var(--sand-200) 26%,
      rgba(239, 231, 215, .55) 58%,
      rgba(239, 231, 215, 0) 88%
    );
  }
  [dir="ltr"] .hero-scrim { transform: none; }
  .hero-scroll { display: none; }
  .hero-chips { gap: var(--space-sm); }
  .hero-chip + .hero-chip { padding-inline-start: var(--space-sm); }
}

@media (max-width: 520px) {
  .hero-chip + .hero-chip { padding-inline-start: 0; border-inline-start: 0; }
  .hero-chips { flex-direction: column; gap: var(--space-2xs); margin-top: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-map { transform: none !important; }
  .arc { stroke-dashoffset: 0; }
  .ksa, .hub, .hero-scroll,
  .hero h1 .line, .hero .eyebrow, .hero .tag-en, .hero .lead,
  .hero .btn-row, .hero-chips { opacity: 1; transform: none; }
}