/* ============================================================
   QBITE TECHNOLOGY — animations.css
   Keyframes, AOS overrides, scroll effects
   ============================================================ */

/* ============================================================
   HERO BLOB
   ============================================================ */
@keyframes blob-pulse {
  0%, 100% {
    transform: translate(-50%, -58%) scale(1);
    opacity: 1;
  }
  33% {
    transform: translate(-50%, -58%) scale(1.06) rotate(2deg);
    opacity: 0.85;
  }
  66% {
    transform: translate(-50%, -58%) scale(0.97) rotate(-1deg);
    opacity: 0.95;
  }
}

.hero-blob {
  animation: blob-pulse 10s ease-in-out infinite;
}


/* ============================================================
   MARQUEE SCROLL
   ============================================================ */
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* ============================================================
   SERVICE FEATURED — animated gradient border shimmer
   ============================================================ */
@keyframes border-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.service-featured::before {
  background: linear-gradient(135deg, #2563EB, #0EA5E9, #8B5CF6, #2563EB);
  background-size: 300% 300%;
  animation: border-shimmer 5s ease infinite;
}


/* ============================================================
   COUNT-UP NUMBER (triggered by JS)
   ============================================================ */
.stat-number {
  transition: none; /* JS handles the counting */
}


/* ============================================================
   AOS OVERRIDES
   Tune default animation feel
   ============================================================ */
[data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important;
}

[data-aos="fade-up"] {
  transform: translateY(24px);
}

[data-aos="fade-right"] {
  transform: translateX(-24px);
}

[data-aos="fade-left"] {
  transform: translateX(24px);
}


/* ============================================================
   PROCESS STEP — stagger via AOS delay
   ============================================================ */
.process-step:nth-child(1) { --aos-delay: 0ms; }
.process-step:nth-child(2) { --aos-delay: 80ms; }
.process-step:nth-child(3) { --aos-delay: 160ms; }
.process-step:nth-child(4) { --aos-delay: 240ms; }


/* ============================================================
   NAVBAR SCROLL STATE — smooth transition
   ============================================================ */
#navbar {
  will-change: background-color, box-shadow;
}


/* ============================================================
   FOCUS RING ANIMATION (accessibility)
   ============================================================ */
@keyframes focus-ring {
  0%   { box-shadow: 0 0 0 0 rgba(37,99,235,0.5); }
  100% { box-shadow: 0 0 0 4px rgba(37,99,235,0); }
}


/* ============================================================
   PAGE LOAD — subtle body fade in
   ============================================================ */
@keyframes page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

body {
  animation: page-in 0.3s ease forwards;
}


/* ============================================================
   HOVER LIFT utility (used by cards)
   ============================================================ */
.lift {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
}


/* ============================================================
   REDUCED MOTION — respect user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-blob { animation: none; }
  .marquee-track { animation: none; }
  .service-featured::before { animation: none; }
  body { animation: none; }
}