/* ============================================================ OTIS MOTION: shared scroll-reveal + drift layer Loaded by every page alongside notestead-motion.js. Contract: content is FULLY VISIBLE by default. The .ns-motion class is added to by notestead-motion.js only when JS runs, IntersectionObserver exists, and the visitor has not asked for reduced motion. Only then do pre-reveal states apply, so nothing can ever ship hidden. ============================================================ */ /* Pre-reveal state, gated on html.ns-motion */ html.ns-motion .ns-reveal { opacity: 0; transform: translateY(26px); filter: blur(7px); } /* Revealed state */ html.ns-motion .ns-reveal.ns-in { opacity: 1; transform: translateY(0); filter: blur(0); transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--reveal-delay, 0ms); } /* Belt and braces: if the media query flips after load, kill it all */ @media (prefers-reduced-motion: reduce) { html.ns-motion .ns-reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } } /* Floating hero cards: shadow eases while drifting */ [data-float] { will-change: transform; transition: box-shadow 200ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* ============================================================ ROTATING HERO WORD: progressive enhancement. Markup ships the first word inline, styled and crawlable. notestead-motion.js upgrades [data-rotate-words] only when JS runs and reduced motion is off; without it, nothing changes. ============================================================ */ .ns-rotate .ns-rotate-word { display: inline-block; } /* Upgraded state, applied by JS */ .ns-rotate[data-rotate-ready] { display: inline-block; white-space: nowrap; text-align: left; transition: width 340ms cubic-bezier(0.22, 0.61, 0.36, 1); } .ns-rotate[data-rotate-ready] .ns-rotate-word { transition: opacity 260ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 260ms cubic-bezier(0.22, 0.61, 0.36, 1); } .ns-rotate .ns-rotate-word.ns-word-out { opacity: 0; transform: translateY(-0.4em); filter: blur(5px); } .ns-rotate .ns-rotate-word.ns-word-pre { transition: none; opacity: 0; transform: translateY(0.4em); filter: blur(5px); } @media (prefers-reduced-motion: reduce) { .ns-rotate[data-rotate-ready], .ns-rotate[data-rotate-ready] .ns-rotate-word { transition: none !important; } .ns-rotate .ns-rotate-word { opacity: 1 !important; transform: none !important; filter: none !important; } }