/* amish - seamless SSR transitions */ @view-transition { navigation: auto; } /* No animation by default - instant swap */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; } /* Optional fade transition - add .amish-fade to */ html.amish-fade::view-transition-old(root) { animation: amish-fade-out 0.2s ease-out; } html.amish-fade::view-transition-new(root) { animation: amish-fade-in 0.2s ease-out; } @keyframes amish-fade-out { to { opacity: 0; } } @keyframes amish-fade-in { from { opacity: 0; } } /* Persist classes - elements stay in place across navigations */ .amish-persist { view-transition-name: persist; } .amish-persist-header { view-transition-name: header; } .amish-persist-nav { view-transition-name: nav; } .amish-persist-sidebar { view-transition-name: sidebar; } .amish-persist-footer { view-transition-name: footer; } /* Loading bar */ .amish-loader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: #3b82f6; transform-origin: left; transform: scaleX(0); z-index: 9999; pointer-events: none; } /* Show loader during navigation */ html:active-view-transition .amish-loader { animation: amish-load 0.3s ease-out forwards; } @keyframes amish-load { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } /* Spinner */ .amish-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 3px solid #e5e7eb; border-top-color: #3b82f6; border-radius: 50%; opacity: 0; pointer-events: none; z-index: 9999; view-transition-name: spinner; transition: opacity 0.2s 0.15s; /* short delay bridges :active → view-transition */ animation: amish-spin 0.6s linear infinite; /* always spinning */ } html:has(a:active) .amish-spinner, html:active-view-transition .amish-spinner { opacity: 1; transition: opacity 0s; /* instant on */ } @keyframes amish-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }