/* Animated CSS-mesh hero (DIFWEB-196). Opt-in via ServiceIntroSection
   heroClassName="-mesh-hero". Replaces the default photo backdrop with an
   on-brand animated gradient mesh on a dark base (keeps the white hero text
   legible). Pure CSS — no JS, no model, no extra network request. Motion is a
   slow GPU-composited transform drift; disabled under prefers-reduced-motion.
   Shared across the AI service pages (Agentic, Discovery, AI Development); kept
   out of styles.min.css (the build purges it, which could strip the keyframes). */
.g-service-intro.-mesh-hero {
  /* Base: dark indigo + a faint tech dot-grid (static, sharp) for depth/structure
     so the hero doesn't read as a flat wash. */
  background-color: #0a0b18;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1.4px);
  background-size: 34px 34px;
  position: relative;
  overflow: hidden;
}
/* Animated color-mesh: vivid, distinct brand blobs (purple / magenta / orange /
   blue) that drift + scale. Higher alpha + a 5th blue blob so you read separate
   color regions, not one gradient. */
.g-service-intro.-mesh-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 0;
  background:
    radial-gradient(34% 38% at 16% 24%, rgba(123, 60, 255, 0.85), transparent 60%),
    radial-gradient(30% 34% at 84% 16%, rgba(254, 118, 36, 0.70), transparent 60%),
    radial-gradient(40% 42% at 74% 74%, rgba(93, 33, 209, 0.90), transparent 62%),
    radial-gradient(28% 32% at 36% 82%, rgba(214, 64, 200, 0.68), transparent 60%),
    radial-gradient(30% 34% at 58% 44%, rgba(79, 141, 253, 0.55), transparent 60%);
  filter: blur(56px) saturate(1.15);
  will-change: transform;
  animation: meshDrift 24s ease-in-out infinite alternate;
}
/* Grain + a downward vignette: the noise texture removes the "smooth CSS
   gradient" feel; the vignette keeps copy high-contrast over the bright blobs. */
.g-service-intro.-mesh-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10, 11, 24, 0.10) 0%, rgba(10, 11, 24, 0.50) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: cover, 140px 140px;
  opacity: 0.9;
  mix-blend-mode: normal;
}
.g-service-intro.-mesh-hero > .wrap-v4 {
  position: relative;
  z-index: 1;
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50%  { transform: translate3d(3%, -3.5%, 0) scale(1.14) rotate(2deg); }
  100% { transform: translate3d(-3%, 2.5%, 0) scale(1.08) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .g-service-intro.-mesh-hero::before { animation: none; }
}