Scroll & Visibility

helpers/scroll.css and helpers/visibility.css.

Scroll Behavior & Sticky

Class / Rule	Purpose
`html { scroll-behavior: smooth }` (reset.css)	Site-wide default for anchor clicks/`.scrollIntoView()` - applies only to its own scroll box, doesn't inherit, so individual components additionally set it themselves. Respects `prefers-reduced-motion` automatically
`.ncss-sticky` / `--bottom`	`position: sticky`
`.ncss-sticky-container`	Reference frame for a sticky element
`.ncss-scroll-snap-x` / `-y` + `.ncss-scroll-snap-item`	CSS Scroll Snap
`.ncss-hide-on-scroll`	Sticky header hides on scroll down / shows on scroll up - entirely JS-free via the native `scroll-state` container query, `@supports`-gated. Fallback script for Firefox/Safari: `js/hide-on-scroll-fallback.js`, see Web Awesome Bridge

<div class="ncss-sticky-container">
  <aside class="ncss-sticky">Stays visible while scrolling</aside>
</div>

Full-screen Sections

.ncss-snap-sections + .ncss-snap-section (+ --scrollable) - the classic "fullpage" pattern, section by section, entirely via Scroll Snap. .ncss-scroll-snap-x can be nested inside a section for a horizontal sub-flow.

<div class="ncss-snap-sections">
  <section class="ncss-snap-section">Section 1</section>
  <section class="ncss-snap-section">Section 2</section>
</div>

For pinned, overlapping cards instead of separate sections: see Component Reference (components/scroll-stack.css) - a different technique, there each section gets NO scroll segment of its own, instead a stage stays pinned.

Visibility

helpers/visibility.css: .ncss-hidden, .ncss-invisible, .ncss-print-only, .ncss-screen-only, .ncss-reveal-on-hover, .ncss-hide-below-md/-from-md (a fixed viewport breakpoint) plus their container-based counterparts .ncss-hide-below-container-*/-from-container-* (react to the width of the parent .ncss-container, not the viewport - details under Layout).