/*
 * Page-to-page feel for the server-rendered app.
 *
 * 1. Cross-document View Transitions: the page content slides and fades
 *    like the welcome flow, while the sidebar, phone tab bar and public
 *    top bar stay where they are. Browsers without support (Firefox today)
 *    load pages normally.
 * 2. A thin progress bar at the top of the window, shown by cct-nav.js only
 *    when a navigation has not finished after ~150 ms.
 *
 * Both are off under prefers-reduced-motion (the bar still shows, without
 * moving).
 */

:root {
  --cct-nav-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* same curve as --wl-ease */
  --cct-nav-shift: 28px;
}

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

/* The app shell stays still: each piece is its own transition group, so it
   is not part of the sliding page snapshot. */
#sidebar { view-transition-name: cct-sidebar; }
body > .cct-tabbar { view-transition-name: cct-tabbar; }
body > .navbar { view-transition-name: cct-navbar; }

::view-transition-group(*) {
  animation-duration: 240ms;
  animation-timing-function: var(--cct-nav-ease);
}

/* Going back slides the other way, like a phone app. cct-nav.js tags
   back/forward-history navigations with the "back" type. */
html:active-view-transition-type(back) {
  --cct-nav-shift: -28px;
}

::view-transition-old(root) {
  animation: cct-nav-page-out 180ms var(--cct-nav-ease) both;
}

::view-transition-new(root) {
  animation: cct-nav-page-in 240ms var(--cct-nav-ease) both;
}

@keyframes cct-nav-page-out {
  to { opacity: 0; transform: translateX(calc(var(--cct-nav-shift) * -1)); }
}

@keyframes cct-nav-page-in {
  from { opacity: 0; transform: translateX(var(--cct-nav-shift)); }
}

/* ---------- Loading bar ---------- */

.cct-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483000;
  height: 3px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

.cct-nav-bar::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cct-violet-600, #7c3aed), var(--cct-violet-400, #a78bfa));
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
  border-radius: 0 3px 3px 0;
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.cct-nav-bar.is-on {
  opacity: 1;
}

.cct-nav-bar.is-on::before {
  /* Races toward ~90% and creeps after that; the real page replaces it. */
  animation: cct-nav-bar-grow 10s cubic-bezier(0.1, 0.7, 0.2, 1) forwards;
}

@keyframes cct-nav-bar-grow {
  0% { transform: scaleX(0); }
  8% { transform: scaleX(0.35); }
  30% { transform: scaleX(0.7); }
  100% { transform: scaleX(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .cct-nav-bar { transition: none; }
  .cct-nav-bar.is-on::before {
    animation: none;
    transform: none;
    opacity: 0.85;
  }
}