@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  main > header, main > nav, main > h1 {
    animation: taz-page-in .55s ease both;
  }
  main > nav { animation-delay: .08s; }
  main > h1 { animation-delay: .16s; }
  a { transition: color .2s ease, opacity .2s ease; }
  a:hover { opacity: .8; }

  @supports (animation-timeline: view()) {
    main > section {
      animation: taz-page-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
  }

  @keyframes taz-page-in {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }
}