/* Motion and stickiness: page transitions, reduced motion, and where the header may stick. */
/* Page transitions: navigation morphs; header and active pill stay put. */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 180ms var(--ease-out) both desk-leave;
}
::view-transition-new(root) {
  animation: 320ms var(--ease-out) both desk-enter;
}
::view-transition-group(nav-active) {
  animation-duration: 380ms;
  animation-timing-function: var(--ease-spring);
}
@keyframes desk-leave {
  to {
    opacity: 0;
    transform: perspective(1200px) translateZ(-40px);
  }
}
@keyframes desk-enter {
  from {
    opacity: 0;
    transform: perspective(1200px) translateZ(40px) translateY(8px);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .flash {
    animation: desk-drop 620ms var(--ease-spring) both;
  }
  @keyframes desk-drop {
    from {
      opacity: 0;
      transform: perspective(700px) rotateX(-78deg);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  @view-transition {
    navigation: none;
  }
}
@media (max-width: 639px) {
  body {
    font-size: 16.5px;
    padding-inline: 16px;
  }
  .site-header {
    margin-inline: -16px;
    padding-inline: 16px;
  }
}
.nav { scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
/* Sticky only where the header is one row (87px measured at 960-1440px); below 1024px the nav
   wraps to a 119px header, too much to pin on a tablet. */
@media (max-width: 1023px) {
  .site-header { position: static; }
}
@media (min-width: 1024px) {
  /* the sticky header must not cover an anchor target (#decision, /plan#phase-2) or the focused element */
  html { scroll-padding-top: 100px; }
}
.main { grid-template-columns: minmax(0, 1fr); }