.drx-entering{overflow:hidden}
.drx-portal{position:fixed;inset:0;z-index:2147483000;pointer-events:all;overflow:hidden;background:transparent;animation:drx-portal-dark 1.35s both}
.drx-portal__ring{position:absolute;left:var(--portal-x);top:var(--portal-y);width:110px;height:150px;border:7px solid #fff;border-radius:50%;box-shadow:0 0 22px #fff,inset 0 0 24px var(--portal-color),0 0 70px 18px var(--portal-color);background:#02040c;transform:translate(-50%,-50%) scale(.1);animation:drx-portal-open 1.35s cubic-bezier(.65,0,.25,1) both}
.drx-portal__traveler{position:absolute;left:var(--portal-x);top:var(--portal-y);width:120px;height:240px;filter:drop-shadow(0 12px 18px var(--portal-color));animation:drx-portal-fall .95s .12s cubic-bezier(.45,.03,.75,.65) both}
.drx-portal__traveler svg{width:100%;height:100%}
.drx-portal__flash{position:absolute;inset:0;background:var(--portal-color);animation:drx-portal-flash 1.35s both}
@keyframes drx-portal-dark{0%{background:#02040c00}35%,100%{background:#02040ce8}}
@keyframes drx-portal-open{0%{transform:translate(-50%,-50%) scale(.1);opacity:0}25%{transform:translate(-50%,-50%) scale(1);opacity:1}70%{transform:translate(-50%,-50%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(35);opacity:1}}
@keyframes drx-portal-fall{0%{transform:translate(-110%,-150%) rotate(-30deg) scale(1.25);opacity:0}15%{opacity:1}65%{opacity:1}100%{transform:translate(-50%,-50%) rotate(210deg) scale(.02);opacity:0}}
@keyframes drx-portal-flash{0%,78%{opacity:0}100%{opacity:1}}
@media(max-width:580px){.drx-portal__traveler{width:86px;height:172px}}
@media(prefers-reduced-motion:reduce){.drx-portal,.drx-portal *{animation:none!important}}