.world-crossing {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #6f331c, #280f16 42%, #14090d 75%);
  animation: crossing-veil .56s ease-out both;
}
.world-crossing::before, .world-crossing::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: min(60vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 35deg, transparent, #ffde9d, transparent 42%, #d77732, #fff0bd, transparent 88%);
  mask: radial-gradient(circle, transparent 53%, #000 58%, transparent 68%);
  animation: crossing-ring .56s cubic-bezier(.3,.05,.6,1) both;
}
.world-crossing::after { animation-delay: .045s; filter: blur(9px); }
.world-crossing span {
  padding-top: 9rem;
  color: #ffe8bc;
  font: 600 clamp(13px, 2vw, 18px)/1.4 Georgia, serif;
  letter-spacing: .12em;
  text-shadow: 0 2px 12px #17080c;
}
@keyframes crossing-veil { from { opacity: 0; } 50%, to { opacity: 1; } }
@keyframes crossing-ring { from { transform: scale(.28) rotate(-24deg); opacity: 0; } 55% { opacity: 1; } to { transform: scale(2.4) rotate(58deg); opacity: .25; } }