@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    html.reveal-ready [data-reveal] {
      --_x: 0px;
      --_y: var(--reveal-distance);
      --_s: 1;
      opacity: 0;
      translate: var(--_x) var(--_y);
      scale: var(--_s);
      transition:
        opacity var(--dur-reveal) var(--ease-reveal),
        translate var(--dur-reveal) var(--ease-reveal),
        scale var(--dur-reveal) var(--ease-reveal),
        mask-position var(--dur-reveal) var(--ease-in-out),
        filter var(--dur-reveal) var(--ease-reveal);
      transition-delay: calc(
        var(--reveal-delay, 0ms) + var(--i, 0) * var(--stagger-step)
      );
    }
    html.reveal-ready [data-reveal="down"] {
      --_y: calc(var(--reveal-distance) * -1);
    }
    html.reveal-ready [data-reveal="left"] {
      --_x: calc(var(--reveal-distance) * -1.5);
      --_y: 0px;
    }
    html.reveal-ready [data-reveal="right"] {
      --_x: calc(var(--reveal-distance) * 1.5);
      --_y: 0px;
    }
    html.reveal-ready [data-reveal="fade"] {
      --_y: 0px;
    }
    html.reveal-ready [data-reveal="scale"] {
      --_y: 0px;
      --_s: 0.94;
    }
    html.reveal-ready [data-reveal="mask"] {
      --_y: 0px;
      opacity: 1;
      mask-image: linear-gradient(to bottom, #000 45%, transparent 55%);
      mask-size: 100% 220%;
      mask-repeat: no-repeat;
      mask-position: 0 100%;
    }
    html.reveal-ready [data-reveal="blur"] {
      --_y: 0px;
      filter: blur(12px);
    }
    html.reveal-ready [data-reveal].is-inview {
      opacity: 1;
      translate: 0 0;
      scale: 1;
      mask-position: 0 0;
      filter: none;
    }
    @supports (animation-timeline: view()) {
      [data-parallax] {
        animation: parallax-y linear both;
        animation-timeline: view();
        animation-range: cover 0% cover 100%;
      }
      @keyframes parallax-y {
        0% {
          translate: 0 calc(var(--parallax, 60px) * -1);
        }
        to {
          translate: 0 var(--parallax, 60px);
        }
      }
    }
  }
}