/* ==========================================================================
   الواجهة الرئيسية (Hero) — فيديو الخلفية + العنوان + الخدمات المتحركة
   ========================================================================== */

/* ---------- فيديو الخلفية ---------- */
.hero-video-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(1.04);
  object-fit: cover;
  animation: heroZoom 22s ease-in-out infinite alternate;
}
@keyframes heroZoom {
  from { transform: translate(-50%, -50%) scale(1.04); }
  to   { transform: translate(-50%, -50%) scale(1.14); }
}

/* تعتيم فوق الفيديو عشان الكلام يبان */
#top .elementor-background-overlay {
  background: linear-gradient(270deg, rgba(20, 18, 14, .78) 0%, rgba(20, 18, 14, .45) 55%, rgba(20, 18, 14, .25) 100%) !important;
  opacity: 1 !important;
  z-index: 1;
}
#top .elementor-container { position: relative; z-index: 2; }

/* ---------- العنوان ---------- */
.hero-title {
  color: #fff !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
  text-shadow: 0 4px 22px rgba(0, 0, 0, .35);
  animation: heroTitleIn 1.1s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(28px); letter-spacing: .02em; }
  to   { opacity: 1; transform: none; letter-spacing: 0; }
}

/* ---------- السطر المتحرك (خدمة واحدة كل مرة) ---------- */
.hero-rotator {
  position: relative;
  height: 1.6em;
  margin-top: 14px;
  font-size: 32px;
  font-weight: 800;
  color: #d8c08a;
  overflow: hidden;
}
.hero-rotator-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .7s ease;
  white-space: nowrap;
}
.hero-rotator-item.is-active { opacity: 1; transform: translateY(0); }
.hero-rotator-item.is-leaving { opacity: 0; transform: translateY(-100%); }

/* شريط ذهبي بيتملى مع كل خدمة */
.hero-rotator-bar {
  width: 160px;
  height: 3px;
  margin: 10px 0 22px;
  background: rgba(255, 255, 255, .22);
  border-radius: 3px;
  overflow: hidden;
}
.hero-rotator-bar span {
  display: block;
  height: 100%;
  width: 0;
  background: #d8c08a;
}
.hero-rotator-bar span.run { animation: heroBar var(--hero-interval, 2800ms) linear forwards; }
@keyframes heroBar { from { width: 0; } to { width: 100%; } }

/* ---------- الكبسولات (كل الخدمات) بتظهر واحدة ورا التانية ---------- */
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hero-chips li {
  padding: 8px 16px;
  border: 1px solid rgba(216, 192, 138, .75);
  border-radius: 40px;
  background: rgba(0, 0, 0, .28);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  backdrop-filter: blur(3px);
  opacity: 0;
  transform: translateY(14px);
  animation: chipIn .6s ease forwards;
}
.hero-chips li:nth-child(1) { animation-delay: .6s; }
.hero-chips li:nth-child(2) { animation-delay: .75s; }
.hero-chips li:nth-child(3) { animation-delay: .9s; }
.hero-chips li:nth-child(4) { animation-delay: 1.05s; }
.hero-chips li:nth-child(5) { animation-delay: 1.2s; }
.hero-chips li.is-hot { background: #d8c08a; color: #1f1b14; border-color: #d8c08a; transition: background .4s, color .4s; }
@keyframes chipIn { to { opacity: 1; transform: none; } }

/* ---------- الموبايل ---------- */
@media (max-width: 767px) {
  .hero-rotator { font-size: 22px; }
  .hero-chips li { font-size: 13px; padding: 6px 12px; }
}

/* احترام إعداد تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  .hero-video, .hero-title, .hero-chips li { animation: none; opacity: 1; transform: none; }
}

/* ---------- تلوين الفيديو بنفس درجات التصميم (ذهبي/بني دافي) ----------
   عشان أي فيديو يبان متناسق مع ألوان الموقع زي فيديو الغروب */
.hero-video {
  filter: sepia(.45) saturate(1.25) contrast(1.05) brightness(.95) hue-rotate(-8deg);
}
.hero-video-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(150, 120, 70, .28) 0%, rgba(120, 95, 55, .18) 50%, rgba(60, 45, 25, .35) 100%);
  mix-blend-mode: soft-light;
  pointer-events: none;
}