[data-parallax="underlay"] {
    position: relative;
    overflow: hidden;
    background: #fff;
    --bottom: -100%;
}

[data-parallax="underlay"] p,
[data-parallax="underlay"] h2 {
    color: #fff;
    mix-blend-mode: difference;
}

[data-parallax="underlay"]::before {
    content: '';
    position: absolute;
    bottom: var(--bottom);
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

[data-parallax="horizontal"] {
    display: flex;
    align-items: flex-start;
    xposition: sticky;
    top: 0px;
    overflow: hidden;
    width: 200vw;
    height: 200vw;
    transform-style: preserve-3d;
}

[data-parallax="split"] {
    position: relative;
    height: 100vh;
    border: solid 1px red;
}

[data-parallax="split"] .split {
    display: flex;
    flex-wrap: wrap;
    will-change: transform;
    transform-style: preserve-3d;
    position: sticky;
    top: 5vw;
}

[data-parallax="split"] .split > div {
    width: 50%;
}

[data-parallax="split"] .split > div:first-of-type {
    z-index: 1;
    transform: translate3d(50%, 0px, 0px);
}

[data-parallax="split"] .split > div:last-of-type {
    transform: translate3d(-50%, 0px, 0px);
}

[data-parallax="circle"] {
    position: relative;
    overflow: hidden;
    border: solid 1px red;
    --scale: 0;
}

[data-parallax="circle"]::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #000;
    transform: scale(var(--scale));
    transform-origin: center center;
    border-radius: 50%;
    aspect-ratio: 1/1;
}

[data-parallax-anim="go-up"] {

 
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
 

    
}