Components

Reveals

The single .rv class behind every viewport-entry fade/translate animation on the site, plus the site-wide prefers-reduced-motion override.

Markup

Add the bare .rv class to any element that should fade and translate up into place the first time it scrolls into view. It appears throughout almost every component in this reference — stat rows, review cards, crew list items, whole sections:

<div class="stat rv"><span class="n" data-count="412">0</span><span class="l">PARTS ON EVERY TRUCK</span></div>

Before the reveal fires, the element sits at opacity: 0 translated down by --reveal-offset; adding the .on class transitions both properties back to their resting state.

Layer priming (performance)

A separate .rv-priming class (added and removed automatically by the JavaScript below, never added by hand in markup) promotes the element to its own compositor layer just before the reveal transition starts, rather than at the moment of promotion mid-scroll — the difference matters on image-heavy grids (Job Grid, Reviews), where late layer promotion can stall paint for a visible moment even though the DOM/CSS already says the element is visible.

prefers-reduced-motion

A single site-wide media query is the one factory-sanctioned use of !important in the whole stylesheet (documented inline in the partial, with the vendor-conflict justification the project's CSS rules require): it zeroes every animation and transition duration to effectively instant, disables smooth scrolling, forces every .rv element to its final visible state, and stops the hero marquee loop — for visitors who've asked their operating system to reduce motion.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.001ms !important; … }
  .rv { opacity: 1; transform: none; }
}

Javascript

On load, main.js collects every .rv element and, if the browser supports IntersectionObserver and the visitor hasn't requested reduced motion, watches each one with one of two observers: a standard lead-time margin for plain text elements, and a much larger lead-time margin for any .rv that wraps an <img> (since full-bleed photo layers are significantly more expensive to rasterize, and cards deep in a second or later grid section can reach the viewport faster than a fast scroll than the standard margin would cover). When an element crosses into view, the script applies .rv-priming a frame ahead of adding .on, so the compositor layer is ready before the transition begins. Under prefers-reduced-motion, or if IntersectionObserver isn't supported at all, every .rv element gets .on immediately with no animation. This is the same script responsible for the count-up numerals and the hero/page-hero line reveal — see each of those pages for their own specific behavior.

Next

That's every component. Continue to Utilities for the one responsive-overrides partial.