:root{
  --bg-1:#eaf1ff;
  --bg-2:#eafff2;
  --bg-3:#eef5ff;
  --blob-1:#93c5fd;
  --blob-2:#a7f3d0;
  --blob-3:#c4b5fd;
}

.bg-animated-body {
  min-height: 100dvh;
  background: radial-gradient(1200px 800px at 35% 30%, var(--bg-1), transparent 60%),
              radial-gradient(1100px 900px at 75% 35%, var(--bg-2), transparent 60%),
              linear-gradient(135deg, #f8fafc, var(--bg-3));
  overflow-x: hidden;
}

.animated-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.animated-bg::before,
.animated-bg::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(500px 350px at 30% 35%, color-mix(in srgb, var(--blob-1) 55%, transparent), transparent 65%),
              radial-gradient(520px 380px at 75% 30%, color-mix(in srgb, var(--blob-2) 55%, transparent), transparent 65%),
              radial-gradient(520px 380px at 60% 80%, color-mix(in srgb, var(--blob-3) 45%, transparent), transparent 70%);
  filter: blur(40px);
  opacity: 0.55;
  animation: floaty 14s ease-in-out infinite alternate;
}

.animated-bg::after{
  opacity: 0.35;
  filter: blur(55px);
  animation: floaty2 18s ease-in-out infinite alternate;
  mix-blend-mode: multiply;
}

@keyframes floaty {
  0%   { transform: translate(-2%, -2%) scale(1); }
  50%  { transform: translate(3%, 2%)  scale(1.05); }
  100% { transform: translate(6%, -1%) scale(1.02); }
}

@keyframes floaty2 {
  0%   { transform: translate(3%, 2%)  scale(1.02) rotate(0deg); }
  50%  { transform: translate(-2%, 3%) scale(1.06) rotate(2deg); }
  100% { transform: translate(-5%, -2%) scale(1.03) rotate(-2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .animated-bg::before,
  .animated-bg::after { animation: none !important; }
}