/* A/B: the canvas stays viewport-sized; renderers enlarge geometry, not pixels. */
.hero-fixed-background {
  --hero-background-opacity: 0.32;
  --hero-background-progress: 0;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: clip;
  pointer-events: none;
  /* Follow scrolling directly so the text never waits for a timed fade to finish. */
  opacity: calc(1 - var(--hero-background-progress) * (1 - var(--hero-background-opacity)));
}
.hero-fixed-background--plexus {
  --hero-background-opacity: 0.15;
}
.hero-fixed-background > [data-hero-surface] {
  position: absolute;
  inset: 0;
}
.hero-fixed-background > .hero__backdrop {
  mask-size: var(--hero-mask-size);
  mask-position: var(--hero-mask-position);
  mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at 12% 78%, rgb(0 0 0 / var(--hero-background-progress)) 5%, #000 72%);
}
@media (max-width: 1199px) {
  .hero-fixed-background > .hero__backdrop {
    mask-image: linear-gradient(#000 54%, rgb(0 0 0 / var(--hero-background-progress)) 79%);
  }
}
.hero[data-hero-background="fixed"] + .about {
  margin-block-start: var(--space-10);
}
@media (min-width: 1200px) {
  .hero[data-hero-background="fixed"] + .about {
    margin-block-start: var(--space-40);
  }
}
body.has-fixed-hero #page-main,
body.has-fixed-hero .footer-message {
  position: relative;
  z-index: 1;
}
/* Preserve photo/card/panel backgrounds; only the page's white wrappers clear. */
body.has-fixed-hero #page-main > section,
body.has-fixed-hero .footer-message {
  background: transparent;
}