/* Shared motion for every page. Each movement has a job; all of it is
   off under prefers-reduced-motion (nothing here runs outside the
   no-preference query). */
:root{--ease-out:cubic-bezier(.2,.7,.1,1)}
@media (prefers-reduced-motion:no-preference){
  /* Page to page: cross-fade with the header held in place. */
  @view-transition{navigation:auto}
  header{view-transition-name:site-header}
  ::view-transition-old(root){animation:m-fade-out .18s ease both}
  ::view-transition-new(root){animation:m-fade-in .32s ease both}

  /* Inner pages: content eases in, top to bottom, on arrival. */
  .page>:not(.markWatermark){animation:m-rise .7s var(--ease-out) both}
  .page>:nth-child(3){animation-delay:.05s}
  .page>:nth-child(4){animation-delay:.1s}
  .page>:nth-child(5){animation-delay:.15s}
  .page>:nth-child(6){animation-delay:.2s}
  .page>:nth-child(7){animation-delay:.25s}
  .page>:nth-child(8){animation-delay:.3s}
  .page>:nth-child(n+9){animation-delay:.35s}
  .markWatermark{animation:m-fade-in 1.2s ease .2s both}

  /* Nav: one hairline follows the pointer between links. */
  .nav-ind{position:absolute;left:0;bottom:4px;height:1px;background:var(--orange,#e8b4a0);
    opacity:0;pointer-events:none;transition:opacity .2s}
  header.wrap{transition:transform .25s var(--ease-out)}
  .nav-ind.on{opacity:1;transition:transform .35s var(--ease-out),width .35s var(--ease-out),opacity .2s}
}
.nav-links{position:relative}
/* Header stays reachable: it rides along at the top, steps aside while you
   read downward and comes back the moment you scroll up (motion.js). The
   shadow paints the page colour edge to edge behind the centred bar. */
header.wrap{position:sticky;top:0;background:var(--paper,#15121c);box-shadow:0 0 0 100vmax var(--paper,#15121c);clip-path:inset(0 -100vmax)}
header.wrap.tucked{transform:translateY(-100%)}
@keyframes m-rise{from{opacity:0;transform:translateY(14px)}}
@keyframes m-fade-in{from{opacity:0}}
@keyframes m-fade-out{to{opacity:0}}