.depth-layer {
  --layer-x: calc(var(--px, 0) * var(--depth, 0) * 3px);
  --layer-y: calc(var(--py, 0) * var(--depth, 0) * 3px);
  --scroll-x: 0px;
  --scroll-y: 0px;
  translate: calc(var(--layer-x) + var(--scroll-x)) calc(var(--layer-y) + var(--scroll-y));
}

[data-depth="1"] { --depth: 1; }
[data-depth="2"] { --depth: 2; }
[data-depth="3"] { --depth: 3; }
[data-depth="4"] { --depth: 4; }

.is-near.depth-layer { will-change: translate; }

@supports (animation-timeline: view()) {
  .reveal {
    animation: rise-in both linear;
    animation-duration: auto;
    animation-timeline: view();
    animation-range: entry 4% cover 34%;
  }

}

@keyframes rise-in {
  from { opacity: 0; translate: 0 48px; }
  to { opacity: 1; translate: calc(var(--layer-x, 0px) + var(--scroll-x, 0px)) calc(var(--layer-y, 0px) + var(--scroll-y, 0px)); }
}