.page-transition {
  position: fixed;
  z-index: 2147483646;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background: #111421f2;
  color: #f8f7fb;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms ease, visibility 240ms ease;
}
.page-transition.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.page-transition::before {
  content: '';
  position: absolute;
  width: min(76vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #a98dff34, #a98dff10 42%, transparent 70%);
  filter: blur(20px);
  animation: page-transition-breathe 1.5s ease-in-out infinite alternate;
}
.page-transition::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: linear-gradient(#ffffff0b 1px, transparent 1px), linear-gradient(90deg, #ffffff0b 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle, #000 8%, transparent 75%);
}
.page-transition__content { position: relative; z-index: 1; width: min(100%, 350px); text-align: center; }
.page-transition__icon {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border: 1px solid #d8c8ff72;
  border-radius: 19px;
  background: linear-gradient(145deg, #b99bff, #7858df);
  box-shadow: 0 0 0 8px #c6b2ff12, 0 18px 50px #9972ff5c;
  transform: rotate(-7deg);
  animation: page-transition-tilt 900ms ease-in-out infinite alternate;
}
.page-transition__icon svg { width: 33px; height: 33px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.page-transition__eyebrow { display: block; margin-bottom: 10px; color: #c4b3ff; font: 600 10px/1.4 'Geist Mono', monospace; letter-spacing: .22em; text-transform: uppercase; }
.page-transition__title { display: block; font: 700 clamp(24px, 6vw, 35px)/1.1 'Geist', sans-serif; letter-spacing: -.055em; }
.page-transition__title em { color: #c6abff; font-style: normal; }
.page-transition__track { display: block; height: 4px; margin: 25px auto 0; overflow: hidden; border-radius: 10px; background: #ffffff26; }
.page-transition__track::before { content: ''; display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #9e7dff, #d6fc9e); box-shadow: 0 0 18px #c1a8ff; animation: page-transition-sweep 1s ease-in-out infinite; }
.page-transition__hint { display: block; margin-top: 13px; color: #abb0c8; font: 500 11px/1.4 'Geist Mono', monospace; letter-spacing: .03em; }
@keyframes page-transition-sweep { from { transform: translateX(-110%); } to { transform: translateX(340%); } }
@keyframes page-transition-breathe { to { transform: scale(1.16); opacity: .72; } }
@keyframes page-transition-tilt { to { transform: rotate(5deg) translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .page-transition { display: none !important; } }