body {
  isolation: isolate;
}

.ambient-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  contain: strict;
  pointer-events: none;
  background: linear-gradient(103deg, #0b0d10 0%, #0b0e11 45%, #0d1114 74%, #0b0d10 100%);
}

.ambient-background::before,
.ambient-background::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform-origin: 0% 50%;
}

.ambient-background::before {
  width: 76vw;
  height: clamp(7rem, 19vh, 13rem);
  inset-block-start: 39%;
  inset-inline-start: 31%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse at 98% 50%,
      rgb(226 234 236 / 0.26) 0%,
      rgb(126 182 183 / 0.15) 24%,
      transparent 55%
    ),
    linear-gradient(
      90deg,
      rgb(126 182 183 / 0.12) 0%,
      rgb(126 182 183 / 0.06) 40%,
      rgb(126 182 183 / 0.1) 75%,
      rgb(222 231 233 / 0.19) 100%
    );
  filter: blur(0.35rem);
  transform: translate3d(0, 0, 0) scaleX(0.02) scaleY(0.46);
}

.ambient-background::after {
  width: 68vw;
  height: clamp(4.5rem, 12vh, 8rem);
  inset-block-start: 43%;
  inset-inline-start: 41%;
  background: repeating-linear-gradient(
    178deg,
    transparent 0 0.52rem,
    rgb(207 221 224 / 0.075) 0.56rem,
    transparent 0.62rem 1.08rem
  );
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 68%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 68%, transparent 100%);
  transform: translate3d(0, 0, 0) scaleX(0.02) scaleY(0.7);
}

.brand-lockup,
.hero,
.site-footer {
  position: relative;
  z-index: 1;
}

.signal-released .ambient-background::before {
  animation: signal-release 1.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.signal-released .ambient-background::after {
  animation: signal-traces 1.5s cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

@keyframes signal-release {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0.02) scaleY(0.46);
  }

  18% {
    opacity: 0.46;
    transform: translate3d(0, 0, 0) scaleX(0.24) scaleY(0.72);
  }

  72% {
    opacity: 0.3;
    transform: translate3d(0, 0, 0) scaleX(1) scaleY(1);
  }

  100% {
    opacity: 0.32;
    transform: translate3d(0, 0, 0) scaleX(1.08) scaleY(0.84);
  }
}

@keyframes signal-traces {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0.02) scaleY(0.7);
  }

  24% {
    opacity: 0.26;
    transform: translate3d(0, 0, 0) scaleX(0.34) scaleY(0.86);
  }

  76% {
    opacity: 0.17;
    transform: translate3d(0, 0, 0) scaleX(1.02) scaleY(1);
  }

  100% {
    opacity: 0.12;
    transform: translate3d(0, 0, 0) scaleX(1.08) scaleY(0.82);
  }
}

@media (max-width: 47.99rem) {
  .ambient-background::before {
    width: 105vw;
    inset-block-start: 42%;
    inset-inline-start: 28%;
  }

  .ambient-background::after {
    width: 92vw;
    inset-block-start: 45%;
    inset-inline-start: 34%;
  }
}

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

  .ambient-background::before {
    opacity: 0.22;
    transform: translate3d(12%, 0, 0) scaleX(1) scaleY(0.86);
  }

  .ambient-background::after {
    opacity: 0;
  }
}