/* Public pages: the floating navigation holds still while the next page opens
   from the point that was pressed, expanding over the previous one as it
   recedes. Each pixel shows one page at a time, so headlines never overlap.
   Reduced-motion settings swap instantly. */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .nav{view-transition-name:site-nav}
  /* The receding page sinks into the brand's darkest green rather than exposing white corners. */
  ::view-transition{pointer-events:none;background:#0f2a20}
  ::view-transition-group(site-nav){z-index:10;animation:none}
  ::view-transition-old(site-nav){display:none}
  ::view-transition-new(site-nav){animation:none}
  /* The nav's SVG lens samples the page behind it, which a snapshot cannot do;
     it would paint as a square. The capsule keeps its tint until the hand-off ends. */
  html:active-view-transition .nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  ::view-transition-group(root){animation:none}
  ::view-transition-old(root){animation:site-recede 620ms cubic-bezier(.65,0,.35,1) both}
  ::view-transition-new(root){animation:site-reveal 620ms cubic-bezier(.65,0,.35,1) both}
  @keyframes site-reveal{
    from{clip-path:circle(0 at var(--site-x,50%) var(--site-y,40px))}
    to{clip-path:circle(var(--site-r,150vmax) at var(--site-x,50%) var(--site-y,40px))}
  }
  @keyframes site-recede{to{transform:scale(.965);filter:brightness(.8) saturate(.9)}}
}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}