/* ========================================================================== 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; } .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"] { opacity: 1; transform: none; transition: none; transition-delay: 0ms; } }