/* Page transition overlay — uses body pseudo-elements so no markup is needed. Opaque by default (covers the page during load). Adding `.page-transition-out` to fades it away. */ body::before { content: ''; position: fixed; inset: 0; background: #060d13; z-index: 9999; opacity: 1; pointer-events: all; transition: opacity 0.35s ease; } body::after { content: ''; position: fixed; top: calc(50% - 16px); left: calc(50% - 16px); width: 32px; height: 32px; border: 2px solid rgba(255, 255, 255, 0.12); border-top-color: rgba(255, 255, 255, 0.55); border-radius: 50%; z-index: 10000; animation: page-transition-spin 0.8s linear infinite; opacity: 1; pointer-events: none; transition: opacity 0.35s ease; } body.page-transition-out::before, body.page-transition-out::after { opacity: 0; pointer-events: none; } @keyframes page-transition-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { body::before, body::after { transition: none; } body::after { animation: none; } }