.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  filter: blur(100px);
  z-index: 0;
  overflow: hidden;
}
.bg-blobs .blob {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  opacity: 0.35;
  will-change: transform;
}

/* Blob sizes are fractions of the viewport so they scale with screen width.
   clamp(min, preferred, max) keeps them sensible on tiny and huge displays. */
.bg-blobs .blob-pink    { width: clamp(360px, 42vw, 900px); aspect-ratio: 1; background: var(--blob-pink);    animation: float-a 26s ease-in-out infinite; }
.bg-blobs .blob-coral   { width: clamp(320px, 38vw, 820px); aspect-ratio: 1; background: var(--blob-coral);   animation: float-b 30s ease-in-out infinite; }
.bg-blobs .blob-amber   { width: clamp(300px, 35vw, 780px); aspect-ratio: 1; background: var(--blob-amber);   animation: float-c 34s ease-in-out infinite; }
.bg-blobs .blob-emerald { width: clamp(340px, 40vw, 860px); aspect-ratio: 1; background: var(--blob-emerald); animation: float-d 28s ease-in-out infinite; }
.bg-blobs .blob-cyan    { width: clamp(320px, 38vw, 820px); aspect-ratio: 1; background: var(--blob-cyan);    animation: float-e 32s ease-in-out infinite; }
.bg-blobs .blob-violet  { width: clamp(380px, 45vw, 960px); aspect-ratio: 1; background: var(--blob-violet);  animation: float-f 36s ease-in-out infinite; }

/* Animations move blobs in vw/vh so the travel distance scales with the
   viewport instead of being limited to the blob's intrinsic size. Each blob's
   path is distinct; durations are staggered so the combined pattern does not
   repeat in a short loop. */
@keyframes float-a {
  0%, 100% { transform: translate(-10vw, 50vh) scale(1); }
  33%      { transform: translate(55vw, 5vh)  scale(1.15); }
  66%      { transform: translate(20vw, 75vh) scale(0.9); }
}
@keyframes float-b {
  0%, 100% { transform: translate(70vw, -5vh) scale(0.9); }
  40%      { transform: translate(5vw,  60vh) scale(1.1); }
  75%      { transform: translate(60vw, 35vh) scale(1); }
}
@keyframes float-c {
  0%, 100% { transform: translate(35vw, 80vh) scale(1); }
  30%      { transform: translate(80vw, 55vh) scale(1.2); }
  60%      { transform: translate(-5vw, 15vh) scale(0.85); }
}
@keyframes float-d {
  0%, 100% { transform: translate(75vw, 65vh) scale(1); }
  35%      { transform: translate(10vw, 0vh)  scale(0.9); }
  70%      { transform: translate(45vw, 50vh) scale(1.1); }
}
@keyframes float-e {
  0%, 100% { transform: translate(5vw, 5vh)   scale(1); }
  40%      { transform: translate(65vw, 70vh) scale(1.1); }
  80%      { transform: translate(35vw, 25vh) scale(0.95); }
}
@keyframes float-f {
  0%, 100% { transform: translate(25vw, 25vh) scale(1); }
  45%      { transform: translate(65vw, -5vh) scale(1.2); }
  80%      { transform: translate(-5vw, 70vh) scale(0.9); }
}

/* Reduce opacity on article pages so it does not fight the text */
body.post-template .bg-blobs .blob { opacity: 0.22; }

/* Accessibility: respect motion reduction */
@media (prefers-reduced-motion: reduce) {
  .bg-blobs .blob { animation: none !important; }
}