/* Scroll performance.
 *
 * These pages run 100+ decorative animations and dozens of large blurs. By
 * default the browser keeps styling, painting and ANIMATING all of them even
 * when they are several screens away, which is what makes a long marketing page
 * feel heavy on a mid-range laptop.
 *
 * content-visibility lets the browser skip rendering work for a section until it
 * approaches the viewport. `contain-intrinsic-size: auto <fallback>` keeps the
 * scrollbar honest: the browser uses the fallback before a section has ever been
 * rendered, then remembers its real height, so nothing jumps on the way back up.
 */
section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* A scroll-driven stage must never be skipped — its whole job is to react to
   scroll position while pinned, so it has to stay live even when most of it
   sits outside the viewport.
 *
 * This list was three entries and needed to be all of them. Every stage
 * computes its progress as `-rect.top / (rect.height - viewportHeight)`, so a
 * skipped stage reports the 700px intrinsic fallback instead of its real
 * height and the arithmetic breaks: bam.html's stat stage is 420vh (2424px),
 * which makes the divisor 123 instead of 1847 and races the whole choreography
 * to its end within a few pixels of scrolling. Measured: 7 of 9 off-screen
 * sections on home.html were reporting exactly 700px.
 *
 * (In-page anchors were checked separately and land correctly either way —
 * the browser re-resolves the target once layout settles.)
 *
 * Attribute selectors cannot wildcard a name, so this is enumerated. Grep for
 * `-stage="1"` when adding a new one. */
[data-screen-stage="1"],
[data-iv-stage="1"],
[data-st-stage="1"],
[data-wk-stage="1"],
[data-hw-stage="1"],
[data-fx-stage="1"],
[data-cta-stage="1"],
[data-mb-stage="1"],
[data-m-mb-stage="1"],
[data-night-stage="1"],
[data-story-stage="1"],
[data-beacon-stage="1"],
[data-nav-wrap="1"] {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

/* Decorative blur layers are the most expensive thing on the page: cost climbs
   with radius, and these sit on full-viewport boxes. Nothing above ~64px reads
   differently once it is this soft, so cap the outliers. */
[data-bmglow="1"] {
  filter: blur(64px) !important;
}

@media (prefers-reduced-motion: reduce) {
  [data-bmglow="1"],
  [data-stars="1"],
  [data-bmgrain="1"] {
    animation: none !important;
  }
}