/* Shared background: deliberately not clipped to the hero section. */
.ambient-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #fff;
  contain: strict;
}
.ambient-motion {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 230vmax;
  height: 230vmax;
  margin: 0;
  translate: -50% -50%;
  background: center / cover url("20260926-monisapo-hero-squares-poster.jpg");
  opacity: 0.78;
  will-change: transform, opacity;
}
.ambient-motion video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ambient-motion video[hidden],
.ambient-scene canvas[hidden] {
  display: none;
}
.ambient-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ambient-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 42%,
    rgba(255, 255, 255, 0.86),
    rgba(255, 255, 255, 0.52) 42%,
    rgba(255, 255, 255, 0.1) 100%
  );
}
.landing-page main,
.landing-page > footer {
  position: relative;
  z-index: 1;
}
.landing-page .hero.scroll-film,
.landing-page .scroll-film-scene,
.landing-page .scenes,
.landing-page .section-flow {
  background: transparent;
}
@media (max-width: 600px) {
  .ambient-scene::after {
    background: radial-gradient(
      ellipse at 50% 40%,
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.6) 47%,
      rgba(255, 255, 255, 0.12)
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-motion {
    will-change: auto;
  }
}