/* Full-page gradient blobs — distributed along document height */

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--parallax-h, 100%);
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.parallax-bg__back {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.parallax-bg__layer {
  position: absolute;
  top: var(--orb-top, 0%);
  left: var(--orb-left, auto);
  right: var(--orb-right, auto);
  z-index: 1;
  will-change: transform;
}

.parallax-bg__back .parallax-bg__layer {
  z-index: 0;
}

.parallax-bg__orb {
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.72;
  width: min(58vw, 32rem);
  height: min(58vw, 32rem);
}

.parallax-bg__orb--sm {
  width: min(42vw, 22rem);
  height: min(42vw, 22rem);
}

.parallax-bg__orb--lg {
  width: min(68vw, 38rem);
  height: min(68vw, 38rem);
}

.parallax-bg__orb--xs {
  width: min(26vw, 13rem);
  height: min(26vw, 13rem);
  filter: blur(44px);
  opacity: 0.5;
}

.parallax-bg__orb--cyan {
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.7) 0%,
    rgba(34, 211, 238, 0.22) 42%,
    transparent 72%
  );
}

.parallax-bg__orb--indigo {
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.65) 0%,
    rgba(129, 140, 248, 0.2) 45%,
    transparent 74%
  );
}

.parallax-bg__orb--purple {
  background: radial-gradient(
    circle,
    rgba(192, 132, 252, 0.6) 0%,
    rgba(192, 132, 252, 0.18) 44%,
    transparent 76%
  );
}

.parallax-bg__orb--blue {
  background: radial-gradient(
    circle,
    rgba(56, 189, 248, 0.62) 0%,
    rgba(56, 189, 248, 0.2) 42%,
    transparent 72%
  );
}

.parallax-bg__orb--soft {
  opacity: 0.58;
  background: radial-gradient(
    circle,
    rgba(96, 165, 250, 0.55) 0%,
    rgba(96, 165, 250, 0.16) 40%,
    transparent 70%
  );
}

/* Content above the wash */
body > main,
body > .navigation,
body > .footer {
  position: relative;
  z-index: 1;
}

@media (max-width: 899px) {
  .parallax-bg__orb {
    filter: blur(52px);
    opacity: 0.6;
  }

  .parallax-bg__orb--xs {
    filter: blur(36px);
    opacity: 0.42;
  }

  .parallax-bg__orb--hide-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .parallax-bg__layer {
    transform: none !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .parallax-bg {
    display: none;
  }
}