/* Progressive enhancement: native navigation owns links, history and scroll. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .6s; animation-timing-function: cubic-bezier(.22,.61,.36,1); }
::view-transition-old(root) { animation: fw-page-out .45s cubic-bezier(.4,0,.2,1) both; }
::view-transition-new(root) { animation: fw-page-in .7s cubic-bezier(.2,.7,.2,1) both; }
.hdr { view-transition-name: fw-header; }
::view-transition-group(fw-header) { animation-duration: .5s; }
::view-transition { pointer-events: none; }
@keyframes fw-page-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes fw-page-in { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
/* One unique shared wordmark, not a duplicate of the opening logo. */
html:not(.fwi-on) .hdr .wm { view-transition-name: fw-wordmark; }
html[data-fw-motion='off'] .hdr .wm { view-transition-name: none; }
/* Independent transform properties preserve portrait zoom and swipe transforms. */
html[data-fw-motion='on'] [data-fw-depth] {
  translate: 0 var(--fw-depth-y, 0px);
  scale: var(--fw-depth-scale, 1);
}
html[data-fw-motion='on'] [data-fw-depth][data-fw-active] { will-change: translate, scale; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .hdr .wm { view-transition-name: none !important; }
  [data-fw-depth] { translate: none !important; scale: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Portrait cards retain their existing fixed, clipped frame. */
html[data-fw-motion='on'] [data-fw-depth='portrait'] {
  scale: var(--fw-depth-scale, 1.09);
}

/* No white flash between pages: the canvas keeps the site's paper color. */
html:has(body > #fw-root) { background-color: #F7F8FA; }
html.fw-depart #fw-root { opacity: 0; transform: translateY(-8px); filter: blur(3px); transition: opacity .3s ease, transform .3s ease, filter .3s ease; }
html.fw-arrive #fw-root { opacity: 0; transform: translateY(14px); }
#fw-root { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) {
  html.fw-depart #fw-root, html.fw-arrive #fw-root { opacity: 1; transform: none; filter: none; }
}