/* ────────────────────────────────────────────────────────────────── Page transitions — Linear/Stripe-style elegant fade + slide ────────────────────────────────────────────────────────────────── */ /* Top progress bar shown during route navigation. JS toggles `.is-loading` on while the next page is rendering. */ .ep-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 12000; pointer-events: none; background: transparent; overflow: hidden; } .ep-progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, #EA8FD7 0%, #F5CEED 50%, #EA8FD7 100%); box-shadow: 0 0 10px rgba(234, 143, 215, 0.7), 0 0 4px rgba(234, 143, 215, 0.5); transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease; opacity: 0; } .ep-progress.is-active .ep-progress-fill { opacity: 1; } .ep-progress.is-done .ep-progress-fill { opacity: 0; transition: opacity 0.4s ease 0.15s; } /* Content swap animation — fallback for browsers without View Transitions API (Safari < 18, old Firefox). Triggered by JS adding `.is-entering`. */ #app-content.is-entering { animation: ep-page-enter 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ep-page-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* View Transitions API — Chrome/Edge/Safari 18+. Customizes the built-in crossfade with our easing + a subtle vertical motion. */ ::view-transition-old(root) { animation: ep-vt-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(root) { animation: ep-vt-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } @keyframes ep-vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes ep-vt-in { from { opacity: 0; transform: translateY(10px); } } /* Sidebar item: when clicked, give it a brief active feedback so the user knows the click registered before the page finishes loading. */ .sidebar-item.is-loading { position: relative; } .sidebar-item.is-loading::after { content: ''; position: absolute; right: 14px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 1.5px solid rgba(234, 143, 215, 0.3); border-top-color: #EA8FD7; border-radius: 50%; animation: ep-spin 0.6s linear infinite; } @keyframes ep-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .ep-progress-fill, ::view-transition-old(root), ::view-transition-new(root), #app-content.is-entering, .sidebar-item.is-loading::after { animation: none !important; transition: none !important; } .ep-progress { display: none; } }