/* Ossa scroll reveal ------------------------------------------------------ Section content sits 12px low and faded, then settles as it scrolls into view. Deliberately small: a settle, not a slide. The hidden state only applies once ossa-motion.js has put .ossa-motion on , so if the script fails to load, is blocked, or throws, every word is on screen exactly as before. Nothing here changes layout: opacity and transform only, and the transform ends at none. ---------------------------------------------------------------------- */ /* Start state. Structural selectors, not a JS-added class, so the rule is already in force the moment the runtime paints a section. No flash. */ .ossa-motion .ossa-container > *, .ossa-motion [data-band-label] > *, .ossa-motion [data-hero-copy] > * { opacity: 0; transform: translateY(12px); } /* The navbar is fixed furniture, not content. It never hides. */ .ossa-motion [data-navbar-wrap] .ossa-container > * { opacity: 1; transform: none; } /* Settled state. Same specificity as the start rule, so source order wins. */ .ossa-motion [data-ossa-reveal="in"] > * { opacity: 1; transform: none; transition: opacity 560ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 560ms cubic-bezier(0.22, 0.61, 0.36, 1); } /* A short stagger down the block so a heading lands before its paragraph. Capped at four steps: past that it reads as a queue, not a page. */ .ossa-motion [data-ossa-reveal="in"] > :nth-child(2) { transition-delay: 70ms; } .ossa-motion [data-ossa-reveal="in"] > :nth-child(3) { transition-delay: 140ms; } .ossa-motion [data-ossa-reveal="in"] > :nth-child(n+4) { transition-delay: 210ms; } /* Anyone who has asked for less movement gets none of it. Printing gets the whole page whatever the script did or did not manage to reach. */ @media (prefers-reduced-motion: reduce), print { .ossa-motion .ossa-container > *, .ossa-motion [data-band-label] > *, .ossa-motion [data-hero-copy] > * { opacity: 1; transform: none; transition: none; } }