@layer home {
  /*
   * Progressive enhancement rule:
   * homepage content is visible by default. JavaScript may opt an element into
   * a reveal transition only when it is actually entering the viewport.
   * This prevents no-JS, failed-JS and full-page screenshot states from
   * producing an apparently empty homepage.
   */
  [data-niko-reveal] {
    opacity: 1;
    transform: none;
  }

  [data-niko-reveal].niko-reveal-pending {
    opacity: 0;
    transform: translateY(2rem);
  }

  [data-niko-reveal].niko-reveal-pending.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  @media (prefers-reduced-motion: reduce) {
    [data-niko-reveal],
    [data-niko-reveal].niko-reveal-pending,
    [data-niko-reveal].niko-reveal-pending.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
}