/* Native, cross-document navigation. Pages remain visible without JS or API support. */
@view-transition { navigation: auto; }
:root {
  --nv-page-duration: 520ms;
  --nv-page-ease: cubic-bezier(.25, .8, .25, 1);
  --nv-insights-departure-duration: 650ms;
}
::view-transition-group(root) { animation-duration: var(--nv-page-duration); }
::view-transition-old(root), ::view-transition-new(root) {
  mix-blend-mode: normal;
  animation-duration: var(--nv-page-duration);
  animation-timing-function: var(--nv-page-ease);
  animation-fill-mode: both;
}
::view-transition-old(root) { animation-name: nv-postcard-out; }
::view-transition-new(root) { animation-name: nv-postcard-in; }
#nv-announce { view-transition-name: nv-announcement; }
/* Keep the announcement steady while the postcard passes beneath it. */
::view-transition-group(nv-announcement) { animation-duration: var(--nv-page-duration); }
::view-transition-old(nv-announcement) { animation: none; opacity: 0; }
::view-transition-new(nv-announcement) { animation: none; }
html[data-nv-navigation="postcard-back"]::view-transition-old(root) { animation-name: nv-postcard-back-out; }
html[data-nv-navigation="postcard-back"]::view-transition-new(root) { animation-name: nv-postcard-back-in; }
/* Choosing a specialist opens a dossier from its lower edge, with a soft paper settle. */
html[data-nv-navigation^="dossier"] { --nv-page-duration: 640ms; }
html[data-nv-navigation="dossier-open"]::view-transition-old(root) { animation-name: nv-dossier-out; }
html[data-nv-navigation="dossier-open"]::view-transition-new(root) { animation-name: nv-dossier-in; transform-origin: 50% 85%; }
html[data-nv-navigation="dossier-close"]::view-transition-old(root) { animation-name: nv-dossier-close-out; }
html[data-nv-navigation="dossier-close"]::view-transition-new(root) { animation-name: nv-dossier-close-in; }
/* Editorial navigation turns a quiet page upward instead of sliding sideways. */
html[data-nv-navigation^="story"] { --nv-page-duration: 500ms; }
html[data-nv-navigation="story-open"]::view-transition-old(root) { animation-name: nv-story-out; }
html[data-nv-navigation="story-open"]::view-transition-new(root) { animation-name: nv-story-in; }
html[data-nv-navigation="story-close"]::view-transition-old(root) { animation-name: nv-story-close-out; }
html[data-nv-navigation="story-close"]::view-transition-new(root) { animation-name: nv-story-close-in; }
@keyframes nv-postcard-out { to { opacity: 0; transform: translateX(calc(-1 * clamp(56px, 7vw, 100px))); } }
@keyframes nv-postcard-in { from { opacity: 0; transform: translateX(clamp(56px, 7vw, 100px)); } }
@keyframes nv-postcard-back-out { to { opacity: 0; transform: translateX(clamp(56px, 7vw, 100px)); } }
@keyframes nv-postcard-back-in { from { opacity: 0; transform: translateX(calc(-1 * clamp(56px, 7vw, 100px))); } }
@keyframes nv-dossier-out { to { opacity: 0; transform: scale(.96); } }
@keyframes nv-dossier-in { from { opacity: 0; transform: translateY(72px) scale(.95) rotate(1deg); } }
@keyframes nv-dossier-close-out { to { opacity: 0; transform: translateY(72px) scale(.95); } }
@keyframes nv-dossier-close-in { from { opacity: 0; transform: scale(.96); } }
@keyframes nv-story-out { to { opacity: 0; transform: translateY(-24px); } }
@keyframes nv-story-in { from { opacity: 0; transform: translateY(56px); } }
@keyframes nv-story-close-out { to { opacity: 0; transform: translateY(56px); } }
@keyframes nv-story-close-in { from { opacity: 0; transform: translateY(-24px); } }
/* The 404 "Next stop" departure, reused for the Founder's Insights destination. */
.nv-insights-departure {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: auto;
  background: #56633f;
  color: #f5ead8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 24px;
  text-align: center;
  font: 32px var(--font-heading, Caprasimo, serif);
  clip-path: circle(0% at 50% 75%);
  transition: clip-path var(--nv-insights-departure-duration) cubic-bezier(.65, 0, .35, 1);
}
.nv-insights-departure.is-leaving { clip-path: circle(150% at 50% 75%); }
.nv-insights-sun { font: 70px/1 serif; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .nv-insights-departure { display: none; transition: none; }
}