/* ========================================================================== Motion Scroll-reveal for the "What I do" grid + hover/press feedback on controls. Loaded after the theme so these rules win without !important. ========================================================================== */ :root { /* Strong ease-out. Built-in CSS easings are too weak to read as intentional. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --reveal-duration: 250ms; } /* -------------------------------------------------------------------------- Scroll reveal Scoped to .js-reveal, which an inline script adds only when IntersectionObserver exists. Without JS the class is never added, these rules never match, and the content renders normally. Content is never hidden by CSS alone. -------------------------------------------------------------------------- */ .js-reveal .reveal { opacity: 0; transform: translateY(12px); } .js-reveal .reveal.is-visible { opacity: 1; transform: none; transition: opacity var(--reveal-duration) var(--ease-out), transform var(--reveal-duration) var(--ease-out); } /* -------------------------------------------------------------------------- Hover / press feedback Hover motion is gated to real pointers: touch devices fire a phantom :hover on tap that then sticks until the next tap elsewhere. -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .btn { transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .btn:hover { transform: translateY(-1px); } .navbar-nav .nav-link { transition: transform 150ms var(--ease-out); } .navbar-nav .nav-link:hover { transform: translateX(2px); } .blog-post-card { transition: transform 200ms var(--ease-out); } .blog-post-card:hover { transform: translateY(-2px); } } /* Press feedback is useful on touch too, so it sits outside the hover gate. */ .btn:active { transform: translateY(0) scale(0.98); transition: transform 100ms var(--ease-out); } /* -------------------------------------------------------------------------- Reduced motion Fewer and gentler, not zero: the fade still communicates arrival, but nothing changes position. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { transform: none; } .js-reveal .reveal.is-visible { transform: none; transition: opacity 200ms ease; } .btn:hover, .btn:active, .navbar-nav .nav-link:hover, .blog-post-card:hover { transform: none; } }