/* ==========================================================================
   Zenith Solutions — Animations (CSS + JS driven, no libraries)
   ========================================================================== */

/* Scroll reveal — elements get .reveal, then .is-visible via IntersectionObserver */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal--left  { transform: translateX(-34px); }
.reveal--right { transform: translateX(34px); }
.reveal--zoom  { transform: scale(.94); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--zoom.is-visible { transform: none; }

/* Staggered children delays */
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
.reveal[data-delay="4"] { transition-delay: .32s; }

/* Counter pulse when in view */
@keyframes countPop {
  0% { transform: scale(.9); }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.stat.counted .num { animation: countPop .6s ease; }

/* Floating hero badge */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.hero__badge { animation: floaty 4s ease-in-out infinite; }

/* Soft fade-in for banners on load */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-banner .container-x > * { animation: fadeInUp .6s ease both; }
.page-banner h1 { animation-delay: .05s; }
.page-banner .breadcrumb-x { animation-delay: .18s; }

/* Button subtle shine on hover */
.btn-x { position: relative; overflow: hidden; }
.btn-x::after {
  content: "";
  position: absolute; top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
}
.btn-x:hover::after { left: 130%; }

/* Nav link underline grow */
.nav-menu a { position: relative; }
.nav-menu a::before {
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-menu a.active::before,
.nav-menu a:hover::before { transform: scaleX(1); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}