/* ==========================================================
   Scroll animations (wow.js + animate.css)

   Markup:  class="wow fadeInUp"  data-wow-delay=".2s"

   animate.css moves elements 100% of their width/height, which is
   too much for page sections and can create a horizontal scrollbar.
   These keyframes use the same names but travel a short distance.
   Loaded after animate.min.css, so they win.
   ========================================================== */

.wow {
  animation-duration: .8s;
  animation-fill-mode: both;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 32px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-40px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(40px, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes zoomIn {
  from { opacity: 0; transform: scale3d(.85, .85, .85); }
  to   { opacity: 1; transform: none; }
}

/* never let a sliding element create sideways scrolling */
html, body {
  overflow-x: clip;
}

/* people who ask their system for less motion get no animation */
@media (prefers-reduced-motion: reduce) {
  .wow {
    visibility: visible !important;
    animation: none !important;
  }
}

/* ==========================================================
   Home hero: text and buttons rise in one after another
   (plain CSS, not wow.js, so there is no hidden flash above the fold)
   ========================================================== */
@keyframes hero-rise {
  from { opacity: 0; transform: translate3d(0, 34px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.banner-area .banner-content h1 { animation: hero-rise .9s .10s both; }
.banner-area .banner-content p  { animation: hero-rise .9s .30s both; }
.banner-area .banner-content .banner-content-btn { animation: hero-rise .9s .50s both; }
/* the dotted decoration on the right fades in last */
.banner-area .banner-img-2 { animation: hero-fade 1.4s .7s both; }

/* the hero photo drifts in slowly: a copy of the photo (background: inherit) sits on its own layer and is scaled; text stays untouched */
.banner-area {
  isolation: isolate;
}
.banner-area::before {
  background: inherit;
  border-radius: 0;
  z-index: -2;
  animation: hero-photo 20s ease-out both;
  transform-origin: 70% 50%;
}
@keyframes hero-photo {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .banner-area .banner-content h1,
  .banner-area .banner-content p,
  .banner-area .banner-content .banner-content-btn,
  .banner-area .banner-img-2,
  .banner-area::before {
    animation: none;
  }
}

/* ---------- Counters: the icon pops in as the numbers start counting ---------- */
.single-counter.animated img {
  animation: counter-pop .7s cubic-bezier(.2, .9, .3, 1.4) both;
}
@keyframes counter-pop {
  0%   { transform: scale(.4); opacity: 0; }
  100% { transform: scale(1);  opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .single-counter.animated img { animation: none; }
}