:is(.homepage, .demo-page) .ambient-motion {
  --ambient-size: cover;
  --ambient-x: 50%;
  --ambient-y: 68%;

  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
  visibility: hidden;
}

:is(.homepage, .demo-page) [data-ambient-ready='true'] > .ambient-motion {
  visibility: visible;
}

.ambient-light-field {
  display: block;
  width: 100%;
  height: 100%;
}

.homepage .ambient-motion--hero {
  inset: calc(0px - var(--hero-background-shift)) 0 calc(var(--hero-background-shift) - 2px);
  opacity: 0.92;
  mask-image: linear-gradient(#000 82%, rgb(0 0 0 / 90%) 91%, transparent 100%);
}

.ambient-motion--hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(8 8 9 / 20%), transparent 62%);
}

.homepage .hero[data-ambient-ready='true'] .hero-bg {
  visibility: hidden;
}

.homepage .ambient-motion--product {
  --ambient-x: 66%;
  --ambient-y: 80%;

  inset: -80px auto -30px 50%;
  width: 100vw;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0.56;
  mask-image: linear-gradient(transparent, #000 30%, #000 65%, transparent);
}

.homepage .product-hero--interactive[data-ambient-ready='true']::before {
  visibility: hidden;
}

.homepage .ambient-motion--cta {
  --ambient-y: 78%;

  z-index: -2;
}

.homepage .cta-section[data-ambient-ready='true'] {
  background-image: none;
}

@media (width <= 700px) {
  .homepage .ambient-motion--hero {
    --ambient-x: 62%;
    --ambient-y: 100%;
  }

  .ambient-motion--hero::after {
    background: linear-gradient(180deg, rgb(7 7 8 / 12%), rgb(7 7 8 / 25%) 50%, transparent);
  }

  .homepage .ambient-motion--product {
    --ambient-x: 70%;
    --ambient-y: 45%;
    --ambient-size: auto 100%;

    opacity: 0.44;
  }
}