/* View Transitions — iOS-like slide animations for page navigation. Turbo sets data-turbo-visit-direction on : "forward" for advance, "back" for restoration, "none" for replace. */ .mobile-main { view-transition-name: main-content; } .mobile-pill-nav { view-transition-name: tab-bar; } /* Instant crossfade keeps the tab bar as its own layer (on top of main-content) while swapping visible/hidden snapshots in 0s. */ ::view-transition-group(tab-bar), ::view-transition-old(tab-bar), ::view-transition-new(tab-bar) { animation-duration: 0s; } /* Disable the default root crossfade */ ::view-transition-group(root) { animation-duration: 0ms; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* Forward: new page slides in from right, old slides left with parallax */ html[data-turbo-visit-direction="forward"]::view-transition-old(main-content) { animation: slide-out-left 300ms cubic-bezier(0.32, 0.72, 0, 1) both; } html[data-turbo-visit-direction="forward"]::view-transition-new(main-content) { animation: slide-in-from-right 300ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* Back: reverse of forward */ html[data-turbo-visit-direction="back"]::view-transition-old(main-content) { animation: slide-out-right 300ms cubic-bezier(0.32, 0.72, 0, 1) both; } html[data-turbo-visit-direction="back"]::view-transition-new(main-content) { animation: slide-in-from-left 300ms cubic-bezier(0.32, 0.72, 0, 1) both; } /* Morph refreshes — no animation */ html[data-turbo-visit-direction="none"]::view-transition-old(main-content), html[data-turbo-visit-direction="none"]::view-transition-new(main-content) { animation: none; } @keyframes slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-30%); opacity: 0.8; } } @keyframes slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes slide-in-from-left { from { transform: translateX(-30%); opacity: 0.8; } to { transform: translateX(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mobile-main { view-transition-name: none; } .mobile-pill-nav { view-transition-name: none; } }