/* scroll-reveal.css — viewport entrance animations * Vanilla-IO recipe modeled on jlmakes/scrollreveal. * Gate the hidden state behind .stackwise-js so non-JS users see everything. * * Loaded only when the page sets (done by the * early inline script in index.html before the body renders). */ .stackwise-js [data-reveal] { opacity: 0; will-change: opacity, transform; } /* Origin presets — translate only; rotate/scale are applied by JS. * Safety net so that, if the JS loads but errors out before applyInitial() * runs, the element is at least positioned offset rather than at its * revealed position. Visually moot (opacity is 0) but keeps layout sane. */ .stackwise-js [data-reveal-origin="top"] { transform: translate3d(0, -20px, 0); } .stackwise-js [data-reveal-origin="bottom"] { transform: translate3d(0, 20px, 0); } .stackwise-js [data-reveal-origin="left"] { transform: translate3d(-20px, 0, 0); } .stackwise-js [data-reveal-origin="right"] { transform: translate3d( 20px, 0, 0); } /* Revealed state — full transform reset, including rotate and scale, * so the JS-set inline style is fully neutralized. */ .stackwise-js [data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateY(0) rotateZ(0) scale(1); } /* Respect reduced-motion: skip the entrance, show everything immediately. */ @media (prefers-reduced-motion: reduce) { .stackwise-js [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } }