/* Form and nebula fade together to the next page's neutral grey background. */
:root{--transition-grey:#242424}
body.neutral-page{background:var(--transition-grey)}
body.login-transition{overflow:hidden;background:var(--transition-grey)}
.login-transition .scene{background:var(--transition-grey)}
.login-transition .wrap{perspective:1000px;pointer-events:none}
.login-transition .card{transform-origin:50% 50%;will-change:transform,opacity;animation:login-recede 2.5s cubic-bezier(.4,0,.25,1) forwards}
.login-transition .bg{position:fixed;inset:0;will-change:opacity;animation:nebula-fade 2.5s ease-in-out forwards}
.smoke-arrival{position:fixed;inset:0;z-index:2147483646;pointer-events:none;background:var(--transition-grey);opacity:1;transition:opacity .65s ease-out}
html.smoke-pending{background:var(--transition-grey)}
.smoke-pending body{visibility:hidden}
.smoke-pending .smoke-arrival{visibility:visible}
.smoke-arrival.is-clearing{opacity:0}
@keyframes nebula-fade{0%{opacity:1}85%,100%{opacity:0}}
@keyframes login-recede{0%{transform:translateZ(0) scale(1);opacity:1}35%{opacity:.65}85%{opacity:0}100%{transform:translateZ(-850px) scale(.3);opacity:0}}
@media(prefers-reduced-motion:reduce){.login-transition .card{animation:login-fade 2.5s linear forwards}.smoke-arrival{transition-duration:.2s}}
@keyframes login-fade{from{opacity:1}to{opacity:0}}