/* The two proposals share the page, typography and motion lifecycle. */
.hero[data-hero-motion] {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  overflow-y: visible;
  background: var(--color-background);
}
.hero[data-hero-motion] .hero__inner {
  position: relative;
  z-index: 1;
}
.hero[data-hero-motion] + .about {
  background: transparent;
}
[data-hero-surface] {
  color: var(--color-hero-art);
  pointer-events: none;
}
.hero__canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero__canvas[hidden] {
  display: none;
}
.hero__backdrop {
  position: absolute;
  /* Extra drawing room lets the field continue below the hero boundary. */
  inset: -30% 0;
  z-index: 0;
  /* Leave quiet space beneath the copy without a visible panel. */
  mask-image: radial-gradient(ellipse at 12% 78%, transparent 5%, #000 72%);
}
@media (max-width: 1199px) {
  .hero__backdrop {
    mask-image: linear-gradient(#000 54%, transparent 79%);
  }
}