/* Animation d'entrée pour les cartes de services */
.service-card {
  opacity: 0;
  transform: translateY(40px);      /* نزول أكبر قليلاً إذا أحببت */
  transition:
    opacity 1s ease-out,            /* كانت 0.6s */
    transform 1s ease-out;          /* كانت 0.6s */
}


/* Quand la carte est visible à l'écran */
.service-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Optionnel: léger décalage entre les cartes */
.services-grid.animate-stagger .service-card {
  transition-delay: 0s;
}
.services-grid.animate-stagger .service-card:nth-child(1) { transition-delay: 0.0s; }
.services-grid.animate-stagger .service-card:nth-child(2) { transition-delay: 0.2s; } /* كانت 0.1s */
.services-grid.animate-stagger .service-card:nth-child(3) { transition-delay: 0.4s; }
.services-grid.animate-stagger .service-card:nth-child(4) { transition-delay: 0.6s; }
.services-grid.animate-stagger .service-card:nth-child(5) { transition-delay: 0.8s; }
.services-grid.animate-stagger .service-card:nth-child(6) { transition-delay: 1.0s; }

/* ====== ANIMATION SECTION ABOUT ====== */

/* حالة البداية: النص والصورة مخفيين قليلاً */
.about-text,
.about-img {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 1s ease-out,
    transform 1s ease-out;
}

/* عندما يدخل قسم about في الشاشة */
.about.in-view .about-text,
.about.in-view .about-img {
  opacity: 1;
  transform: translateY(0);
}

/* أنيميشن متدرّج داخل about-text (عنوان، فقرات، زر) */
.about-text h2,
.about-text p,
.about-text .btn {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
}

/* عند in-view نعطيهم ترتيب ظهور */
.about.in-view .about-text h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.0s;
}

.about.in-view .about-text p:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

.about.in-view .about-text p:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* إذا عندك فقرة ثالثة يمكن تضيف nth-of-type(3) */
.about.in-view .about-text p:nth-of-type(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}

/* الزر في الأخير */
.about.in-view .about-text .btn {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

/* الصورة تظهر مع تأخير خفيف */
.about.in-view .about-img {
  transition-delay: 0.3s;
}

/* ===== ANIMATION HERO ABOUT ===== */

.page-hero {
  overflow: hidden; /* حتى لا يظهر أي overflow أثناء الحركة */
}

/* حالة بداية للعنوان والفقرة */
.page-hero h1,
.page-hero p {
  opacity: 0;
  transform: translateY(25px);
}

/* تشغيل الأنيمايشن عند تحميل الصفحة */
.page-hero.animate-hero h1 {
  animation: heroFadeUp 1.2s ease-out forwards;
}

.page-hero.animate-hero p {
  animation: heroFadeUp 1.2s ease-out forwards;
  animation-delay: 0.2s;
}

/* keyframes */
@keyframes heroFadeUp {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ANIMATION DES SECTIONS DANS about.html ===== */

.page-section {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
}

/* عندما تكون section مرئية */
.page-section.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* محتوى داخلي متدرّج قليلاً */
.page-section.in-view .section-title {
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
  opacity: 1;
  transform: translateY(0);
}

.page-section .section-title {
  opacity: 0;
  transform: translateY(15px);
}

.page-section p,
.page-section .highlight-box {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}

/* أول فقرة */
.page-section.in-view p:nth-of-type(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.15s;
}

/* ثاني فقرة */
.page-section.in-view p:nth-of-type(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
/* ثاني فقرة */
.page-section.in-view p:nth-of-type(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

/* highlight-box في الأخير */
.page-section.in-view .highlight-box {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.45s;
}


/* ===== ANIMATION HERO SERVICES ===== */

.page-hero {
  overflow: hidden;
}

/* حالة بداية للعنوان والفقرة */
.page-hero h1,
.page-hero p {
  opacity: 0;
  transform: translateY(25px);
}

/* تشغيل الأنيمايشن عندما نضيف animate-hero */
.page-hero.animate-hero h1 {
  animation: heroFadeUpServices 1.2s ease-out forwards;
}

.page-hero.animate-hero p {
  animation: heroFadeUpServices 1.2s ease-out forwards;
  animation-delay: 0.2s;
}

@keyframes heroFadeUpServices {
  0% {
    opacity: 0;
    transform: translateY(25px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== ANIMATION DES BLOCS DE SERVICES (services.html) ===== */

.service-block {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.9s ease-out,
    transform 0.9s ease-out;
}

/* عندما تكون الـ service-block مرئية */
.service-block.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* خيار إضافي: stagger بسيط */
.service-block.in-view:nth-of-type(1) { transition-delay: 0.0s; }
.service-block.in-view:nth-of-type(2) { transition-delay: 0.1s; }
.service-block.in-view:nth-of-type(3) { transition-delay: 0.2s; }
.service-block.in-view:nth-of-type(4) { transition-delay: 0.3s; }
.service-block.in-view:nth-of-type(5) { transition-delay: 0.4s; }
.service-block.in-view:nth-of-type(6) { transition-delay: 0.5s; }