/* =============================================
   نقل عفش الدمام — Animations v2.0
   ============================================= */

/* ══════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════ */

@keyframes floatBox {
  0%,100% { transform:translateY(0) rotate(0deg); }
  33%      { transform:translateY(-18px) rotate(3deg); }
  66%      { transform:translateY(-8px) rotate(-2deg); }
}

@keyframes truckBob {
  0%,100% { transform:translateX(0) translateY(0); }
  20%      { transform:translateX(-10px) translateY(-4px); }
  50%      { transform:translateX(8px) translateY(-2px); }
  80%      { transform:translateX(-5px) translateY(1px); }
}

@keyframes wheelSpin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

@keyframes roadScroll {
  from { background-position:0 0; }
  to   { background-position:-90px 0; }
}

@keyframes waPulse {
  0%,100% { box-shadow:0 4px 24px rgba(37,211,102,0.55); }
  50%      { box-shadow:0 4px 44px rgba(37,211,102,0.9), 0 0 0 12px rgba(37,211,102,0.07); }
}

@keyframes goldPulse {
  0%,100% { box-shadow:0 4px 24px rgba(200,154,46,0.5); }
  50%      { box-shadow:0 4px 44px rgba(200,154,46,0.9), 0 0 0 10px rgba(200,154,46,0.08); }
}

@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position: 200% center; }
}

@keyframes badgeGlow {
  0%,100% {
    box-shadow:0 0 10px rgba(200,154,46,0.2);
    border-color:rgba(200,154,46,0.35);
  }
  50% {
    box-shadow:0 0 24px rgba(200,154,46,0.55);
    border-color:rgba(200,154,46,0.75);
  }
}

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-20px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes scaleIn {
  from { opacity:0; transform:scale(0.82); }
  to   { opacity:1; transform:scale(1); }
}

@keyframes slideInRight {
  from { opacity:0; transform:translateX(40px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes slideInLeft {
  from { opacity:0; transform:translateX(-40px); }
  to   { opacity:1; transform:translateX(0); }
}

@keyframes marqueeScroll {
  0%   { transform:translateX(0); }
  100% { transform:translateX(-50%); }
}

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

@keyframes borderGlow {
  0%,100% {
    border-color:rgba(200,154,46,0.4);
    box-shadow:0 0 20px rgba(200,154,46,0.1);
  }
  50% {
    border-color:rgba(247,208,96,0.7);
    box-shadow:0 0 40px rgba(200,154,46,0.25), 0 0 80px rgba(200,154,46,0.08);
  }
}

@keyframes starTwinkle {
  0%,100% { opacity:0.2; transform:scale(1); }
  50%      { opacity:1; transform:scale(1.4); }
}

@keyframes successPop {
  0%   { transform:scale(0); }
  60%  { transform:scale(1.2); }
  80%  { transform:scale(0.95); }
  100% { transform:scale(1); }
}

@keyframes glowLine {
  from { width:0; opacity:0; }
  to   { width:100%; opacity:1; }
}

@keyframes dotSlide {
  from { width:10px; border-radius:50%; }
  to   { width:28px; border-radius:5px; }
}

@keyframes stepGlow {
  0%,100% { box-shadow:0 0 16px rgba(200,154,46,0.35); }
  50%      { box-shadow:0 0 36px rgba(200,154,46,0.75), 0 0 0 8px rgba(200,154,46,0.1); }
}

@keyframes heroFloat {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}

/* ══════════════════════════════════════
   APPLIED ANIMATIONS
══════════════════════════════════════ */

/* Hero entrance */
.hero-badge    { animation:fadeInDown .7s ease both; }
.hero h1       { animation:fadeInUp  .75s ease .15s both; }
.hero-desc     { animation:fadeInUp  .75s ease .28s both; }
.hero-btns     { animation:fadeInUp  .75s ease .40s both; }
.trust-badges  { animation:fadeInUp  .75s ease .52s both; }
.hero-anim-wrap{ animation:scaleIn  .9s ease .2s both; }

/* Trust badge glow */
.trust-badge                { animation:badgeGlow 3.5s ease-in-out infinite; }
.trust-badge:nth-child(2)   { animation-delay:.5s; }
.trust-badge:nth-child(3)   { animation-delay:1s; }
.trust-badge:nth-child(4)   { animation-delay:1.5s; }

/* Inner hero entrance */
.inner-hero h1          { animation:fadeInUp .8s ease .1s both; }
.inner-hero p           { animation:fadeInUp .8s ease .24s both; }
.inner-hero .hero-btns  { animation:fadeInUp .8s ease .38s both; }

/* Shimmer class */
.shimmer {
  background:linear-gradient(
    90deg,
    var(--c-gold) 0%,
    var(--c-gold-3) 40%,
    var(--c-gold) 80%
  );
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:shimmer 3s linear infinite;
}

/* Wheel spin helper */
.wheel-spin {
  animation:wheelSpin 1.1s linear infinite;
  transform-origin:center center;
}

/* Stat numbers: pulse on reveal */
.stat-item.revealed .stat-num {
  animation:numberFlicker 2s ease-in-out 1;
}

/* Featured pricing card */
.pricing-card.featured {
  animation:borderGlow 3.5s ease-in-out infinite;
}

/* Button ripple */
.btn::after {
  content:'';
  position:absolute; inset:0;
  background:rgba(255,255,255,0.12);
  border-radius:inherit; opacity:0;
  transition:opacity .25s;
}
.btn:active::after { opacity:1; }

/* Notification bar entrance */
.notif-bar { animation:fadeInDown .6s ease both; }

/* Service card stagger via .d1-.d8 already in style.css */

/* Slider entrance */
.slide { animation:none; }

/* Scroll-top entrance */
.scroll-top { transition:all .35s cubic-bezier(.4,0,.2,1); }