/* ==========================================================================
   Transform8 — rendering hints

   Kept out of layout.css deliberately: nothing here changes how the site
   looks, only how much work the browser does before first paint. If a rule in
   this file ever has a visible effect, it is a bug in this file.
   ========================================================================== */

/* Skip layout, paint and style for sections that are off screen, and re-do
   them as they approach. The page is ~9600px tall against a ~900px viewport,
   so on load the browser is otherwise laying out roughly ten screens of
   content nobody has asked for yet.

   contain-intrinsic-size uses `auto <length>`: the length is only the
   first-pass estimate (measured at 1440x900), and `auto` tells the browser to
   remember each section's real height once it has rendered it, so the
   scrollbar settles after the first pass instead of jumping on every scroll.

   The lengths below are CONTENT-box heights. contain-intrinsic-size sizes the
   content box only — each section's vertical padding is added on top of it,
   regardless of box-sizing. Measuring the border box and pasting that in makes
   every placeholder overshoot by exactly one section's padding (260px on most
   of these, 540px on .mission), which is a scrollbar that visibly shrinks as
   you scroll rather than one that holds still.

   Two sections are deliberately NOT listed:

     .hero    — above the fold, always rendered; skipping it would only add
                work and risk delaying the LCP element.
     .labels  — and .footer, because both host the WebGL logo panels. Those
                size themselves from host.clientWidth via a ResizeObserver,
                and a skipped subtree does not report a usable one. The
                interaction is untested, and a mis-sized canvas is a visible
                bug where a missing optimisation is not.
   -------------------------------------------------------------------------- */

@supports (content-visibility: auto) {
  .about   { content-visibility: auto; contain-intrinsic-size: auto 1210px; }
  .mission { content-visibility: auto; contain-intrinsic-size: auto 180px; }
  .awards  { content-visibility: auto; contain-intrinsic-size: auto 455px; }
  .works   { content-visibility: auto; contain-intrinsic-size: auto 902px; }
  .blog    { content-visibility: auto; contain-intrinsic-size: auto 687px; }
}