/* Scroll reveal, page transitions and reduced motion (DESIGN_CONTRACT.md, section 8). */

@layer motion {
  @view-transition { navigation: auto; }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur-base);
    animation-timing-function: var(--ease-out);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
      }
    }

    @keyframes reveal-rise {
      from { opacity: 0; transform: translateY(16px); }
      to { opacity: 1; transform: none; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }

    html { scroll-behavior: auto; }

    /* The motion layer is last, so this wins over every component rule. */
    *, *::before, *::after {
      animation: none;
      transition: opacity var(--dur-fast);
    }
  }
}