/* --- Page transition shell ---
   Same-origin nav transitions keep Cortex feeling continuous while preserving
   normal document navigation. Cross-document view transitions keep Chrome from
   briefly painting a blank document between static pages; the JS class fallback
   gives older browsers a small transform-only cue without fading content.

   This stylesheet must only be loaded with page-transitions.js. The CSS
   @view-transition opt-in is document-wide, and the JS pageswap handler scopes
   it back down to .global-nav clicks. */
:root {
  --page-nav-dur: 140ms;
  --page-nav-settle-dur: 220ms;
  --page-nav-distance: 4px;
  --page-nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --page-nav-bg: var(--bg-base, #09090B);
}
@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--page-nav-dur);
  animation-timing-function: var(--page-nav-ease);
  animation-fill-mode: both;
  background: var(--page-nav-bg);
}
::view-transition-old(root) { animation-name: cortex-page-old; }
::view-transition-new(root) { animation-name: cortex-page-new; }
.global-nav { view-transition-name: cortex-nav; }
::view-transition-old(cortex-nav) {
  /* Keep the departing page's populated nav visible throughout the transition
     so the empty <nav> shell on the arriving page never flashes. */
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-new(cortex-nav) {
  /* Suppress the incoming page's empty nav snapshot. nav.js will populate the
     real element underneath; once the view transition ends the real (now-populated)
     nav paints in its place. */
  animation: none;
  mix-blend-mode: normal;
  opacity: 0;
}
@keyframes cortex-page-old {
  from { transform: translateY(0); }
  to { transform: translateY(calc(var(--page-nav-distance) * -1)); }
}
@keyframes cortex-page-new {
  from { transform: translateY(var(--page-nav-distance)); }
  to { transform: translateY(0); }
}
.app,
.my-app,
.vec-app,
.art-page,
.files-page,
.detail-app,
.mv-app,
.onb-shell,
.ppl-page,
.rec-page,
.redirect-wrap,
.page-container,
main.body,
[data-cortex-page-root] {
  transition: transform var(--page-nav-dur) var(--page-nav-ease);
}
html.cortex-page-entering .app,
html.cortex-page-entering .my-app,
html.cortex-page-entering .vec-app,
html.cortex-page-entering .art-page,
html.cortex-page-entering .files-page,
html.cortex-page-entering .detail-app,
html.cortex-page-entering .mv-app,
html.cortex-page-entering .onb-shell,
html.cortex-page-entering .ppl-page,
html.cortex-page-entering .rec-page,
html.cortex-page-entering .redirect-wrap,
html.cortex-page-entering .page-container,
html.cortex-page-entering main.body,
html.cortex-page-entering [data-cortex-page-root] {
  transform: translateY(var(--page-nav-distance));
  will-change: transform;
}
html.cortex-page-leaving .app,
html.cortex-page-leaving .my-app,
html.cortex-page-leaving .vec-app,
html.cortex-page-leaving .art-page,
html.cortex-page-leaving .files-page,
html.cortex-page-leaving .detail-app,
html.cortex-page-leaving .mv-app,
html.cortex-page-leaving .onb-shell,
html.cortex-page-leaving .ppl-page,
html.cortex-page-leaving .rec-page,
html.cortex-page-leaving .redirect-wrap,
html.cortex-page-leaving .page-container,
html.cortex-page-leaving main.body,
html.cortex-page-leaving [data-cortex-page-root] {
  transform: translateY(calc(var(--page-nav-distance) * -1));
  pointer-events: none;
  will-change: transform;
}
html.cortex-page-ready .app,
html.cortex-page-ready .my-app,
html.cortex-page-ready .vec-app,
html.cortex-page-ready .art-page,
html.cortex-page-ready .files-page,
html.cortex-page-ready .detail-app,
html.cortex-page-ready .mv-app,
html.cortex-page-ready .onb-shell,
html.cortex-page-ready .ppl-page,
html.cortex-page-ready .rec-page,
html.cortex-page-ready .redirect-wrap,
html.cortex-page-ready .page-container,
html.cortex-page-ready main.body,
html.cortex-page-ready [data-cortex-page-root] {
  transform: translateY(0);
}
html.cortex-page-settling .cortex-loading-card {
  animation: cortex-loading-card-settle var(--page-nav-settle-dur) var(--page-nav-ease) both;
}
@keyframes cortex-loading-card-settle {
  from { transform: translateY(2px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
  .app,
  .my-app,
  .vec-app,
  .art-page,
  .files-page,
  .detail-app,
  .mv-app,
  .onb-shell,
  .ppl-page,
  .rec-page,
  .redirect-wrap,
  .page-container,
  main.body,
  [data-cortex-page-root] {
    transition: none !important;
    transform: none !important;
  }
  html.cortex-page-settling .cortex-loading-card {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}