/* Animated gradient-mesh background — an "alive" hero treatment for pages with a flat
   background instead of photography, without needing licensed video footage. */

.motion-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.motion-mesh__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.28;
  will-change: transform;
  animation: meshDrift 22s ease-in-out infinite alternate;
}

.motion-mesh__blob--a {
  width: 420px;
  height: 420px;
  top: -12%;
  left: -6%;
  background: #5F61ED;
  animation-duration: 24s;
}

.motion-mesh__blob--b {
  width: 360px;
  height: 360px;
  top: 25%;
  right: -8%;
  background: #FFA600;
  animation-duration: 28s;
  animation-delay: -8s;
}

.motion-mesh__blob--c {
  width: 320px;
  height: 320px;
  bottom: -14%;
  left: 28%;
  background: #9191FF;
  animation-duration: 20s;
  animation-delay: -14s;
}

@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(4%, -6%) scale(1.08); }
  100% { transform: translate(-3%, 5%) scale(0.95); }
}

@media (max-width: 768px) {
  .motion-mesh__blob {
    filter: blur(46px);
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-mesh__blob {
    animation: none;
  }
}