Animations

helpers/animations.css - small, reusable transitions instead of an animation library.

Fade In/Out & Motion

Class	Purpose
`.ncss-animate-fade-in` / `-fade-out`	Fade in/out
`.ncss-animate-slide-in-up/-down/-left/-right`	Slide in from a direction
`.ncss-animate-scale-in`	Grow in
`.ncss-animate-spin`	Endless rotation (e.g. loading icon)
`.ncss-animate-pulse`	Pulsing opacity
`.ncss-animate-shake`	Error shake
`.ncss-skeleton`	Shimmer loading state

<div class="ncss-card ncss-animate-fade-in">
  <div class="ncss-card-body">Fades in when inserted</div>
</div>

<span class="ncss-icon ncss-icon-close ncss-animate-spin"></span>

Micro-interactions & Transitions

`.ncss-hover-lift`	Lift on hover
`.ncss-hover-grow`	Slight grow on hover
`.ncss-press`	Tactile tap feedback (`:active`-based, see Touch & Mobile Viewports)
`.ncss-transition` / `-slow` / `-colors` / `-transform`	Generic transition utilities

<button type="button" class="ncss-btn ncss-btn--primary ncss-hover-lift">Lifts on hover</button>

All respect prefers-reduced-motion automatically.

GPU Compositing Hint

Opt-in, translateZ(0): .ncss-gpu-boost promotes an element onto its own compositor layer - against jank on frequently animated/scrolled elements with expensive repaints. Uses the standalone transform property, combinable with .ncss-hover-lift/-grow/-press (which use translate/scale, not transform) without conflict. Deliberately NOT applied automatically - every additional compositor layer costs graphics memory, use it targeted only where jank is actually visible. For an element that already uses transform itself (e.g. .ncss-hero--parallax), set the --ncss-gpu-hint token directly inside its own transform declaration instead - two transform declarations on the same element would otherwise overwrite rather than combine.