/* =====================================================================
 * BeCloud — أنيميشن مخصص للموقع (الهيدر + الإنترو).
 * ملف مستقل عن animate.css/WOW: خاص بعناصر "فوق الطية" التي تعمل
 * عند تحميل الصفحة (لا عند التمرير).
 * ===================================================================== */

/* ---------- Keyframes ---------- */
@keyframes bcFadeInDown {
  from { opacity: 0; transform: translate3d(0, -26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes bcSoftPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}

/* نبضة أخف جدًا للصناديق الكبيرة */
@keyframes bcSoftPulseSm {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

/* حارس ضد ظهور سكرول أفقي بسبب حركة العناصر القريبة من الحافة */
html { overflow-x: hidden; }
.bc-hero { overflow: hidden; }

/* =====================================================================
 * 1) الهيدر
 * ===================================================================== */

/* اللوجو ينزل من فوق عند التحميل */
.header .site-logo {
  animation: bcFadeInDown 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* عناصر المنيو تظهر عنصر ورا عنصر */
#navMenu > li {
  opacity: 0;
  animation: bcFadeInDown 0.5s ease both;
}
#navMenu > li:nth-child(1)  { animation-delay: 0.30s; }
#navMenu > li:nth-child(2)  { animation-delay: 0.40s; }
#navMenu > li:nth-child(3)  { animation-delay: 0.50s; }
#navMenu > li:nth-child(4)  { animation-delay: 0.60s; }
#navMenu > li:nth-child(5)  { animation-delay: 0.70s; }
#navMenu > li:nth-child(6)  { animation-delay: 0.80s; }
#navMenu > li:nth-child(7)  { animation-delay: 0.90s; }
#navMenu > li:nth-child(8)  { animation-delay: 1.00s; }
#navMenu > li:nth-child(9)  { animation-delay: 1.10s; }
#navMenu > li:nth-child(10) { animation-delay: 1.20s; }

/* زرار "احجز الآن" — نبض خفيف مستمر */
.bc-book-btn {
  animation: bcSoftPulse 2.2s ease-in-out 1s infinite;
  transform-origin: center center;
  will-change: transform;
}

/* =====================================================================
 * 2) الإنترو (السلايدر)
 * ===================================================================== */

/* نص السلايد النشط: عنوان ثم وصف ثم الأزرار — fade in down ورا بعض.
 * الربط بـ .swiper-slide-active يجعل الحركة تتكرر مع كل تغيير سلايد. */
.bc-hero-slide.swiper-slide-active .bc-hero-title {
  animation: bcFadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.20s both;
}
.bc-hero-slide.swiper-slide-active .bc-hero-desc {
  animation: bcFadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.bc-hero-slide.swiper-slide-active .bc-hero-actions {
  animation: bcFadeInDown 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.70s both;
}

/* زراري الإنترو — نبض خفيف مستمر */
.bc-hero .bc-btn--accent,
.bc-hero .bc-btn--outline-white {
  animation: bcSoftPulse 2.4s ease-in-out 1.2s infinite;
  transform-origin: center center;
  will-change: transform;
}

/* =====================================================================
 * 3) السيرش (تحت الإنترو) — إزالة الشدو + نبض خفيف على زرار البحث
 * ===================================================================== */
.btn-search {
  box-shadow: none !important;
  animation: bcSoftPulse 2.4s ease-in-out 1.2s infinite;
  transform-origin: center center;
  will-change: transform;
}
.btn-search:hover {
  box-shadow: none !important;
  background: #F4B400 !important;   /* جولد بدل اللبني */
  color: #0B3C5D !important;        /* خط كحلي غامق للوضوح على الأصفر */
}

/* صندوق السيرش: إزالة الشدو + نبضة خفيفة جدًا */
.search-container {
  box-shadow: none !important;
  animation: bcSoftPulseSm 3s ease-in-out 1s infinite;
  transform-origin: center center;
  will-change: transform;
}

/* إزالة أي شادو على الأزرار وقت الهوفر */
.btn:hover,
.btn-primary:hover,
.btn-book:hover,
.btn-white:hover,
.btn-outline-white:hover,
.bc-btn:hover,
.hz-btn:hover,
.bc-book-btn:hover {
  box-shadow: none !important;
}

/* =====================================================================
 * 4) سكاشن الصفحة الرئيسية — Scroll reveal
 *    الإخفاء المسبق يعمل فقط عند تفعيل JS (html.bc-js) لتفادي الوميض.
 * ===================================================================== */
.bc-js #destinations .destination-card,
.bc-js #services .destination-card,
.bc-js #packages .bc-pkg-card,
.bc-js #why-us .bc-why-card,
.bc-js .section-header h2,
.bc-js .bc-section-head h2,
.bc-js .bc-cta-title,
.bc-js .footer .social-links .social-link,
.bc-js .footer .footer-links li,
.bc-js .footer-payment .icons img,
.bc-js .services-grid .service-card,
.bc-js .ft-grid .ft-card,
.bc-js .offers-list .offer-card,
.bc-js .tp-grid .tp-card,
.bc-js .ci-grid .ci-card,
.bc-js .cruz-mini-card,
.bc-js .so-timeline .timeline-item,
.bc-js .srv-contact-item,
.bc-js .sh-content-col > *,
.bc-js .so-content-col > *,
.bc-js .cruz-content-col > *,
.bc-js .srv-grid > *,
.bc-js .srv-features-grid > *,
.bc-js .sh-price-card, .bc-js .sh-quick-card,
.bc-js .so-price-card, .bc-js .so-quick-card,
.bc-js .cruz-price-card, .bc-js .cruz-quick-card,
.bc-js .sh-header-card, .bc-js .so-header-card,
.bc-js .sh-booking-card, .bc-js .so-booking-card, .bc-js .srv-booking-card {
  opacity: 0;
}

/* CTA "خطوتك القادمة" — نبض خفيف على الأزرار */
#cta .bc-cta-actions .bc-btn {
  animation: bcSoftPulse 2.4s ease-in-out 1.2s infinite;
  transform-origin: center center;
  will-change: transform;
}

/* صفحات السنجل — نبض خفيف على أزرار "احجز الآن" و"تواصل معنا" */
.sh-btn-book, .sh-btn-contact,
.cruz-btn-book, .cruz-btn-contact,
.so-btn-book, .so-btn-contact,
.srv-cta-primary, .srv-cta-secondary {
  animation: bcSoftPulse 2.4s ease-in-out 1.2s infinite;
  transform-origin: center center;
  will-change: transform;
}

/* =====================================================================
 * الفوتر — أيقونات السوشيال ميديا تتموّج لأعلى/أسفل باستمرار (موجة)
 * ===================================================================== */
@keyframes bcWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.footer .social-links .social-link {
  animation: bcWave 2.2s ease-in-out infinite;
  will-change: transform;
}
.footer .social-links .social-link:nth-child(1) { animation-delay: 0s;    }
.footer .social-links .social-link:nth-child(2) { animation-delay: 0.18s; }
.footer .social-links .social-link:nth-child(3) { animation-delay: 0.36s; }
.footer .social-links .social-link:nth-child(4) { animation-delay: 0.54s; }
.footer .social-links .social-link:nth-child(5) { animation-delay: 0.72s; }
.footer .social-links .social-link:nth-child(6) { animation-delay: 0.90s; }
.footer .social-links .social-link:nth-child(7) { animation-delay: 1.08s; }
.footer .social-links .social-link:nth-child(8) { animation-delay: 1.26s; }

/* الفوتر — طرق الدفع تطفو باستمرار بشكل ناعم (موجة أخف) */
@keyframes bcFloatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.footer-payment .icons img {
  animation: bcFloatY 2.6s ease-in-out infinite;
  will-change: transform;
}
.footer-payment .icons img:nth-child(1) { animation-delay: 0s;    }
.footer-payment .icons img:nth-child(2) { animation-delay: 0.2s;  }
.footer-payment .icons img:nth-child(3) { animation-delay: 0.4s;  }
.footer-payment .icons img:nth-child(4) { animation-delay: 0.6s;  }
.footer-payment .icons img:nth-child(5) { animation-delay: 0.8s;  }
.footer-payment .icons img:nth-child(6) { animation-delay: 1.0s;  }
.footer-payment .icons img:nth-child(7) { animation-delay: 1.2s;  }
.footer-payment .icons img:nth-child(8) { animation-delay: 1.4s;  }

/* =====================================================================
 * احترام تفضيل تقليل الحركة
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .header .site-logo,
  #navMenu > li,
  .bc-book-btn,
  .bc-hero-slide.swiper-slide-active .bc-hero-title,
  .bc-hero-slide.swiper-slide-active .bc-hero-desc,
  .bc-hero-slide.swiper-slide-active .bc-hero-actions,
  .bc-hero .bc-btn--accent,
  .bc-hero .bc-btn--outline-white,
  .btn-search,
  .search-container,
  #cta .bc-cta-actions .bc-btn,
  .sh-btn-book, .sh-btn-contact,
  .cruz-btn-book, .cruz-btn-contact,
  .so-btn-book, .so-btn-contact,
  .srv-cta-primary, .srv-cta-secondary,
  .footer .social-links .social-link,
  .footer-payment .icons img {
    animation: none !important;
    opacity: 1 !important;
  }
  /* لا تُخفِ عناصر السكاشن عند تفضيل تقليل الحركة */
  .bc-js #destinations .destination-card,
  .bc-js #services .destination-card,
  .bc-js #packages .bc-pkg-card,
  .bc-js #why-us .bc-why-card,
  .bc-js .section-header h2,
  .bc-js .bc-section-head h2,
  .bc-js .bc-cta-title,
  .bc-js .footer .social-links .social-link,
  .bc-js .footer .footer-links li,
  .bc-js .footer-payment .icons img,
  .bc-js .services-grid .service-card,
  .bc-js .ft-grid .ft-card,
  .bc-js .offers-list .offer-card,
  .bc-js .tp-grid .tp-card,
  .bc-js .ci-grid .ci-card,
  .bc-js .cruz-mini-card,
  .bc-js .so-timeline .timeline-item,
  .bc-js .srv-contact-item,
  .bc-js .sh-content-col > *,
  .bc-js .so-content-col > *,
  .bc-js .cruz-content-col > *,
  .bc-js .srv-grid > *,
  .bc-js .srv-features-grid > *,
  .bc-js .sh-price-card, .bc-js .sh-quick-card,
  .bc-js .so-price-card, .bc-js .so-quick-card,
  .bc-js .cruz-price-card, .bc-js .cruz-quick-card,
  .bc-js .sh-header-card, .bc-js .so-header-card,
  .bc-js .sh-booking-card, .bc-js .so-booking-card, .bc-js .srv-booking-card {
    opacity: 1 !important;
  }
}