/* Page transition (all pages): the content fades out, the header stays, the next page fades in.
   1) Browsers with cross-document View Transitions do this from CSS alone.
   2) Other browsers: js/page-transition.js toggles .pt-leave / .pt-enter on <html>.
   Respects prefers-reduced-motion (no animation at all). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  body>header{view-transition-name:site-header}
  ::view-transition-group(site-header){animation:none}
  ::view-transition-old(site-header){display:none}
  ::view-transition-new(site-header){animation:none}
  ::view-transition-old(root){animation:pt-out .28s cubic-bezier(.22,1,.36,1) both}
  ::view-transition-new(root){animation:pt-in .36s cubic-bezier(.4,0,.2,1) .22s both}
  html.pt-leave body>:not(header):not(.pt-veil):not(canvas):not(.season-decor){opacity:0;transform:translateY(-10px);transition:opacity .28s cubic-bezier(.22,1,.36,1),transform .28s cubic-bezier(.22,1,.36,1)}
  html.pt-enter body>:not(header):not(canvas):not(.season-decor){animation:pt-in .36s cubic-bezier(.4,0,.2,1) .02s both}
}
@keyframes pt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes pt-in{from{opacity:0;transform:translateY(14px)}}
.pt-veil{position:fixed;left:0;top:0;height:3px;width:100%;z-index:1000;background:#a3e64a;transform:scaleX(0);transform-origin:left;pointer-events:none;opacity:0}
html.pt-leave .pt-veil{opacity:1;transform:scaleX(.7);transition:transform .9s cubic-bezier(.22,1,.36,1)}