/* Liquid glass backdrop — drifting color blobs from NPRPBjd */

body {
  background: transparent;
}

.site-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg);
  transition: background 0.25s ease;
}

.site-scene__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  animation: site-blob-drift var(--dur, 18s) ease-in-out infinite alternate;
}

body.theme-light .site-scene__blob {
  opacity: 0.32;
}

.site-scene__blob--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, #5ee7df, #3b82f6);
  top: -200px;
  left: -150px;
  --dur: 22s;
}

.site-scene__blob--2 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, #b490f5, #ec4899);
  bottom: -200px;
  right: -100px;
  --dur: 17s;
  animation-delay: -8s;
}

.site-scene__blob--3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #ffd27f, #f7a8c4);
  top: 40%;
  left: 45%;
  --dur: 25s;
  animation-delay: -13s;
}

@keyframes site-blob-drift {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(60px, -40px, 0) scale(1.08);
  }
  66% {
    transform: translate3d(-40px, 60px, 0) scale(0.94);
  }
  100% {
    transform: translate3d(30px, 30px, 0) scale(1.04);
  }
}

.hero,
.section,
.section-alt,
.site-footer,
.portfolio-case-hero {
  background: transparent;
}

@media (max-width: 720px) {
  .site-scene__blob {
    filter: blur(64px);
  }

  .site-scene__blob--1 {
    width: 460px;
    height: 460px;
  }

  .site-scene__blob--2 {
    width: 400px;
    height: 400px;
  }

  .site-scene__blob--3 {
    width: 280px;
    height: 280px;
  }
}

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