html.page-reveal-boot {
  background: var(--color-neutral-100);
}

html.page-reveal-boot body.page-reveal-enabled {
  visibility: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .page-reveal-enabled .page-reveal-item {
    opacity: 0;
    transform: translateY(12px);
  }

  .page-reveal-enabled.page-reveal-ready .page-reveal-item {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 500ms ease-out var(--page-reveal-delay, 0ms),
      transform 500ms ease-out var(--page-reveal-delay, 0ms);
  }

  .page-reveal-enabled.page-reveal-complete .page-reveal-item {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-reveal-enabled .page-reveal-item {
    opacity: 1;
    transform: none;
  }
}

/* Keep masonry's inline transform intact; animate a separate translation. */
@media (prefers-reduced-motion: no-preference) {
  .page-reveal-enabled .media-card.page-reveal-item {
    transform: none;
    translate: 0 12px;
  }
  .page-reveal-enabled.page-reveal-ready .media-card.page-reveal-item {
    translate: 0 0;
    transition: opacity 500ms ease-out var(--page-reveal-delay, 0ms),
      translate 500ms ease-out var(--page-reveal-delay, 0ms);
  }
}