/* ==========================================================================
   FABSOL ENGINEERS — Animations
   ========================================================================== */

/* Reveal up */
.reveal{
  opacity: 0; transform: translateY(40px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible{ opacity:1; transform: none; }

.reveal-left{ opacity:0; transform: translateX(-40px); transition: all .9s ease; }
.reveal-left.is-visible{ opacity:1; transform: none; }
.reveal-right{ opacity:0; transform: translateX(40px); transition: all .9s ease; }
.reveal-right.is-visible{ opacity:1; transform: none; }

/* Hero text stagger */
.hero h1 .word{
  display:inline-block; opacity: 0; transform: translateY(40px);
  animation: heroWord .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes heroWord{ to{ opacity:1; transform:none; } }

/* CTA pulse */
@keyframes ctaPulse{
  0%{ box-shadow: 0 0 0 0 rgba(200,16,46,.55); }
  70%{ box-shadow: 0 0 0 14px rgba(200,16,46,0); }
  100%{ box-shadow: 0 0 0 0 rgba(200,16,46,0); }
}
.btn-pulse{ animation: ctaPulse 2.4s infinite; }

/* number counter helper */
.num[data-counter]{ display:inline-block; }

/* swiper customizations */
.swiper-pagination-bullet{ background: rgba(255,255,255,.5); opacity:1; }
.swiper-pagination-bullet-active{ background: var(--fab-red); width: 24px; border-radius: 6px; transition: all .3s; }

/* Marquee for clients */
.marquee{
  overflow:hidden; position: relative; padding: 1rem 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap: 2.5rem; animation: marqueeMove 35s linear infinite;
  width: max-content;
}
.marquee:hover .marquee-track{ animation-play-state: paused; }
@keyframes marqueeMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.marquee .client-logo{ min-width: 220px; }