.route-transition { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; pointer-events: none; background: #2860ad; clip-path: inset(100% 0 0 0); }
.route-transition::before { content: ""; position: absolute; inset: 0; opacity: .22; background: linear-gradient(135deg,rgba(255,255,255,.18) 1px,transparent 1px),linear-gradient(45deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size: 46px 46px; }
.route-transition.is-active { clip-path: inset(0); transition: clip-path .62s cubic-bezier(.76,0,.24,1); }
.route-transition.is-leaving { clip-path: inset(0 0 100% 0); transition: clip-path .75s cubic-bezier(.76,0,.24,1) .2s; }
.transition-content { position: relative; width: min(290px,54vw); display: grid; place-items: center; }
.transition-content::before { content: ""; position: absolute; width: 1px; height: 0; background: rgba(255,255,255,.72); transform: rotate(32deg); }
.transition-logo-wrap { width: 100%; overflow: hidden; clip-path: inset(0 100% 0 0); }
.transition-logo { display: block; width: 100%; height: auto; opacity: 0; transform: scale(.82) rotate(-7deg); }
.transition-scan { position: absolute; left: -8%; right: -8%; top: 51%; height: 4px; background: #d7e9ff; transform: scaleX(0); transform-origin: left; }
.transition-label { position: absolute; top: calc(100% + 26px); left: 50%; transform: translateX(-50%); white-space: nowrap; margin: 0; color: #eaf2ff; opacity: 0; font: 11px 'DM Mono'; letter-spacing: .15em; }
.route-transition.is-active .transition-content::before { animation: transition-stroke .55s cubic-bezier(.65,0,.35,1) .25s forwards; }
.route-transition.is-active .transition-logo-wrap { animation: logo-reveal .7s cubic-bezier(.65,0,.35,1) .32s forwards; }
.route-transition.is-active .transition-logo { animation: logo-arrive .7s cubic-bezier(.22,1,.36,1) .32s forwards; }
.route-transition.is-active .transition-scan { animation: scan .5s cubic-bezier(.65,0,.35,1) .67s forwards; }
.route-transition.is-active .transition-label { animation: label-in .35s ease .7s forwards; }
.route-transition.is-leaving .transition-logo-wrap { animation: logo-dismiss .35s ease forwards; }
.route-transition.is-leaving .transition-label { opacity: 0; transition: opacity .15s; }
@keyframes transition-stroke { to { height: 170%; } }
@keyframes logo-reveal { to { clip-path: inset(0); } }
@keyframes logo-arrive { to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes scan { 55% { transform: scaleX(1); } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes label-in { to { opacity: 1; transform: translate(-50%,4px); } }
@keyframes logo-dismiss { to { clip-path: inset(0 0 100% 0); } }
@media (prefers-reduced-motion: reduce) { .route-transition,.route-transition * { animation: none!important; transition-duration: .01ms!important; } }