:root {
  --ambient-base: 6 14 15;
  --ambient-glow-one: 18 38 34;
  --ambient-glow-two: 24 34 47;
}

body.has-ambient-scroll {
  position: relative;
  isolation: isolate;
  background: transparent;
}

.ambient-scroll-background {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  background: rgb(var(--ambient-base));
  pointer-events: none;
  isolation: isolate;
}

.ambient-scroll-cloud {
  position: absolute;
  display: block;
  border-radius: 50%;
  opacity: .58;
  transform-origin: center;
  will-change: transform;
}

.ambient-scroll-cloud-one {
  top: -34%;
  left: -30%;
  width: 112%;
  height: 105%;
  background: radial-gradient(ellipse at center, rgb(var(--ambient-glow-one) / 82%) 0%, rgb(var(--ambient-glow-one) / 48%) 27%, transparent 70%);
}

.ambient-scroll-cloud-two {
  right: -34%;
  bottom: -36%;
  width: 118%;
  height: 112%;
  background: radial-gradient(ellipse at center, rgb(var(--ambient-glow-two) / 76%) 0%, rgb(var(--ambient-glow-two) / 42%) 31%, transparent 72%);
}

.ambient-scroll-cloud-three {
  top: 17%;
  left: 22%;
  width: 72%;
  height: 76%;
  background: radial-gradient(ellipse at center, rgb(var(--ambient-glow-one) / 26%) 0%, rgb(var(--ambient-glow-two) / 16%) 38%, transparent 74%);
  mix-blend-mode: soft-light;
}

.ambient-scroll-background::before {
  position: absolute;
  inset: -20%;
  background-image:
    radial-gradient(circle at 25% 25%, rgb(255 255 255 / 14%) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 75%, rgb(0 0 0 / 14%) 0 1px, transparent 1px);
  background-size: 38px 38px, 47px 47px;
  content: "";
  opacity: .025;
  transform: rotate(7deg);
}

.ambient-scroll-background::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(125deg, rgb(255 255 255 / 4%), transparent 42%, rgb(0 0 0 / 8%));
  content: "";
}

.ambient-scroll-progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgb(255 255 255 / 12%);
  pointer-events: none;
  mix-blend-mode: difference;
}

.ambient-scroll-progress span {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

body.has-ambient-scroll .achievement-strip { background: rgb(7 19 15 / 76%); }
body.has-ambient-scroll .section-copy { background: linear-gradient(135deg, rgb(11 33 26 / 88%), rgb(2 7 6 / 82%)); }
body.has-ambient-scroll .people-section { background: rgb(247 247 243 / 88%); }
body.has-ambient-scroll .legacy-section { background: radial-gradient(circle at 18% 110%, rgb(28 111 74 / 42%), transparent 48%), rgb(6 20 15 / 76%); }
body.has-ambient-scroll .site-footer { background: rgb(10 10 10 / 90%); }
body.has-ambient-scroll .site-footer-partners { background: rgb(3 3 3 / 68%); }

@media (prefers-reduced-motion: reduce) {
  .ambient-scroll-cloud,
  .ambient-scroll-progress span { will-change: auto; }
}