/* View Transitions for page navigation (Turbo 8 native)
 *
 * Every navigation — rail clicks, section-nav tabs, breadcrumbs — gets the
 * same fast cross-fade: old content fades out, new content fades in, nothing
 * moves. 120ms, well under the ~160ms "feels like a flat SPA update" point.
 * (Previously a directional left/right slide, keyed on
 * data-turbo-visit-direction; Dave, 2026-10-27, after comparing both live —
 * the directional slide read as inconsistent across tabs that share one URL
 * path and tabs that don't, so direction was dropped in favor of one uniform
 * treatment for every link.)
 *
 * Only the main content area transitions. The sidebar and mobile header
 * stay completely still via separate view-transition-names.
 *
 * application.js still sets data-turbo-visit-direction="none" for a
 * same-pathname navigation (e.g. opening a `?drawer=` on the current page) —
 * that one case stays unanimated, a sub-state change rather than a page
 * change, and the comment there explains why.
 */

/* ── Transition groups ────────────────────────────────────────────────
 * Elements with a view-transition-name form independent snapshot groups.
 * The sidebar is position:fixed so it's naturally excluded, but we also
 * name the main content wrapper so its snapshot is isolated from root.
 */

/* Main content area — the only thing that should animate */
.view-transition-main {
  view-transition-name: main-content;
}

/* Sidebar — stays completely still */
.view-transition-sidebar {
  view-transition-name: sidebar;
}

/* ── Root group: no animation (captures banners, etc.) ──────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none !important;
}

/* ── Every navigation: fast cross-fade ────────────────────────────── */
html[data-turbo-visit-direction="forward"]::view-transition-old(main-content),
html[data-turbo-visit-direction="back"]::view-transition-old(main-content) {
  animation: page-fade-out 120ms ease-out both;
}
html[data-turbo-visit-direction="forward"]::view-transition-new(main-content),
html[data-turbo-visit-direction="back"]::view-transition-new(main-content) {
  animation: page-fade-in 120ms ease-in both;
}

/* ── Sidebar group: never animates ───────────────────────────────── */
::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  animation: none !important;
}

/* ── Respect reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) {
    animation-duration: 0.01ms !important;
  }
}

/* ── Turbo cache preview: no double-transition ───────────────────── */
html[data-turbo-preview]::view-transition-old(main-content),
html[data-turbo-preview]::view-transition-new(main-content) {
  animation: none !important;
}

/* ── Keyframes ───────────────────────────────────────────────────── */

@keyframes page-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}