.ambient {
  position: fixed;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  background: var(--hag-ivory);
}

.ambient__canvas {
  position: absolute;
  z-index: -1;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 800ms ease;
}

.ambient.is-webgl .ambient__canvas {
  opacity: 1;
}

.ambient.is-webgl::before,
.ambient.is-webgl::after,
.ambient.is-webgl .ambient__base,
.ambient.is-webgl .ambient__field,
.ambient.is-webgl .ambient__light-beams {
  opacity: 0;
  animation: none;
}

.ambient::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: -24%;
  pointer-events: none;
  background: linear-gradient(
    150deg,
    transparent 38%,
    rgb(255 255 255 / 0.5) 46%,
    rgb(255 247 246 / 0.42) 52%,
    transparent 60%
  );
  filter: blur(42px);
  will-change: transform;
  animation: drift-light 24s cubic-bezier(0.42, 0, 0.58, 1) -13s infinite alternate;
}

.ambient::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 34%;
  left: -8%;
  width: 108vmax;
  height: 12vmax;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(255 255 255 / 0.68) 0 14%, rgb(255 250 248 / 0.36) 34%, transparent 55%);
  filter: blur(26px);
  transform: rotate(12deg);
  transform-origin: center;
  will-change: transform;
  animation: drift-highlight 21s cubic-bezier(0.42, 0, 0.58, 1) -7s infinite alternate;
}

.ambient__base,
.ambient__field,
.ambient__light-beams,
.ambient__grain {
  position: absolute;
  pointer-events: none;
}

.ambient__base {
  z-index: -3;
  inset: -12%;
  background:
    radial-gradient(ellipse at 2% 1%, rgb(72 150 190 / 0.66), transparent 39%),
    radial-gradient(ellipse at 98% 1%, rgb(0 35 77 / 0.76), transparent 45%),
    radial-gradient(ellipse at 70% 48%, rgb(151 127 177 / 0.62), rgb(200 187 204 / 0.42) 31%, transparent 59%),
    radial-gradient(ellipse at 2% 100%, rgb(213 41 38 / 0.82), transparent 43%),
    radial-gradient(ellipse at 92% 78%, rgb(152 174 204 / 0.62), transparent 44%),
    linear-gradient(145deg, #79bfdc 0%, #bfd5df 32%, #c1b0cd 52%, #dfbdc9 69%, #b8c4d8 100%);
}

.ambient__field {
  z-index: -1;
  border-radius: 47% 53% 58% 42% / 55% 43% 57% 45%;
  filter: blur(clamp(70px, 8vw, 138px));
  transform-origin: center;
  will-change: transform;
}

.ambient__field--navy {
  top: -39vmax;
  right: -17vmax;
  width: 88vmax;
  height: 83vmax;
  opacity: 0.98;
  background: radial-gradient(ellipse at 58% 55%, #001a3b 0 28%, var(--hag-blue) 50%, transparent 74%);
  animation: drift-navy 21s cubic-bezier(0.45, 0.05, 0.55, 0.95) -9s infinite alternate;
}

.ambient__field--blue {
  top: -37vmax;
  left: -29vmax;
  width: 83vmax;
  height: 76vmax;
  opacity: 0.84;
  background: radial-gradient(ellipse at 55% 56%, #48a9d1 0 23%, #78c5df 48%, transparent 74%);
  animation: drift-blue 19s cubic-bezier(0.42, 0, 0.58, 1) -17s infinite alternate;
}

.ambient__field--sky {
  top: 9%;
  left: -22vmax;
  width: 67vmax;
  height: 58vmax;
  opacity: 0.5;
  background: radial-gradient(ellipse at center, #8dcce4 0 22%, rgb(152 174 204 / 0.74) 50%, transparent 76%);
  mix-blend-mode: multiply;
  animation: drift-sky 22s cubic-bezier(0.37, 0, 0.63, 1) -5s infinite alternate;
}

.ambient__field--lavender {
  z-index: 0;
  top: 20%;
  right: -5vmax;
  width: 68vmax;
  height: 52vmax;
  opacity: 0.82;
  background: radial-gradient(ellipse at 45% 48%, #75548f 0 17%, #9f80ae 39%, rgb(200 187 204 / 0.88) 57%, transparent 75%);
  animation: drift-lavender 25s cubic-bezier(0.4, 0, 0.6, 1) -24s infinite alternate;
}

.ambient__field--pink {
  left: 19%;
  bottom: -42vmax;
  width: 78vmax;
  height: 70vmax;
  opacity: 0.82;
  background: radial-gradient(ellipse at 48% 39%, var(--hag-pale-pink) 0 23%, rgb(227 195 204 / 0.92) 46%, transparent 74%);
  animation: drift-pink 21s cubic-bezier(0.38, 0.04, 0.62, 0.96) -11s infinite alternate;
}

.ambient__field--red {
  left: -23vmax;
  bottom: -54vmax;
  width: 83vmax;
  height: 78vmax;
  opacity: 0.94;
  background: radial-gradient(ellipse at 53% 43%, var(--hag-deep-red) 0 10%, var(--hag-red) 36%, rgb(213 41 38 / 0.64) 58%, transparent 76%);
  animation: drift-red 18s cubic-bezier(0.45, 0, 0.55, 1) -19s infinite alternate;
}

.ambient__light-beams {
  z-index: 1;
  inset: -10%;
  opacity: 0.68;
  background:
    radial-gradient(circle at 24% 7%, rgb(255 255 255 / 0.88) 0 1%, rgb(255 255 255 / 0.34) 4%, transparent 11%),
    conic-gradient(
      from 0deg at 24% 7%,
      transparent 0deg 124deg,
      rgb(255 255 255 / 0.38) 130deg,
      rgb(255 255 255 / 0.58) 136deg,
      transparent 143deg 167deg,
      rgb(255 248 244 / 0.25) 172deg,
      transparent 178deg 360deg
    );
  filter: blur(22px);
  mix-blend-mode: screen;
  transform-origin: 24% 7%;
  will-change: transform, opacity;
  animation: drift-beams 14s cubic-bezier(0.42, 0, 0.58, 1) -4s infinite alternate;
}

.ambient__grain {
  z-index: 2;
  inset: 0;
  opacity: 0.52;
  background: url("../images/common/hag-grain-overlay.webp") center / cover no-repeat;
  mix-blend-mode: multiply;
}

.ambient.is-webgl .ambient__grain {
  opacity: 0.52;
  background-size: cover;
  mix-blend-mode: multiply;
}

.ambient--clean::before,
.ambient--clean::after,
.ambient--clean .ambient__light-beams {
  display: none;
}

@keyframes drift-navy {
  0% {
    transform: translate3d(0, 0, 0) scale(1) rotate(-5deg);
  }
  48% {
    transform: translate3d(-7vw, 6vh, 0) scale(1.07) rotate(5deg);
  }
  100% {
    transform: translate3d(-2vw, 12vh, 0) scale(0.95) rotate(-2deg);
  }
}

@keyframes drift-blue {
  0% {
    transform: translate3d(-2vw, -3vh, 0) scale(1.02) rotate(4deg);
  }
  52% {
    transform: translate3d(8vw, 5vh, 0) scale(0.94) rotate(-6deg);
  }
  100% {
    transform: translate3d(5vw, 12vh, 0) scale(1.07) rotate(3deg);
  }
}

@keyframes drift-sky {
  0% {
    transform: translate3d(-4vw, 3vh, 0) scale(0.96) rotate(-4deg);
  }
  46% {
    transform: translate3d(8vw, -6vh, 0) scale(1.07) rotate(6deg);
  }
  100% {
    transform: translate3d(12vw, 7vh, 0) scale(1) rotate(-3deg);
  }
}

@keyframes drift-lavender {
  0% {
    transform: translate3d(3vw, 3vh, 0) scale(1.04) rotate(4deg);
  }
  50% {
    transform: translate3d(-8vw, -8vh, 0) scale(0.94) rotate(-6deg);
  }
  100% {
    transform: translate3d(-4vw, -13vh, 0) scale(1.04) rotate(3deg);
  }
}

@keyframes drift-pink {
  0% {
    transform: translate3d(-3vw, 2vh, 0) scale(1.03) rotate(-3deg);
  }
  55% {
    transform: translate3d(6vw, -10vh, 0) scale(0.95) rotate(6deg);
  }
  100% {
    transform: translate3d(12vw, -5vh, 0) scale(1.07) rotate(-2deg);
  }
}

@keyframes drift-red {
  0% {
    transform: translate3d(2vw, 4vh, 0) scale(0.96) rotate(3deg);
  }
  47% {
    transform: translate3d(-8vw, -5vh, 0) scale(1.08) rotate(-7deg);
  }
  100% {
    transform: translate3d(-12vw, -11vh, 0) scale(0.98) rotate(2deg);
  }
}

@keyframes drift-light {
  0% {
    transform: translate3d(-2vw, -2vh, 0) rotate(-2deg) scale(1.02);
  }
  52% {
    transform: translate3d(5vw, 3vh, 0) rotate(3deg) scale(0.97);
  }
  100% {
    transform: translate3d(2vw, 8vh, 0) rotate(-2deg) scale(1.04);
  }
}

@keyframes drift-highlight {
  0% {
    transform: translate3d(-3vw, -2vh, 0) rotate(10deg) scale(1.03);
  }
  50% {
    transform: translate3d(5vw, 5vh, 0) rotate(15deg) scale(0.97);
  }
  100% {
    transform: translate3d(7vw, -2vh, 0) rotate(10deg) scale(1.04);
  }
}

@keyframes drift-beams {
  0% {
    opacity: 0.42;
    transform: translate3d(-4vw, -2vh, 0) rotate(-2deg) scale(1.02);
  }
  48% {
    opacity: 0.62;
    transform: translate3d(4vw, 3vh, 0) rotate(2deg) scale(1.06);
  }
  100% {
    opacity: 0.48;
    transform: translate3d(7vw, -1vh, 0) rotate(-1deg) scale(0.98);
  }
}

@media (max-width: 640px) {
  .ambient__field {
    filter: blur(clamp(54px, 12vw, 90px));
  }

  .ambient__field--navy {
    top: -24vmax;
    right: -47vmax;
    width: 96vmax;
    height: 92vmax;
  }

  .ambient__field--blue {
    top: -12vmax;
    left: -53vmax;
    width: 96vmax;
    height: 88vmax;
  }

  .ambient__field--sky {
    top: 18%;
    left: -35vmax;
    width: 88vmax;
    height: 72vmax;
  }

  .ambient__field--pink {
    left: 5vmax;
    bottom: -34vmax;
    width: 92vmax;
    height: 86vmax;
  }

  .ambient__field--lavender {
    top: 31%;
    right: -32vmax;
    width: 82vmax;
    height: 76vmax;
  }

  .ambient__field--red {
    left: -52vmax;
    bottom: -48vmax;
    width: 96vmax;
    height: 92vmax;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ambient::before,
  .ambient::after,
  .ambient__light-beams,
  .ambient__field {
    animation: none;
  }
}



.ambient {
  position: fixed;
  z-index: 0;
  opacity: var(--canvas-progress);
  transition: opacity 260ms ease-out;
}

.ambient__grain {
  background-image: url("../images/common/hag-grain-overlay.webp");
}

@media (prefers-reduced-motion: reduce) {

  .ambient {
    transition: none;
  }
}