/* Scroll reveal — respects prefers-reduced-motion via .sr-reduced-motion on */ .sr-el { transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--sr-delay, 0ms); will-change: opacity, transform; } html:not(.sr-reduced-motion) .sr-el:not(.sr-el--visible) { opacity: 0; pointer-events: none; } html:not(.sr-reduced-motion) .sr-el--up:not(.sr-el--visible) { transform: translate3d(0, 28px, 0); } html:not(.sr-reduced-motion) .sr-el--down:not(.sr-el--visible) { transform: translate3d(0, -20px, 0); } html:not(.sr-reduced-motion) .sr-el--left:not(.sr-el--visible) { transform: translate3d(-24px, 0, 0); } html:not(.sr-reduced-motion) .sr-el--right:not(.sr-el--visible) { transform: translate3d(24px, 0, 0); } html:not(.sr-reduced-motion) .sr-el--fade:not(.sr-el--visible) { transform: none; } html:not(.sr-reduced-motion) .sr-el--scale:not(.sr-el--visible) { transform: scale(0.96); } html:not(.sr-reduced-motion) .sr-el--visible { opacity: 1; transform: none; pointer-events: auto; } html.sr-reduced-motion .sr-el { opacity: 1 !important; transform: none !important; transition: none !important; } [data-sr-parallax], .sr-parallax { will-change: transform; }