/* ========================
   SCROLL REVEAL BASE
======================== */
.reveal {
  opacity: 0;
  transform: translateY(48px);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

/* ========================
   ELEMENT-SPECIFIC REVEALS
======================== */
.service-card {
  opacity: 0;
  transform: translateY(30px) scale(0.96);
}
.service-card.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 0.5s ease, transform 0.5s ease,
              box-shadow 0.5s ease, border-color 0.3s ease;
}

.why-item {
  opacity: 0;
  transform: translateY(32px);
}
.why-item.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow 0.4s ease;
}

.process-step {
  opacity: 0;
  transform: translateY(28px);
}
.process-step.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.portfolio-card {
  opacity: 0;
  transform: scale(0.93);
}
.portfolio-card.revealed {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow 0.4s ease;
}

.testimonial-card {
  opacity: 0;
  transform: translateY(28px);
}
.testimonial-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease,
              box-shadow 0.3s ease;
}

.blog-card {
  opacity: 0;
  transform: translateY(32px);
}
.blog-card.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.55s ease, transform 0.55s ease,
              box-shadow 0.4s ease, border-color 0.3s ease;
}

/* ========================
   LOADER
======================== */
@keyframes loaderSlideUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-100%); opacity: 0; }
}
.loader-exit {
  animation: loaderSlideUp 0.8s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes loaderTextReveal {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}
#loader-logo {
  animation: loaderTextReveal 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ========================
   HERO ANIMATIONS — CSS driven
======================== */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroSlideRight {
  from { opacity: 0; transform: translateX(32px) scale(0.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Content stagger — children animate in sequence */
.hero-content .hero-tag          { animation: heroFadeUp 0.65s ease 1.2s both; }
.hero-content .hero-title        { animation: heroFadeUp 0.70s ease 1.38s both; }
.hero-content .hero-desc         { animation: heroFadeUp 0.65s ease 1.52s both; }
.hero-content .hero-services-row { animation: heroFadeUp 0.60s ease 1.64s both; }
.hero-content .hero-ctas         { animation: heroFadeUp 0.60s ease 1.76s both; }
.hero-content .hero-trust        { animation: heroFadeUp 0.60s ease 1.88s both; }

/* Visual side */
.hero-visual { animation: heroSlideRight 0.90s cubic-bezier(0.4, 0, 0.2, 1) 1.30s both; }

/* Metric cards stagger */
.hero-metric-1 { animation: heroFadeUp 0.6s ease 1.60s both, metricFloat 5s ease-in-out 2.4s infinite !important; }
.hero-metric-2 { animation: heroFadeUp 0.6s ease 1.74s both, metricFloat 5s ease-in-out 2.6s infinite !important; }
.hero-metric-3 { animation: heroFadeUp 0.6s ease 1.88s both, metricFloat 5s ease-in-out 2.8s infinite !important; }
.hero-badge    { animation: heroFadeUp 0.6s ease 2.00s both, metricFloat 6s ease-in-out 3.0s infinite !important; }

/* ========================
   SHAPE / FLOAT ANIMATIONS
======================== */
@keyframes floatA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes floatB {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}
.hero-dot-1 { animation: floatA 6s ease-in-out infinite; }
.hero-dot-2 { animation: floatB 5s ease-in-out infinite 1s; }

/* ========================
   STAT NUMBER PULSE
======================== */
@keyframes statPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.06); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
.stat-number.animating { animation: statPop 0.4s ease; }

/* ========================
   PROCESS LINE
======================== */
.process-connector-fill {
  transition: width 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========================
   SHIMMER TEXT (GOLD)
======================== */
@keyframes shimmerGold {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.shimmer-gold {
  background: linear-gradient(90deg, var(--gold) 20%, #f5e080 50%, var(--gold) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerGold 3s linear infinite;
}

/* ========================
   PULSE GLOW ON ICONS
======================== */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,87,255,0.25); }
  50%       { box-shadow: 0 0 0 14px rgba(0,87,255,0); }
}
.process-step.revealed .step-circle {
  animation: pulseGlow 2.5s ease-in-out infinite 0.5s;
}