/* ============================================================ RECIPE: scroll-reveal Entrance animations driven by IntersectionObserver. Usage:
fade + rise (default)
slide in from the left
slide in from the right
settle in from slightly small
wipe up from behind a mask (for display type)
stagger every [data-reveal] child inside ↳ optional: data-reveal-stagger="60" (ms between children, default 40) Pair with reveal.js. Scoped to [data-reveal] so it can drop into any page. ============================================================ */ /* ── TEMPO IS OWNED BY THE THEME, NOT BY THIS FILE ───────────── This recipe deliberately declares NO :root values. It reads tokens with fallbacks, so whatever your theme sets in its own :root always wins — regardless of stylesheet order. Set these once, in your theme's :root, chosen by the REGISTER (patterns.md §6.1b — tempo is a register decision, like colour and type): | Tempo | --dur-entrance | stagger | Register | |-----------|----------------|---------|---------------------------------| | quick | 300ms | 30ms | botanical · minimal · editorial | | measured | 600–800ms | 60–80ms | luxury · hospitality | | cinematic | 1000–1200ms | 120ms | dramatic · immersive | ONE tempo per page. Setting --ease or --dur-entrance on an individual component is still wrong — that was the correct half of the old rule. The fallbacks below are the cinematic band, deliberately: if a theme forgets to choose, it gets the slow, safe one. ------------------------------------------------------------ */ /* ── Base: hidden until observed ──────────────────────────── */ [data-reveal] { opacity: 0; transition: opacity var(--dur-entrance, 1.2s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)), transform var(--dur-entrance, 1.2s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--reveal-delay, 0ms); will-change: opacity, transform; } [data-reveal=""], [data-reveal="up"] { transform: translateY(var(--reveal-rise, 32px)); } [data-reveal="left"] { transform: translateX(calc(var(--reveal-rise, 32px) * -1.4)); } [data-reveal="right"] { transform: translateX(calc(var(--reveal-rise, 32px) * 1.4)); } [data-reveal="scale"] { transform: scale(0.955); } /* ── Revealed ─────────────────────────────────────────────── */ [data-reveal].is-revealed { opacity: 1; transform: none; } /* Once it has landed, stop promoting the layer — keeps text crisp. */ [data-reveal].is-revealed { will-change: auto; } /* ── Mask wipe: for display type ────────────────────────────── The line rises out from behind its own bounding box. Needs an inner span; reveal.js injects one automatically. ------------------------------------------------------------ */ [data-reveal="mask"] { opacity: 1; transform: none; overflow: hidden; /* Descenders (g, y, p) get clipped by overflow:hidden — pad and pull back. */ padding-bottom: 0.12em; margin-bottom: -0.12em; } [data-reveal="mask"] > .reveal-mask-inner { display: block; transform: translateY(105%); transition: transform var(--dur-entrance, 1.2s) var(--ease, cubic-bezier(0.16, 1, 0.3, 1)); transition-delay: var(--reveal-delay, 0ms); } [data-reveal="mask"].is-revealed > .reveal-mask-inner { transform: translateY(0); } /* ── Accessibility: the off switch. Non-negotiable. ────────── */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal="mask"] > .reveal-mask-inner { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ── No-JS fallback ─────────────────────────────────────────── reveal.js sets .reveal-ready on . Without it, everything stays visible rather than invisible-forever. ------------------------------------------------------------ */ html:not(.reveal-ready) [data-reveal] { opacity: 1; transform: none; } html:not(.reveal-ready) [data-reveal="mask"] > .reveal-mask-inner { transform: none; }