/* Page-to-page and scroll motion. CSS only: browsers without support just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: atn-page-out .16s ease-in both; }
::view-transition-new(root) { animation: atn-page-in .34s cubic-bezier(.2,.7,.2,1) both; }
::view-transition-group(atn-header), ::view-transition-group(atn-rail) { animation-duration: .3s; }
::view-transition-old(atn-header), ::view-transition-new(atn-header) { animation: none; mix-blend-mode: normal; }
@keyframes atn-page-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes atn-page-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes atn-rise { from { opacity: 0; transform: translateY(28px); } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    main > div > section, main > section { animation: atn-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 22%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html { scroll-behavior: auto !important; }
}