/* ========================================================================== assets/css/animations.css FAIL-SAFE PRINCIPLE (this is the whole point of this file's structure): Every [data-reveal] element is rendered fully visible, at rest, with NO CSS dependency on JavaScript running. The hidden→revealed treatment is only switched on by assets/js/main.js adding `js-anim-ready` to , which it does ONLY after confirming (a) the script itself executed successfully and (b) prefers-reduced-motion is not set. If the script fails to load, throws, or the visitor has reduced motion enabled, this stylesheet alone guarantees the page reads normally — nothing is ever stuck at opacity:0. ========================================================================== */ [data-reveal] { opacity: 1; transform: none; } html.js-anim-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity var(--clf-duration-slow) var(--clf-ease), transform var(--clf-duration-slow) var(--clf-ease); transition-delay: calc(var(--clf-reveal-delay, 0) * 90ms); will-change: opacity, transform; } html.js-anim-ready [data-reveal="fade"] { transform: none; /* Fade-only variant: no vertical travel, used for eyebrows/captions. */ } html.js-anim-ready [data-reveal].is-visible { opacity: 1; transform: none; } /* Column-rise signature element (the empathy-section divider): a literal * nod to the firm's column/pillar logo mark. Static and fully visible at * its resting height with no JS; when motion is enabled, it grows from 0 * to full height as it enters the viewport, rather than a generic fade. */ html.js-anim-ready .column-divider[data-reveal="column"] { height: 0; opacity: 1; transform: none; transition: height var(--clf-duration-slow) var(--clf-ease); } html.js-anim-ready .column-divider[data-reveal="column"].is-visible { height: 64px; } /* Ambient hover/press micro-interactions — these are fine to run * unconditionally since prefers-reduced-motion already collapses all * transition durations to ~0 globally (see the media query in style.css), * so this code path never needs its own duplicate guard. */ .button, .practice-card, .billboard-showcase__image { transition-property: transform, box-shadow, background-color; } /* Sticky header shadow-on-scroll, toggled by main.js adding .is-scrolled * to the header once the page has scrolled past a small threshold. Purely * decorative; the header is fully functional and styled without it. */ .site-header.is-scrolled { box-shadow: var(--clf-shadow-sm); } /* Mobile nav open/close transform already lives in main.css (transform: * translateX), since that's structural rather than a scroll-reveal effect, * and it must work even if this file fails to load for any reason. */