/* ========================================================================== Scroll reveal The mobile nav's menu animation, generalised to page content: each block resolves out of a defocus as it fades and rises, blocks arriving together stepping one after another down the page. css/nav.css holds the original and the reasoning behind the curve; this file reuses both so the site has one idea of how things arrive. Three rules govern the whole thing: 1. Nothing here applies until js/reveal.js adds .js-reveal to and tags the blocks it has chosen with [data-reveal]. A visitor with no JavaScript, or one whose reveal.js failed to load, gets the page with every block already in place. The same gate the work grid uses. 2. The transition lives on the revealed state, never on the pending one. A block is hidden by a :not(.is-revealed) rule, so adding the class removes the declarations rather than overriding them and the block transitions back to whatever opacity, transform and filter it natively had. That matters on /work, where .index-row carries its own opacity for the hover dimming: a reveal that ended by asserting opacity: 1 would win the cascade forever and the dimming would never come back. 3. js/reveal.js strips [data-reveal] once the transition ends, so a block that has arrived carries no reveal styling at all. Rule 2 keeps the cascade honest during the animation; rule 3 makes it moot afterwards. Reduced motion needs no rule here. The pending state is keyed to [data-reveal], reveal.js declines to set it when the query matches, and nothing is ever hidden in the first place. ========================================================================== */ .js-reveal [data-reveal] { /* Per-block defaults, overridden by the tone rules below. A custom property rather than three variants of the same rule: the tones differ only in how far the block travels and how far out of focus it starts. */ --reveal-blur: 4px; --reveal-lift: 14px; } /* Qualified with html rather than left bare: /work declares its hover dimming as .index-list:hover .index-row:not(:hover), which ties this on specificity and sits in a later