/* ============================================================
 * transitions.css — view-transition pseudo-element styling
 *
 * Activated by <meta name="view-transition" content="same-origin">
 * in the layout, which makes Turbo wrap page swaps in
 * document.startViewTransition(). Custom durations/easings come
 * from primitive tokens so animation feel matches the rest of UI.
 *
 * Default behavior: a calm pure-opacity crossfade between pages.
 * Named transitions (vt-* utilities) are reserved for explicit
 * shared-element morphs — apply sparingly to truly distinct
 * elements you want to track across navigation. Headings/text
 * usually look better as part of the root crossfade.
 * ============================================================ */

/* Root crossfade: opacity-only, slightly slow + emphasized easing
 * for a "considered" feel. Override `mix-blend-mode` to avoid the
 * default plus-lighter blending which can wash out semi-transparent
 * elements during the overlap. */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--duration-slow);
  animation-timing-function: var(--ease-emphasized);
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

@keyframes vt-fade-in {
  from { opacity: 0; }
}

/* Chrome elements (sidebar, topnav) are persisted across navigations via
 * data-turbo-permanent, but the default view-transition still snapshots
 * them as part of the root crossfade — making the chrome appear to fade
 * even though the underlying DOM didn't change. Naming them gives each
 * its own transition group; with the same DOM on both sides, there's
 * nothing to animate. */
aside[aria-label="Sidebar"] { view-transition-name: chrome-sidebar; }
header[role="banner"]       { view-transition-name: chrome-topnav; }

::view-transition-old(chrome-sidebar),
::view-transition-new(chrome-sidebar),
::view-transition-old(chrome-topnav),
::view-transition-new(chrome-topnav) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}