:root {
  --lazy-movement: 5%;
  --lazy-start-transform: translateY(calc(var(--lazy-movement) * -1));
  --lazy-end-transform: unset;
}
/* THIS DOES NOT WORK YET */
.cobalt-parallax--container{
  --parallax-depth: 8px;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: var(--parallax-depth);
  perspective-origin: 0%;
  /* display: flex;
  flex-direction: column; */
  position:relative;
}

.cobalt-parallax--item{
  --z-placement: 3px;
  --scale: calc(calc(var(--parallax-depth) / var(--z-placement)) / var(--parallax-depth) );
  transform-origin: 0;
  transform: translateZ(var(--z-placement)) scale(var(--scale));
  position: absolute;
}

.cobalt-parallax--bg-parallax {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

:where(html._parallax) {
  [lazy-reveal] {
    --_lazy-movement: 5%;
    --_lazy-speed: 500ms;
    &.lazy-reveal--revealed {
      opacity: 1;
      transform: var(--lazy-end-transform);
      [lazy-child] {
        opacity: 1;
        transform: var(--lazy-end-transform);
      }
    }
    .lazy-reveal--reverted [lazy-child] {
      transition-delay: 0;
    }
  }
  [lazy-reveal],
  [lazy-child] {
    opacity: 0;
    transition: opacity var(--_lazy-speed), transform var(--_lazy-speed);
    transition-delay: var(--lazy-delay);
    transform: var(--lazy-start-transform);
    &.lazy--from-left {
      --lazy-start-transform: translateX(calc(var(--_lazy-movement) * -1));
    }
    &.lazy--from-right {
      --lazy-start-transform: translateX(5%);
    }
    &.lazy--from-bottom {
      --lazy-start-transform: translateY(5%);
    }
    &.lazy--from-transparent {
      --lazy-start-transform: unset;
    }
  }
}