.page-transition { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #020307; pointer-events: none; transform: translate3d(0,0,0); animation: page-transition-reveal .86s .12s cubic-bezier(.76,0,.24,1) forwards; }
.page-transition-light { position: absolute; z-index: -2; inset: -42% -22%; background: radial-gradient(ellipse 30% 34% at 8% 77%,rgba(17,92,244,.96),rgba(7,48,167,.52) 46%,transparent 76%),radial-gradient(ellipse 38% 29% at 31% 43%,rgba(19,96,246,.86),rgba(7,45,158,.42) 48%,transparent 79%),radial-gradient(ellipse 46% 25% at 60% 24%,rgba(15,80,221,.76),rgba(5,37,143,.36) 50%,transparent 80%),radial-gradient(ellipse 36% 34% at 94% 15%,rgba(45,132,255,.98),rgba(13,73,211,.52) 45%,transparent 77%); filter: blur(58px) saturate(1.12); opacity: .85; transform: rotate(-5deg) scale(1.08); animation: page-transition-breathe 5s ease-in-out infinite; }
.page-transition-grain { position: absolute; z-index: -1; inset: 0; opacity: .14; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.page-transition-brand { display: flex; align-items: center; gap: .72rem; color: rgba(246,248,252,.96); font: 520 .86rem/1 Inter,"Helvetica Neue","Segoe UI",Arial,sans-serif; letter-spacing: -.015em; opacity: 1; transform: translate3d(0,0,0); transition: opacity .22s ease,transform .5s cubic-bezier(.2,.75,.2,1); }
.page-transition-brand img { width: 1.55rem; height: 1.55rem; }
.page-transition-line { position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(114,164,255,.82),transparent); box-shadow: 0 0 1.4rem rgba(38,119,255,.78); }
.page-transition.is-exiting { pointer-events: all; animation: page-transition-cover .7s cubic-bezier(.76,0,.24,1) forwards; }
.page-transition.is-exiting .page-transition-brand { opacity: 0; transform: translate3d(0,8px,0); }
.page-transition.is-covered .page-transition-brand { opacity: 1; transform: translate3d(0,0,0); }
html.is-navigating { cursor: wait; }
@keyframes page-transition-cover { from { transform: translate3d(0,101%,0); } to { transform: translate3d(0,0,0); } }
@keyframes page-transition-reveal { from { transform: translate3d(0,0,0); } to { transform: translate3d(0,-101%,0); } }
@keyframes page-transition-breathe { 0%,100% { opacity: .72; transform: rotate(-6deg) scale(.98); } 50% { opacity: 1; transform: rotate(-3deg) scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .page-transition { display: none; animation: none; } }