/* K-φ site: moving between the site's own pages (home, FP&A, Cash,
   Developers, the blog), 2026-10-29.
   The browser's cross-document view transitions: the top bar stays where it
   is, the page beneath fades and lifts away, the next one rises in, and a
   neon line runs once under the bar. Both pages must carry this file for the
   transition to play. A browser without view transitions (Firefox today)
   changes page as before; reduced motion turns the transition off.
   Served from public/ (express.static); tests/site-transitions.test.js. */

@view-transition { navigation: auto; }

/* the bar: one element across pages, never animated */
body > nav, nav#main-nav { view-transition-name: kphi-nav; }
::view-transition-group(kphi-nav) { animation-duration: 0s; }
::view-transition-old(kphi-nav) { display: none; }
::view-transition-new(kphi-nav) { animation: none; }

/* the page beneath */
::view-transition-old(root) { animation: kphi-page-out .24s cubic-bezier(.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: kphi-page-in .5s cubic-bezier(.16, 1, .3, 1) .05s both; }
@keyframes kphi-page-out { to { opacity: 0; transform: translateY(-14px) scale(.985); } }
@keyframes kphi-page-in { from { opacity: 0; transform: translateY(28px); } }

/* the neon line under the bar, once, while the page changes */
html:active-view-transition body > nav::after,
html:active-view-transition nav#main-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, #E6FF00 45%, #E6FF00 55%, transparent 100%);
  box-shadow: 0 0 12px rgba(230, 255, 0, .55);
  animation: kphi-sweep .62s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes kphi-sweep { from { transform: translateX(-100%); opacity: 1; } to { transform: translateX(100%); opacity: 0; } }

/* arriving through a transition, the bar is already there: no first-visit fade-in
   (the class is set by /site-transitions.js on pagereveal) */
html.kphi-vt-arrive body > nav, html.kphi-vt-arrive nav#main-nav { opacity: 1 !important; transform: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}