/**
 * Animations – separate file for all animation styles.
 * Lightweight, mobile-first. Requires --anim-duration and --anim-duration-mobile in main CSS.
 */

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Gentle lazy-load style: content fades in with a small rise when it comes into view */
@keyframes fadeInLazy {
  from {
    opacity: 0;
    transform: translateY(0.625rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-title {
  animation: fadeInUp var(--anim-duration) ease both;
}

.hero-tagline {
  animation: fadeInUp var(--anim-duration) ease 0.08s both;
}

.hero-card {
  animation: fadeInUp var(--anim-duration) ease 0.12s both;
}

/* Home: lazy-in-view – sections reveal when they scroll into view (no on-load animation) */
.section-services .section-heading,
.section-services .section-subtitle,
.section-services .service-card {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: none;
}
.section-services.in-view .section-heading,
.section-services.in-view .section-subtitle {
  animation: fadeInLazy 0.55s ease-out both;
}
.section-services.in-view .section-heading { animation-delay: 0.05s; }
.section-services.in-view .section-subtitle { animation-delay: 0.12s; }
.section-services.in-view .service-card {
  animation: fadeInLazy 0.55s ease-out both;
}
.section-services.in-view .row > *:nth-child(1) .service-card { animation-delay: 0.18s; }
.section-services.in-view .row > *:nth-child(2) .service-card { animation-delay: 0.26s; }
.section-services.in-view .row > *:nth-child(3) .service-card { animation-delay: 0.34s; }
.section-services.in-view .row > *:nth-child(4) .service-card { animation-delay: 0.42s; }

.section-trust .section-heading,
.section-trust .trust-icon,
.section-trust .testimonial-card {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: none;
}
.section-trust.in-view .section-heading {
  animation: fadeInLazy 0.55s ease-out both;
  animation-delay: 0.05s;
}
.section-trust.in-view .trust-icon {
  animation: fadeInLazy 0.55s ease-out both;
}
.section-trust.in-view .row.mb-5 > *:nth-child(1) .trust-icon { animation-delay: 0.12s; }
.section-trust.in-view .row.mb-5 > *:nth-child(2) .trust-icon { animation-delay: 0.2s; }
.section-trust.in-view .row.mb-5 > *:nth-child(3) .trust-icon { animation-delay: 0.28s; }
.section-trust.in-view .row.mb-5 > *:nth-child(4) .trust-icon { animation-delay: 0.36s; }
.section-trust.in-view .testimonial-card {
  animation: fadeInLazy 0.55s ease-out both;
  animation-delay: 0.25s;
}

.section-process .section-heading,
.section-process .process-step-card {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: none;
}
.section-process.in-view .section-heading {
  animation: fadeInLazy 0.55s ease-out both;
  animation-delay: 0.05s;
}
.section-process.in-view .process-step-card {
  animation: fadeInLazy 0.55s ease-out both;
}
.section-process.in-view .process-steps-row > *:nth-child(1) .process-step-card { animation-delay: 0.12s; }
.section-process.in-view .process-steps-row > *:nth-child(2) .process-step-card { animation-delay: 0.2s; }
.section-process.in-view .process-steps-row > *:nth-child(3) .process-step-card { animation-delay: 0.28s; }
.section-process.in-view .process-steps-row > *:nth-child(4) .process-step-card { animation-delay: 0.36s; }

.btn-cta-nav:active,
.quote-form .btn-success:active,
.btn:active {
  transform: scale(0.98);
}

.service-card:active,
.process-step-card:active {
  transform: scale(0.99);
}

@media (max-width: 48em) {
  .hero-title {
    animation-duration: var(--anim-duration-mobile);
  }
  .hero-tagline {
    animation-duration: var(--anim-duration-mobile);
    animation-delay: 0.05s;
  }
  .hero-card {
    animation-duration: var(--anim-duration-mobile);
    animation-delay: 0.08s;
  }
  .section-services .service-card,
  .section-services .section-heading,
  .section-services .section-subtitle,
  .section-trust .trust-icon,
  .section-trust .testimonial-card,
  .section-process .process-step-card {
    animation-duration: var(--anim-duration-mobile);
  }
  .section-services .row > *:nth-child(1) .service-card {
    animation-delay: 0.1s;
  }
  .section-services .row > *:nth-child(2) .service-card {
    animation-delay: 0.16s;
  }
  .section-services .row > *:nth-child(3) .service-card {
    animation-delay: 0.22s;
  }
  .section-services .row > *:nth-child(4) .service-card {
    animation-delay: 0.28s;
  }
  .section-process .process-steps-row > *:nth-child(1) .process-step-card {
    animation-delay: 0.08s;
  }
  .section-process .process-steps-row > *:nth-child(2) .process-step-card {
    animation-delay: 0.14s;
  }
  .section-process .process-steps-row > *:nth-child(3) .process-step-card {
    animation-delay: 0.2s;
  }
  .section-process .process-steps-row > *:nth-child(4) .process-step-card {
    animation-delay: 0.26s;
  }
}

/* ========== Services page: What We Offer – lazy reveal when in view ========== */
.section-what-we-offer .service-offer-card {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: none;
}
.section-what-we-offer.in-view .service-offer-card {
  animation: fadeInLazy 0.55s ease-out both;
}
.section-what-we-offer.in-view .row > *:nth-child(1) .service-offer-card { animation-delay: 0.05s; }
.section-what-we-offer.in-view .row > *:nth-child(2) .service-offer-card { animation-delay: 0.12s; }
.section-what-we-offer.in-view .row > *:nth-child(3) .service-offer-card { animation-delay: 0.19s; }
.section-what-we-offer.in-view .row > *:nth-child(4) .service-offer-card { animation-delay: 0.26s; }
.section-what-we-offer.in-view .row > *:nth-child(5) .service-offer-card { animation-delay: 0.33s; }
.section-what-we-offer.in-view .row > *:nth-child(6) .service-offer-card { animation-delay: 0.4s; }

/* ========== Services page: Servicing All Areas – lazy stagger when in view ========== */
.section-areas .area-tag {
  opacity: 0;
  transform: translateY(0.625rem);
  transition: none;
}
.section-areas.in-view .area-tag {
  animation: fadeInLazy 0.45s ease-out both;
}
.section-areas.in-view .area-tag:nth-child(1) { animation-delay: 0.02s; }
.section-areas.in-view .area-tag:nth-child(2) { animation-delay: 0.05s; }
.section-areas.in-view .area-tag:nth-child(3) { animation-delay: 0.08s; }
.section-areas.in-view .area-tag:nth-child(4) { animation-delay: 0.11s; }
.section-areas.in-view .area-tag:nth-child(5) { animation-delay: 0.14s; }
.section-areas.in-view .area-tag:nth-child(6) { animation-delay: 0.17s; }
.section-areas.in-view .area-tag:nth-child(7) { animation-delay: 0.2s; }
.section-areas.in-view .area-tag:nth-child(8) { animation-delay: 0.23s; }
.section-areas.in-view .area-tag:nth-child(9) { animation-delay: 0.26s; }
.section-areas.in-view .area-tag:nth-child(10) { animation-delay: 0.29s; }
.section-areas.in-view .area-tag:nth-child(11) { animation-delay: 0.32s; }
.section-areas.in-view .area-tag:nth-child(12) { animation-delay: 0.35s; }
.section-areas.in-view .area-tag:nth-child(13) { animation-delay: 0.38s; }
.section-areas.in-view .area-tag:nth-child(14) { animation-delay: 0.41s; }
.section-areas.in-view .area-tag:nth-child(15) { animation-delay: 0.44s; }
.section-areas.in-view .area-tag:nth-child(16) { animation-delay: 0.47s; }
.section-areas.in-view .area-tag:nth-child(17) { animation-delay: 0.5s; }
.section-areas.in-view .area-tag:nth-child(18) { animation-delay: 0.53s; }
.section-areas.in-view .area-tag:nth-child(19) { animation-delay: 0.56s; }
.section-areas.in-view .area-tag:nth-child(20) { animation-delay: 0.59s; }
.section-areas.in-view .area-tag:nth-child(21) { animation-delay: 0.62s; }

@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-tagline,
  .hero-card,
  .section-heading,
  .section-subtitle,
  .service-card,
  .trust-icon,
  .testimonial-card,
  .process-step-card {
    animation: none;
  }
  .section-services .section-heading,
  .section-services .section-subtitle,
  .section-services .service-card,
  .section-trust .section-heading,
  .section-trust .trust-icon,
  .section-trust .testimonial-card,
  .section-process .section-heading,
  .section-process .process-step-card,
  .section-what-we-offer .service-offer-card,
  .section-areas .area-tag {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .btn-cta-nav:active,
  .quote-form .btn-success:active,
  .btn:active,
  .service-card:active,
  .process-step-card:active {
    transform: none;
  }
}