/* ── UNIVERSAL BLOB BACKGROUND — shared across all pages ── */

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

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: opacity;
  animation: blob-switch 12s ease-in-out infinite;
  transform: translateZ(0);
}

.blob--top {
  width: 650px;
  height: 900px;
  left: 50%;
  top: -260px;
  transform: translateX(-50%);
  background: radial-gradient(50% 42% at 20% 46%, #1f5c5c 0%, rgba(31, 92, 92, 0) 95%);
  animation-duration: 14s;
  animation-delay: 0s;
}

.blob--right {
  width: 520px;
  height: 650px;
  right: calc((100vw - 1100px) / 2 - 320px);
  top: 900px;
  background: radial-gradient(50% 42% at 20% 46%, #7d99a8 0%, rgba(125, 153, 168, 0) 95%);
  animation-duration: 11s;
  animation-delay: 2s;
}

.blob--left {
  width: 520px;
  height: 650px;
  left: calc((100vw - 1100px) / 2 - 180px);
  top: 2050px;
  background: radial-gradient(50% 42% at 20% 46%, #1f5c5c 0%, rgba(31, 92, 92, 0) 95%);
  animation-duration: 9s;
  animation-delay: 4s;
}

.blob--bottom {
  width: 520px;
  height: 650px;
  right: calc((100vw - 1100px) / 2 - 320px);
  top: 3200px;
  background: radial-gradient(50% 42% at 20% 46%, #1f5c5c 0%, rgba(31, 92, 92, 0) 95%);
  animation-duration: 13s;
  animation-delay: 1s;
}

/* Blob-switching keyframes — fades opacity for randomization effect */
@keyframes blob-switch {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .blob {
    animation: none;
    opacity: 0.5;
  }
}

/* Mobile — scale down blobs to fit smaller viewport */
@media (max-width: 767px) {
  .blob--top {
    width: 390px;
    height: 540px;
    top: -156px;
  }

  .blob--right {
    width: 312px;
    height: 390px;
    right: 108px;
    top: 540px;
  }

  .blob--left {
    width: 312px;
    height: 390px;
    left: 108px;
    top: 1230px;
  }

  .blob--bottom {
    width: 312px;
    height: 390px;
    right: -12px;
    top: 1920px;
  }
}