/* =========================================================
   DABDIB ALJDIDA — Animations
   ========================================================= */

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

/* ── Hero Entrance ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(44px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__headline {
  animation: heroFadeUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero__subheadline {
  animation: heroFadeUp 1s 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero__ctas {
  animation: heroFadeUp 1s 0.44s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.hero__scroll-indicator {
  animation: heroFadeUp 1s 0.80s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* ── Scroll Arrow Bounce ── */
@keyframes arrowBounce {
  0%, 100% { transform: translateY(0) rotate(45deg); }
  50%       { transform: translateY(9px) rotate(45deg); }
}
.scroll-arrow {
  width: 18px;
  height: 18px;
  border-right: 2.5px solid rgba(255, 255, 255, 0.75);
  border-bottom: 2.5px solid rgba(255, 255, 255, 0.75);
  transform: rotate(45deg);
  animation: arrowBounce 1.8s ease-in-out infinite;
}

/* ── Navbar Link Underline ── */
.nav-link {
  position: relative;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: auto;
  width: 0;
  height: 2px;
  background: var(--clr-gold);
  border-radius: 2px;
  transition: width var(--ease-smooth);
}
[dir="rtl"] .nav-link::after {
  left: auto;
  right: 0;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ── Buttons ── */
.btn {
  transition:
    transform var(--ease-smooth),
    box-shadow var(--ease-smooth),
    background-color var(--ease),
    border-color var(--ease),
    color var(--ease);
}
.btn--gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(201, 168, 76, 0.48);
}
html.dark .btn--gold:hover {
  box-shadow: 0 8px 28px rgba(232, 199, 106, 0.38);
}
.btn--outline:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(255, 255, 255, 0.18);
}

/* ── Service Cards ── */
.service-card {
  transition:
    transform var(--ease-smooth),
    box-shadow var(--ease-smooth),
    border-color var(--ease-smooth),
    background-color var(--ease);
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--clr-shadow-gold);
  border-color: var(--clr-gold);
}

/* ── Feature Blocks ── */
.feature-block {
  transition:
    transform var(--ease-smooth),
    background-color var(--ease),
    box-shadow var(--ease-smooth);
}
.feature-block:hover {
  transform: translateY(-6px);
  box-shadow: var(--clr-shadow-md);
}

/* ── Contact Cards ── */
.contact-card {
  transition:
    transform var(--ease-smooth),
    box-shadow var(--ease-smooth),
    background-color var(--ease),
    border-color var(--ease-smooth);
}
.contact-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--clr-shadow-gold);
  border-color: var(--clr-gold);
}

/* ── Stat Number Pulse ── */
@keyframes statPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat-number.counting {
  animation: statPulse 0.25s ease;
}

/* ── Icon hover spin (feature icons) ── */
.feature-icon {
  transition: transform var(--ease-spring), color var(--ease);
}
.feature-block:hover .feature-icon {
  transform: scale(1.15) rotate(-6deg);
  color: var(--clr-gold);
}

/* ── Service Icon ── */
.service-icon {
  transition: transform var(--ease-spring), color var(--ease);
}
.service-card:hover .service-icon {
  transform: scale(1.12);
  color: var(--clr-gold);
}

/* ── Hamburger ── */
.hamburger-line {
  transition: transform 0.3s ease, opacity 0.3s ease, background-color var(--ease);
}
.hamburger.open .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.open .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.open .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ── Map placeholder pulse ── */
@keyframes mapPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}
.map-pin-dot {
  animation: mapPulse 2.4s ease-in-out infinite;
}

/* ── Additional stagger delay ── */
.reveal-delay-5 { transition-delay: 0.50s; }

/* ── WhatsApp pulse ring ── */
@keyframes waPulseRing {
  0%   { transform: scale(0.88); opacity: 0.90; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* ── Partners scroll (defined in style.css; pause on hover handled there) ── */

/* ── Project card reveal ── */
.project-card.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity  0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.70s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow var(--ease-smooth),
    border-color var(--ease-smooth),
    background-color var(--ease);
}

.project-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stats banner number entrance ── */
.stats-banner__item.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity  0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.60s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.stats-banner__item.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================
   PHASE 3 — New Keyframes & Animation Rules
   ========================================================== */

/* ── Preloader ── */
@keyframes plSpin {
  to { transform: rotate(360deg); }
}
@keyframes plFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero Particles ── */
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0);   opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 0.5; }
  100% { transform: translateY(-90px) translateX(14px); opacity: 0; }
}

/* ── Typewriter Cursor Blink ── */
@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── WA Bounce ── */
@keyframes waBounceAnim {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-11px); }
  50%  { transform: translateY(-5px); }
  75%  { transform: translateY(-9px); }
  100% { transform: translateY(0); }
}
.wa-bounce {
  animation: waBounceAnim 0.72s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Derrick Float ── */
@keyframes derrickFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
.hero__derrick svg { animation: derrickFloat 7s ease-in-out infinite; }

/* ── Nav Link Staggered Fade-In (desktop) ── */
@media (min-width: 769px) {
  .navbar__menu li .nav-link {
    opacity: 0;
    animation: navLinkIn 0.5s ease forwards;
  }
  .navbar__menu li:nth-child(1) .nav-link { animation-delay: 0.20s; }
  .navbar__menu li:nth-child(2) .nav-link { animation-delay: 0.30s; }
  .navbar__menu li:nth-child(3) .nav-link { animation-delay: 0.40s; }
  .navbar__menu li:nth-child(4) .nav-link { animation-delay: 0.50s; }
  .navbar__menu li:nth-child(5) .nav-link { animation-delay: 0.60s; }
  .navbar__menu li:nth-child(6) .nav-link { animation-delay: 0.70s; }
}
@keyframes navLinkIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Extra reveal delay ── */
.reveal-delay-6 { transition-delay: 0.60s; }