/* =============================================
   ANIMATIONS
   ============================================= */

/* ——— Hero: entrance on page load ——— */
.hero__content .eyebrow {
  animation: fadeUp 0.6s ease both;
  animation-delay: 0.05s;
}

.hero__title {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.18s;
}

.hero__desc {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.30s;
}

.hero__cta {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.42s;
}

.hero__stats {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.54s;
}

.hero__visual {
  animation: fadeLeft 0.85s ease both;
  animation-delay: 0.20s;
}

/* ——— Scroll reveal: hidden state ——— */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.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; }

/* ——— Scroll reveal: visible state ——— */
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ——— Keyframes ——— */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0);    }
}

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

/* ——— Nav link underline ——— */
.navbar__nav a {
  position: relative;
}

.navbar__nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--foreground);
  transition: width 0.22s ease;
}

.navbar__nav a:hover::after { width: 100%; }

/* ——— Service card icon pulse on hover ——— */
.service-card:hover .service-card__icon {
  display: inline-block;
  animation: iconPulse 0.35s ease;
}

@keyframes iconPulse {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* ——— Form success ——— */
.form-success {
  animation: fadeUp 0.5s ease both;
}

/* ——— Respect prefers-reduced-motion ——— */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }
}