/* Page Transitions — bidirectional slide + fade. * * Uses Astro's native `data-astro-transition` attribute (set by ClientRouter * on ) to select the correct direction. Supports two modes: * 1. View Transitions API (modern browsers) — uses ::view-transition-* * 2. Fallback (no VT API) — animates html/body via CSS keyframes * * Respects prefers-reduced-motion in both modes. */ /* ───────────────────────────────────────────────────────── VIEW TRANSITIONS API MODE ───────────────────────────────────────────────────────── */ /* Forward navigation: new page slides in from the right */ html[data-astro-transition="forward"]::view-transition-old(root) { animation: pt-slide-out-left 320ms cubic-bezier(0.4, 0, 0.2, 1) both, pt-fade-out 320ms ease-out both; } html[data-astro-transition="forward"]::view-transition-new(root) { animation: pt-slide-in-from-right 320ms cubic-bezier(0.4, 0, 0.2, 1) both, pt-fade-in 320ms ease-out both; } /* Back/forward-cache traverse: new page slides in from the left */ html[data-astro-transition="back"]::view-transition-old(root) { animation: pt-slide-out-right 320ms cubic-bezier(0.4, 0, 0.2, 1) both, pt-fade-out 320ms ease-out both; } html[data-astro-transition="back"]::view-transition-new(root) { animation: pt-slide-in-from-left 320ms cubic-bezier(0.4, 0, 0.2, 1) both, pt-fade-in 320ms ease-out both; } /* Default (no direction yet set): disable the default crossfade */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* ───────────────────────────────────────────────────────── FALLBACK MODE (no View Transitions API support) Uses data-astro-transition-fallback="old"|"new" on ───────────────────────────────────────────────────────── */ @keyframes pt-fallback-slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-40px); opacity: 0; } } @keyframes pt-fallback-slide-in-from-right { from { transform: translateX(40px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } @keyframes pt-fallback-slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(40px); opacity: 0; } } @keyframes pt-fallback-slide-in-from-left { from { transform: translateX(-40px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } html[data-astro-transition="forward"][data-astro-transition-fallback="old"] body { animation: pt-fallback-slide-out-left 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } html[data-astro-transition="forward"][data-astro-transition-fallback="new"] body { animation: pt-fallback-slide-in-from-right 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } html[data-astro-transition="back"][data-astro-transition-fallback="old"] body { animation: pt-fallback-slide-out-right 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } html[data-astro-transition="back"][data-astro-transition-fallback="new"] body { animation: pt-fallback-slide-in-from-left 320ms cubic-bezier(0.4, 0, 0.2, 1) both; } /* ───────────────────────────────────────────────────────── KEYFRAMES (shared by both modes) ───────────────────────────────────────────────────────── */ @keyframes pt-slide-in-from-right { from { transform: translateX(100%); } to { transform: translateX(0); } } @keyframes pt-slide-out-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes pt-slide-in-from-left { from { transform: translateX(-100%); } to { transform: translateX(0); } } @keyframes pt-slide-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } } @keyframes pt-fade-in { from { opacity: 0.6; } to { opacity: 1; } } @keyframes pt-fade-out { from { opacity: 1; } to { opacity: 0.6; } } /* ───────────────────────────────────────────────────────── REDUCED MOTION — disable all animations ───────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html[data-astro-transition="forward"]::view-transition-old(root), html[data-astro-transition="forward"]::view-transition-new(root), html[data-astro-transition="back"]::view-transition-old(root), html[data-astro-transition="back"]::view-transition-new(root), html[data-astro-transition="forward"][data-astro-transition-fallback="old"] body, html[data-astro-transition="forward"][data-astro-transition-fallback="new"] body, html[data-astro-transition="back"][data-astro-transition-fallback="old"] body, html[data-astro-transition="back"][data-astro-transition-fallback="new"] body { animation: none; } }