feat(css): CSS-only scroll reveal system

[corneliusio]

Summary

Replaces the JS data-animate reveal system with a zero-JavaScript equivalent built on scroll-driven animations and container style queries. Any element can now declare its hidden state with enter:* utilities (any property, or the fade / slide-* / zoom presets) and transitions to its real styles when its parent enters the viewport.

How it works

• Ambient sensing, no trigger class. A single always-on rule makes the parent of any enter:* content a sensor (view() timeline flips an --in-view flag consumed by a container style query). Grids fire row by row automatically; sections fire off their innermost wrapper.
• scroll-latch = opt-in one-shot. A latch absorbs its parent's trigger duty and freezes its subtree's reveal state after the first run. Replay on re-entry is the default, consistently in every browser (native animation-trigger: play-once is deliberately not used to avoid Chrome-only divergence).
• Stagger system on the animating element: stagger, explicit stagger-N, cycled stagger-n-N, and stagger-fill, which cycles by the live column count of a grid-fill-* grid (computed in CSS from container units; tan(atan2()) division for Firefox compatibility).
• Composes with core timing utilities (duration-*, ease-*, delay-*) via their published variables; delay-* and gap-* get small shims to expose vars core doesn't.
• Support tiers via @supports: reduced-motion/print get static visible content; Firefox (no scroll-driven animations) gets a staggered load-time fade; Chrome and Safari 26 get full scroll-triggered reveals. Content is never left hidden on any tier, including print.

Migration

All templates using data-animate now use enter:* classes (fade-only, matching the old defaults). The now-dead data-animate JS module, its init.ts registration, and the [data-animate] base rule are left in place for a follow-up cleanup.

Verification

Behavior verified in Chromium (scroll-driven tier: hidden states, per-row firing, latch one-shot, replay, print/reduced-motion gating) and headless Firefox 154 (load-fade tier, sibling-index() stagger math, live column-count cycling at multiple widths). Known limitation: Firefox reveals are a generic fade because Gecko style queries ignore animation-driven custom properties.

[greptile-apps]

Greptile Summary

The PR replaces JavaScript-oriented animation markup with a CSS-only scroll-reveal system and migrates shared content templates to the new utilities.

• Adds ambient viewport sensing, replay and one-shot reveal modes, stagger controls, browser fallbacks, print handling, and reduced-motion behavior.
• Extends auto-fill grids with live column-count metadata for responsive staggering.
• Migrates block, header, and footer templates from data-animate attributes to enter:* utility classes.
• Removes the previously reported hard-coded third-party homepage image while preserving the CMS-backed homepage header and block stream.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains; the previously reported third-party homepage image has been removed from the current rendering path.

Important Files Changed

Filename	Overview
src/css/utilities/scroll-trigger.css	Introduces the scroll-driven reveal variant, viewport sensors, latch behavior, stagger utilities, and static or load-time fallback tiers.
src/css/utilities/grid-fill.css	Publishes responsive grid column and child-position metadata consumed by the reveal stagger utilities.
src/css/app.css	Adds the new scroll-trigger utility stylesheet to the public CSS entry point.
templates/blocks/_billboard.twig	Migrates billboard heading, excerpt, and optional action reveals to fixed CSS utility classes.
templates/blocks/_imageText.twig	Migrates image-and-text content reveals while preserving the existing content and layout contract.
templates/blocks/_text.twig	Migrates text block heading and rich-content reveals without changing empty-content guards.
templates/common/_footer.twig	Moves the shared footer reveal from its outer wrapper to the inner content container.
templates/headers/_header.twig	Migrates the standard entry header to the CSS-only fade reveal.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    T[Twig element with enter utility] --> P[Parent viewport sensor]
    P --> S{Browser support and user preference}
    S -->|Reduced motion or print| V[Content remains visible]
    S -->|No scroll timeline support| F[Load-time fallback fade]
    S -->|Scroll timeline support| Q[Container style query]
    Q --> R[Reveal on viewport entry]
    R --> L{Inside scroll-latch?}
    L -->|No| X[Replay on re-entry]
    L -->|Yes| O[Remain revealed after first entry]

Loading

_{Reviews (2): Last reviewed commit: "chore(templates): drop scroll reveal dem..." | Re-trigger Greptile}

[corneliusio]

@greptileai review