/* Crux V5 — Motion & interaction system (global, progressive enhancement) * A small, reusable layer that adds premium, purposeful motion WITHOUT ever * gating content behind animation. * * Contract: * - No-JS: nothing here hides content. The reveal state only applies under * `html.js` (set synchronously in ), so pages without JS render fully. * - Reduced motion: all reveal transforms/opacity are neutralized; content is * shown in its final state with no movement. * - No CLS: reveal animates only opacity + a small translate; layout box is * reserved at all times (no display toggling, no height animation). * * Consumes semantic tokens from tokens.css only (--motion-*, --ease-*). */ /* ---------- Scroll reveal (opt-in via [data-reveal]) ---------- */ /* Default (no JS): fully visible. */ [data-reveal] { opacity: 1; } html.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--motion-slow) var(--ease-standard), transform var(--motion-slow) var(--ease-standard); will-change: opacity, transform; } html.js [data-reveal].is-in { opacity: 1; transform: none; } /* Wave 2: release the compositor hint once the entrance has finished. reveal.js adds .is-settled on transitionend, so `will-change` is held only while the element is actually animating instead of for the life of the page. The painted result is identical. */ html.js [data-reveal].is-settled { will-change: auto; transition: none; } /* A slightly larger, calmer lift for section leads / hero blocks. */ html.js [data-reveal="lead"] { transform: translateY(20px); } /* Reduced motion: reveal instantly, never move. */ @media (prefers-reduced-motion: reduce) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; will-change: auto; } } /* Forced-colors: never let a reveal leave content invisible. */ @media (forced-colors: active) { html.js [data-reveal] { opacity: 1 !important; transform: none !important; } } /* ---------- Shared interaction utilities ---------- */ /* Subtle hover lift for interactive cards/links that opt in via .lift. */ .lift { transition: transform var(--motion-base) var(--ease-standard), box-shadow var(--motion-base) var(--ease-standard); } @media (hover: hover) { .lift:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .lift, .lift:hover { transition: none; transform: none; } }