.js [data-reveal],
.js .reveal {
  opacity: 0;
  transition:
    opacity var(--reveal-dur, var(--motion-slow))
      var(--reveal-ease, var(--ease-out)),
    transform var(--reveal-dur, var(--motion-slow))
      var(--reveal-ease, var(--ease-out)),
    clip-path var(--reveal-dur-clip, var(--motion-xslow))
      var(--reveal-ease, var(--ease-out)),
    filter var(--reveal-dur, var(--motion-slow))
      var(--reveal-ease, var(--ease-out));

  transition-delay: calc(
    var(--reveal-lead, 0ms) + var(--reveal-i, 0) * var(--stagger)
  );
}
.js [data-reveal]:not(.is-in),
.js .reveal:not(.is-in) {
  will-change: opacity, transform;
}

.js .reveal,
.js [data-reveal="fade-up"] {
  transform: translateY(var(--reveal-y));
}
.js [data-reveal="fade-left"] {
  transform: translateX(calc(-1 * var(--reveal-x)));
}
.js [data-reveal="fade-right"] {
  transform: translateX(var(--reveal-x));
}
.js [data-reveal="zoom"] {
  transform: scale(0.94);
}
.js [data-reveal="scale-in"] {
  transform: scale(0.85);
}
.js [data-reveal="clip"] {
  clip-path: inset(0 0 100% 0);
}
.js [data-reveal="mask"] {
  clip-path: inset(0 100% 0 0);
}

.js [data-reveal="focus"] {
  transform: translateY(var(--reveal-y));
  filter: blur(7px);
}

.js [data-reveal="rise"] {
  transform: translateY(var(--reveal-y)) scale(0.965);
}

.js .reveal.is-in,
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0);
  filter: none;
  will-change: auto;
}

.js:not(.reveal-js) [data-reveal],
.js:not(.reveal-js) .reveal {
  animation: sr-reveal-failsafe var(--motion-slow, 0.6s) var(--ease-out, ease)
    1.4s both;
}
@keyframes sr-reveal-failsafe {
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0);
  }
}

@media (max-width: 600px) {
  :root {
    --reveal-y: var(--reveal-y-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal],
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
  }
}