/* animations.css - supplemental animation styles and AOS fallback */

/* Generic reveal for elements with data-aos when AOS isn't available */
[data-aos] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: translateY(0);
}

/* Specific helpers */
.animate-zoom {
  transform: scale(0.95);
  transition: transform 600ms ease, opacity 600ms ease;
  opacity: 0;
}
.animate-zoom.aos-animate { transform: scale(1); opacity: 1; }

.animate-fade-left { transform: translateX(-20px); opacity: 0; }
.animate-fade-left.aos-animate { transform: translateX(0); opacity: 1; }

/* Staggering utility (works when markup includes --delay style or inline style) */
[data-aos][style*="--delay"] {
  transition-delay: var(--delay);
}

/* Extra polish for icons */
.icon { will-change: transform; display: inline-flex; justify-content: center; align-items: center; }
.icon i { color: var(--brand-strong); font-size: 28px; transition: transform 300ms ease, color 300ms ease, filter 300ms ease; }
.icon--float { animation: float 3s ease-in-out infinite; }

/* Stronger icon visibility: bg circle + subtle shadow */
.icon { width: 60px; height: 60px; border-radius: 12px; background: rgba(241,250,238,0.9); box-shadow: 0 6px 14px rgba(11,122,40,0.08); }
.icon i { color: var(--brand-strong); }
.icon:hover i { transform: translateY(-4px) scale(1.06); color: var(--brand); filter: drop-shadow(0 6px 12px rgba(11,122,40,0.18)); }

/* Make icons slightly bigger on key places */
.service-card .icon i, .feature-card .icon i, .value-card .icon i { font-size: 30px; }

/* Ensure FontAwesome pseudo-elements also inherit color (in case of SVG/svg-with-fill) */
.fa, .fas, .far, .fal, .fab, .fa-solid { color: var(--brand-strong); }

/* Icon reveal — matched to aos fallback */
.icon.aos-animate { transform: translateY(0) scale(1); opacity: 1; }
.icon { transform: translateY(8px) scale(0.98); opacity: 0; transition: transform 480ms cubic-bezier(.2,.9,.3,1), opacity 480ms ease; }

/* Fallback for AOS classes often used by devs */
.aos-init { opacity: 0; }
.aos-animate { opacity: 1; transform: none; transition: all 600ms ease; }

/* Slight scale-in for cards to give pop */
.card, .service-card, .value-card, .feature-card { transform-origin: center; }
.card, .service-card, .value-card, .feature-card { transition: transform 450ms ease, box-shadow 450ms ease, opacity 450ms ease; }
.card.aos-animate, .service-card.aos-animate, .value-card.aos-animate, .feature-card.aos-animate {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Nav link reveal fallback when opening mobile menu */
.nav-links a { opacity: 1; }
.nav-links a[data-stagger] { opacity: 0; transform: translateY(12px) scale(0.995); }
.nav-links.show a[data-stagger] { animation: navItemIn 420ms cubic-bezier(.2,.9,.3,1) forwards; animation-delay: calc(var(--i) * 65ms); }

@keyframes navItemIn { to { opacity: 1; transform: translateY(0) scale(1); } }

/* Icon / button utilities */
.icon-load { opacity: 0; transform: translateY(8px) scale(0.98); }
.icon-loaded { animation: iconPopIn 520ms cubic-bezier(.2,.9,.3,1) forwards; }

@keyframes iconPopIn {
  0% { opacity: 0; transform: translateY(8px) scale(0.94); }
  60% { opacity: 1; transform: translateY(-6px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* Micro interactions */
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } }

.wiggle:hover { animation: wiggle 520ms ease-in-out; }
@keyframes wiggle { 0% { transform: rotate(0); } 25% { transform: rotate(6deg); } 50% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }

/* Pop on hover for buttons */
.pop-on-hover:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 22px rgba(11,122,40,0.12); }

/* Ensure accessibility motion respect: prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  [data-aos], .animate-zoom, .animate-fade-left { transition: none !important; animation: none !important; transform: none !important; opacity: 1 !important; }
}