@layer utilities {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes reveal-in {
      from {
        opacity: 0;
        translate: var(--reveal-x, 0) var(--reveal-y, 0);
        scale: var(--reveal-scale, 1);
      }

      to {
        opacity: 1;
        translate: none;
        scale: none;
      }
    }

    .reveal {
      --reveal-y: var(--reveal-distance);

      opacity: 0;
      translate: var(--reveal-x, 0) var(--reveal-y, 0);
      scale: var(--reveal-scale, 1);
      will-change: opacity, translate, scale;
    }

    .reveal--down {
      --reveal-y: calc(var(--reveal-distance) * -1);
    }

    .reveal--left {
      --reveal-x: var(--reveal-distance);
      --reveal-y: 0;
    }

    .reveal--right {
      --reveal-x: calc(var(--reveal-distance) * -1);
      --reveal-y: 0;
    }

    .reveal--scale {
      --reveal-y: 0;
      --reveal-scale: 0.8;
    }

    .reveal--fade {
      --reveal-y: 0;
    }

    .reveal.is-revealed {
      opacity: 1;
      translate: none;
      scale: none;
      animation: reveal-in var(--reveal-duration) var(--reveal-ease)
        calc(var(--i, 0) * var(--reveal-stagger)) backwards;
    }
  }
}