/* Continue the homepage hero's animated surface behind the fixed header. */
.homepage .nav.home-nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  isolation: isolate;
}
.homepage .header-ambient-window {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  background: var(--bg);
}
.homepage .header-ambient-window .hero-ambient {
  inset: 0 0 auto;
  height: var(--header-hero-height, 700px);
  z-index: 0;
  background: var(--bg);
}

/* A neutral opening, followed by alternating blue and gold corner waves. */
.homepage #intro::before {
  height: 100%;
  background: var(--bg);
}
.homepage :is(#intro, .header-ambient-window) .hero-ambient::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--bg) 0 18%, transparent 65%);
}
.homepage :is(#intro, .header-ambient-window) .hero-blob {
  width: min(70vw, 680px);
  height: auto;
  aspect-ratio: 1;
  filter: blur(32px);
  animation-delay: 5s;
  animation-fill-mode: both;
}
.homepage :is(#intro, .header-ambient-window) .hero-blob-1 {
  left: 0;
  top: 0;
  animation-name: homeBlueWave;
}
.homepage :is(#intro, .header-ambient-window) .hero-blob-2 {
  left: 0;
  top: 0;
  width: min(58vw, 560px);
  animation-name: homeBlueWave;
}
.homepage :is(#intro, .header-ambient-window) .hero-blob-3 {
  display: none;
}
.homepage :is(#intro, .header-ambient-window) .hero-blob-4 {
  right: 0;
  bottom: 0;
  animation-name: homeGoldWave;
}
@keyframes homeBlueWave {
  0%,
  66.67%,
  100% {
    transform: translate(-55%, -55%) scale(0.8);
    border-radius: 42% 58% 61% 39% / 51% 44% 56% 49%;
    opacity: 0.45;
  }
  16.67%,
  50% {
    transform: translate(-8%, -8%) scale(1.2);
    border-radius: 58% 42% 39% 61% / 44% 58% 42% 56%;
    opacity: 1;
  }
}
@keyframes homeGoldWave {
  0%,
  16.67%,
  50%,
  100% {
    transform: translate(55%, 55%) scale(0.8);
    border-radius: 48% 52% 55% 45% / 45% 52% 48% 55%;
    opacity: 0.45;
  }
  66.67%,
  83.33% {
    transform: translate(8%, 8%) scale(1.2);
    border-radius: 55% 45% 45% 55% / 52% 45% 55% 48%;
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .homepage :is(#intro, .header-ambient-window) .hero-blob-1,
  .homepage :is(#intro, .header-ambient-window) .hero-blob-2 {
    transform: translate(-55%, -55%) scale(0.8);
    opacity: 0.45;
  }
  .homepage :is(#intro, .header-ambient-window) .hero-blob-4 {
    transform: translate(55%, 55%) scale(0.8);
    opacity: 0.45;
  }
}

/* Anchor dividers meet the fixed header without an extra strip of space. */
.homepage #solution,
.homepage #outcomes,
.homepage #journey,
.homepage #company,
.homepage #contact {
  scroll-margin-top: var(--navigation-height, 62px);
}