/* Login is a single authored depth transition; ordinary navigation keeps its existing motion. */
@view-transition{navigation:auto}
html[data-login-exit] .login-password input{color:transparent!important;text-shadow:none!important}
html[data-login-exit] #alertBox{visibility:hidden}
html[data-login-arrival] *{view-transition-name:none!important}
html:active-view-transition-type(login-dive)::view-transition{background:var(--xj-canvas,#fff)}
html:active-view-transition-type(login-dive)::view-transition-group(*){animation:none!important}
html:active-view-transition-type(login-dive)::view-transition-old(*),html:active-view-transition-type(login-dive)::view-transition-new(*){mix-blend-mode:normal;transform-origin:center}
html:active-view-transition-type(login-dive)::view-transition-old(root){animation:xj-login-water-out 650ms ease-out both}
html:active-view-transition-type(login-dive)::view-transition-new(root){animation:xj-login-surface-in 800ms cubic-bezier(.16,1,.3,1) 0ms both}
@keyframes xj-login-water-out{to{opacity:0;filter:blur(4px);transform:scale(1.12)}}
@keyframes xj-login-surface-in{from{opacity:0;filter:blur(14px);transform:perspective(1200px) translateY(45px) scale(.22) rotateX(7deg)}35%{opacity:1}to{opacity:1;filter:blur(0);transform:perspective(1200px) translateY(0) scale(1) rotateX(0)}}

@media(prefers-reduced-motion:reduce){html:active-view-transition-type(login-dive)::view-transition-old(*),html:active-view-transition-type(login-dive)::view-transition-new(*){animation:none!important}}
html[data-xj-motion=reduce]:active-view-transition-type(login-dive)::view-transition-old(*),html[data-xj-motion=reduce]:active-view-transition-type(login-dive)::view-transition-new(*){animation:none!important}