/* =========================================================
   Gemz Automate — Animations
   Hero animated backgrounds (moving gradient + circuit dots)
   ========================================================= */

/* Animated moving gradient behind hero */
.hero__bg, .page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Floating circuit dots layer */
.hero__dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(30, 111, 255, 0.16) 1.5px, transparent 1.6px);
  background-size: 42px 42px;
  opacity: 0.35;
  animation: dotsDrift 22s linear infinite;
  -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 78%);
          mask-image: radial-gradient(circle at center, #000 30%, transparent 78%);
}

@keyframes dotsDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 420px 420px; }
}

/* Glowing pulse for the floating WhatsApp button */
@keyframes wa-pulse {
  0%   { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(37, 211, 102, 0.55); }
  70%  { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 18px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 6px 20px rgba(0,0,0,0.35), 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Scroll reveal (progressive enhancement via main.js) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .page-hero__bg, .hero__dots, .wa-float { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}