/* ===================================================================== * s3i-motion.css * Session 3.I - Subtle scroll-reveal + active-nav highlight for the * public landing page. All rules scoped under .s3i- (and one scoped * nav modifier) to avoid collision with the page's inline styles * and with s3h-constitution.css. * * ACCESSIBILITY: every motion effect here is OFF when the visitor's * device requests reduced motion. With motion off, the page is fully * visible and correct - the animation is enhancement only. * ===================================================================== */ /* ---- Scroll-reveal: initial (pre-reveal) state ---- * Applied only after JS confirms IntersectionObserver support AND * the visitor has NOT requested reduced motion. The .s3i-motion-on * class is added to by the script; without it, nothing below * the first rule takes effect, so no-JS visitors see the full page. */ .s3i-motion-on .s3i-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); will-change: opacity, transform; } /* Revealed state - script adds .s3i-in when the element enters view */ .s3i-motion-on .s3i-reveal.s3i-in { opacity: 1; transform: none; } /* Staggered children: a group of cards cascades gently rather than * all arriving together. Delays are small and capped. */ .s3i-motion-on .s3i-reveal.s3i-in.s3i-d1 { transition-delay: 0.06s; } .s3i-motion-on .s3i-reveal.s3i-in.s3i-d2 { transition-delay: 0.12s; } .s3i-motion-on .s3i-reveal.s3i-in.s3i-d3 { transition-delay: 0.18s; } .s3i-motion-on .s3i-reveal.s3i-in.s3i-d4 { transition-delay: 0.24s; } /* ---- Active-nav highlight ---- * A quiet underline in PDA green on the header link whose section * is currently in view. Scoped to .btn-ghost so only the section * nav links are affected, not other buttons. */ .nav-actions .btn-ghost.s3i-nav-active { color: #1F7A6B; position: relative; } .nav-actions .btn-ghost.s3i-nav-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: #1F7A6B; border-radius: 2px; } /* When motion is allowed, the underline eases in rather than snapping. */ .s3i-motion-on .nav-actions .btn-ghost::after { content: ''; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 2px; background: #1F7A6B; border-radius: 2px; opacity: 0; transition: left 0.25s ease, right 0.25s ease, opacity 0.25s ease; } .s3i-motion-on .nav-actions .btn-ghost.s3i-nav-active::after { left: 14px; right: 14px; opacity: 1; } /* ---- Reduced-motion: hard off-switch ---- * Belt-and-braces. The script already skips motion when reduced * motion is requested, but if .s3i-motion-on is ever present, this * still neutralizes every reveal so nothing is hidden or moves. */ @media (prefers-reduced-motion: reduce) { .s3i-motion-on .s3i-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .s3i-motion-on .nav-actions .btn-ghost::after { transition: none !important; } }