/* Gentle native scrolling and a 300 ms cross-document dissolve. */
html { scroll-behavior: smooth; }
html[data-navigation-motion="on"] { scroll-behavior: smooth !important; }
html[data-navigation-motion="off"] { scroll-behavior: auto !important; }
.motion-toggle { white-space: normal; text-align: right; }

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  animation-duration: 300ms;
  animation-timing-function: ease-in-out;
}

/* The previous page stays underneath while the next one fades into view. */
::view-transition-old(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-new(root) {
  animation: hnm-page-enter 300ms ease-in-out both;
  mix-blend-mode: normal;
}

/* Older browsers and offline file previews get the same gentle entrance. */
html.motion-page-enter {
  animation: hnm-page-enter 300ms ease-in-out both;
}

@keyframes hnm-page-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-navigation-motion="on"]) { scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
  html.motion-page-enter,
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

/* Visitors can explicitly choose navigation motion without changing OS settings. */
html[data-navigation-motion="on"]::view-transition-group(root) {
  animation-duration: 300ms !important;
}
html[data-navigation-motion="on"]::view-transition-new(root),
html[data-navigation-motion="on"].motion-page-enter {
  animation: hnm-page-enter 300ms ease-in-out both !important;
}
html[data-navigation-motion="off"].motion-page-enter {
  animation: none !important;
}

@media print {
  html { animation: none !important; }
}

/* The frame-by-frame scroll supplies its own easing, so native easing must pause. */
html.motion-scroll-active { scroll-behavior: auto !important; }
/* Sections receive reading focus without a decorative border around the whole block. */
.motion-scroll-target:focus { outline: none; }