.bg-fade-on-scroll{position:relative;overflow:hidden;--bg-url:none;--bg-size:cover;--bg-pos-x:center;--bg-repeat:no-repeat;--bg-opacity:0;--translateY:0;--overflow:1px}.bg-fade-on-scroll::before{content:"";position:absolute;top:calc(-1 * var(--overflow) / 2);right:0;bottom:calc(-1 * var(--overflow) / 2);left:0;background-image:var(--bg-url);background-size:var(--bg-size);background-position:var(--bg-pos-x) top;background-repeat:var(--bg-repeat);transform:translateY(var(--translateY));opacity:var(--bg-opacity);transition:opacity 90ms linear;will-change:transform,opacity;z-index:0}.bg-fade-on-scroll>*{position:relative;z-index:1}