feat(utilities): add `content-visibility: auto` utility for long-page performance

[jackgranatowski]

Summary

content-visibility: auto tells the browser to skip rendering off-screen content until it enters the viewport. On long pages (product listings, long landings) this can dramatically reduce initial render time.

The framework already uses contain extensively (31 uses confirmed in codebase), so the containment foundation is in place.

Proposed change

Add to optional/utilities.css:

.sf-cv-auto {
  content-visibility: auto;
  /* contain-intrinsic-size prevents layout shift when off-screen content
     has no known dimensions. 'auto' caches the last-rendered size.
     500px is a reasonable default; override per element as needed. */
  contain-intrinsic-size: auto 500px;
}

Optionally expose the intrinsic size as a token override:

.sf-cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto var(--sf-cv-intrinsic-size, 500px);
}

What to skip

Do not add a will-change utility. will-change creates GPU compositing layers preemptively — it frequently hurts performance when applied broadly (memory overhead, compositing cost). It should only be set on elements that are actively about to animate, applied/removed by component JS, not as a static utility class.

Browser support

Good across Chrome, Edge, Firefox, Safari.