[data-parallax] {
  --parallax-x: 0px;
  --parallax-y: 0px;
  will-change: transform;
  transform: translate3d(var(--parallax-x), var(--parallax-y), 0) translateZ(0);
}
.reveal {
  --reveal-x: 0px;
  --reveal-y: 34px;
  --reveal-scale: 0.98;
  opacity: 0;
  filter: blur(10px);
  transform: translate3d(calc(var(--parallax-x, 0px) + var(--reveal-x)), calc(var(--parallax-y, 0px) + var(--reveal-y)), 0) scale(var(--reveal-scale)) translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, filter, transform;
}
.reveal-left {
  --reveal-x: -42px;
  --reveal-y: 12px;
}
.reveal-right {
  --reveal-x: 42px;
  --reveal-y: 12px;
}
.reveal-zoom {
  --reveal-y: 18px;
  --reveal-scale: 0.94;
}
.reveal.active {
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;
  opacity: 1;
  filter: blur(0);
  transform: translate3d(calc(var(--parallax-x, 0px) + var(--reveal-x)), calc(var(--parallax-y, 0px) + var(--reveal-y)), 0) scale(var(--reveal-scale)) translateZ(0);
}
.reveal.active[data-parallax] {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.15s linear;
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax], .reveal, .reveal.active {
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}