/* ========================================================================== Sphinx Labs — scroll-in animations Driven by js/main.js (IntersectionObserver). Deliberately understated: a short fade with a small lift, nothing that draws attention to itself. ========================================================================== */ /* The `.js` class is set by an inline script in . Without it these rules never apply — so if JS fails to load, everything stays visible instead of being stranded at opacity 0. */ .js [data-animate] { opacity: 0; transition: opacity 0.6s ease-out, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); /* JS sets --delay per element to stagger siblings. */ transition-delay: var(--delay, 0ms); will-change: opacity, transform; } /* 18px is enough to read as movement without shifting the layout visually. */ .js [data-animate="fade-up"] { transform: translateY(18px); } .js [data-animate="fade"] { transform: none; } /* Cards arriving slightly under-scaled read as settling into place. Kept at 0.96 — any smaller and it becomes a "pop", which is the cheap version of this effect. */ .js [data-animate="scale-in"] { transform: scale(0.96); } /* Headings reveal behind a clip-path mask that lifts from the baseline. The conventional way to stagger a text reveal is to split the heading into per-word spans at runtime — but that rewrites heading DOM, which is exactly what this redesign promised not to do. A mask is visually equivalent and leaves the markup, and therefore the SEO, untouched. */ .js [data-animate="reveal-text"] { opacity: 1; transform: none; clip-path: inset(0 0 105% 0); transition: clip-path 0.9s var(--ease-out); transition-delay: var(--delay, 0ms); } .js [data-animate="reveal-text"].is-inview { clip-path: inset(-20% -5% -20% -5%); } .js [data-animate].is-inview { opacity: 1; transform: none; } /* Once it has played, drop the compositing hint. */ .js [data-animate].is-inview { will-change: auto; } /* -------------------------------------------------------------------------- Reduced motion — no movement, no fade, no delay. Content is simply there. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js [data-animate], .js [data-animate="fade-up"], .js [data-animate="scale-in"], .js [data-animate="reveal-text"] { opacity: 1; transform: none; clip-path: none; transition: none; transition-delay: 0ms; } }