.grid-reveal {
  --reveal-rise: 22px;
  --reveal-scale: .965;
  --reveal-duration: .52s;
  --reveal-stagger: 45ms;
}

.grid-reveal.dir-up {
  --reveal-rise: 8px;
  --reveal-scale: .988;
  --reveal-duration: .3s;
  --reveal-stagger: 16ms;
}

.grid-reveal .card {
  opacity: 0;
  translate: 0 var(--reveal-rise);
  scale: var(--reveal-scale);
  transition:
    transform .2s var(--ease),
    box-shadow .2s var(--ease),
    border-color .2s var(--ease),
    opacity var(--reveal-duration) cubic-bezier(.22, 1, .36, 1),
    translate var(--reveal-duration) cubic-bezier(.22, 1, .36, 1),
    scale var(--reveal-duration) cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--reveal-delay, 0) * var(--reveal-stagger));
}

.grid-reveal .card.is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

@media (prefers-reduced-motion: reduce) {
  .grid-reveal .card {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition: none;
  }
}