.page-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: rgb(10 10 16 / 62%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: progress;
}
.page-transition__symbol { position: relative; width: 112px; height: 112px; }
.page-transition__logo, .page-transition__echo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
}
.page-transition__logo { filter: drop-shadow(0 0 18px rgb(77 99 255 / 45%)); }
.page-transition__echo { opacity: 0; filter: blur(4px); }
.page-transition__halo {
  position: absolute;
  width: min(320px, 90vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(85 83 255 / 20%), rgb(36 149 255 / 7%) 42%, transparent 70%);
}
.page-transition__orbit {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  border: 1px solid rgb(142 153 255 / 8%);
  border-top-color: rgb(90 195 255 / 60%);
  border-right-color: rgb(144 89 255 / 32%);
  transform: rotate(-35deg);
}
.page-transition__spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #76dfff; box-shadow: 0 0 12px #557bff; }
.page-transition__spark--one { top: -12px; right: 0; }
.page-transition__spark--two { bottom: -9px; left: 6px; background: #a28bff; }
.page-transition--leave { animation: transition-veil-in 180ms ease-out both; }
.page-transition--leave .page-transition__logo { animation: transition-logo-in 180ms cubic-bezier(.16, 1, .3, 1) both; }
.page-transition--leave .page-transition__echo { animation: transition-echo-in 180ms ease-out both; }
.page-transition--leave .page-transition__orbit { animation: transition-orbit-in 180ms ease-out both; }
.page-transition--leave .page-transition__halo { animation: transition-halo-in 180ms ease-out both; }
.page-transition--leave .page-transition__spark { animation: transition-spark-in 180ms ease-out both; }
.page-transition--arrive { animation: transition-veil-out 220ms ease-in-out both; pointer-events: none; }
.page-transition--arrive .page-transition__logo { animation: transition-logo-out 220ms ease-in both; }
.page-transition--arrive .page-transition__echo { animation: transition-echo-out 220ms ease-out both; }
.page-transition--arrive .page-transition__orbit { animation: transition-orbit-out 220ms ease-out both; }
.page-transition--arrive .page-transition__spark { animation: transition-spark-out 220ms ease-out both; }
@keyframes transition-veil-in { from { background: transparent; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes transition-veil-out { to { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); } }
@keyframes transition-logo-in { from { opacity: 0; transform: scale(.65) rotate(-16deg); filter: blur(10px); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes transition-logo-out { 25% { opacity: 1; } to { opacity: 0; transform: scale(1.18) translateY(-8px); filter: blur(6px); } }
@keyframes transition-echo-in { from { opacity: 0; transform: scale(1.45) rotate(12deg); } 40% { opacity: .25; } to { opacity: 0; transform: scale(1); } }
@keyframes transition-echo-out { from { opacity: .2; transform: scale(1); } to { opacity: 0; transform: scale(1.55); filter: blur(12px); } }
@keyframes transition-orbit-in { from { opacity: 0; transform: scale(.6) rotate(-150deg); } to { opacity: 1; transform: scale(1) rotate(-35deg); } }
@keyframes transition-orbit-out { to { opacity: 0; transform: scale(1.35) rotate(70deg); } }
@keyframes transition-halo-in { from { opacity: 0; transform: scale(.5); } }
@keyframes transition-spark-in { from { opacity: 0; transform: scale(0) translateY(20px); } }
@keyframes transition-spark-out { to { opacity: 0; transform: translateY(-20px); } }
@media (max-width: 480px) {
  .page-transition__symbol { width: 96px; height: 96px; }
  .page-transition__orbit { inset: -15px; }
}
.reduce-motion .page-transition { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  .page-transition, .page-transition * { animation: none !important; }
}