/* View Transitions for stacked page navigation (Turbo 8 native) * * Page-stack transition model: * Forward (drill-down): old content shifts left and fades out quickly. * New content slides in from the right. * Back (breadcrumb): old content exits to the right. * Previous content slides back in from the left. * Timing: 250ms ease-out — fast and crisp. * * Only the main content area transitions. The sidebar, beta alert bar, and * mobile header stay completely still via separate view-transition-names. * * IMPORTANT: Turbo sets data-turbo-visit-direction on at visit start, * before startViewTransition() captures snapshots. Both old and new states * see the attribute, so CSS selectors match correctly throughout the animation. */ /* ── 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 beta bar, etc.) ──────────── */ ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; } /* ── Forward: drill-down navigation ──────────────────────────────── */ html[data-turbo-visit-direction="forward"]::view-transition-old(main-content) { animation: page-fade-left 250ms ease-out both; } html[data-turbo-visit-direction="forward"]::view-transition-new(main-content) { animation: page-enter-right 250ms ease-out both; } /* ── Back: breadcrumb / browser back ─────────────────────────────── */ html[data-turbo-visit-direction="back"]::view-transition-old(main-content) { animation: page-exit-right 250ms ease-out both; } html[data-turbo-visit-direction="back"]::view-transition-new(main-content) { animation: page-enter-left 250ms ease-out 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 ───────────────────────────────────────────────────── */ /* Forward: old content shifts left and vanishes */ @keyframes page-fade-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-15%); opacity: 0; } } /* Forward: new content slides in from the right */ @keyframes page-enter-right { from { transform: translateX(80%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* Back: old content exits to the right */ @keyframes page-exit-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(80%); opacity: 0; } } /* Back: previous content slides back in from the left */ @keyframes page-enter-left { from { transform: translateX(-15%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }