/* The move between the sign-in page and the desktop, in browsers that animate navigations (others simply switch pages).
   Signing in: the dark panel collapses to the left while the form fades into the desktop. Signing out runs the other way.
   A cross-document transition takes its animation rules from the page being navigated TO, so both pages load this file. */

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .55s;
}

::view-transition-old(login-hero) {
    transform-origin: left center;
    animation: hero-collapse .55s cubic-bezier(.65, 0, .35, 1) both;
}

::view-transition-new(login-hero) {
    transform-origin: left center;
    animation: hero-expand .55s cubic-bezier(.65, 0, .35, 1) both;
}

::view-transition-old(login-form) {
    animation: fade-out .4s ease both;
}

::view-transition-new(login-form) {
    animation: fade-in .4s .15s ease both;
}

@keyframes hero-collapse {
    to {
        opacity: .35;
        transform: scaleX(0);
    }
}

@keyframes hero-expand {
    from {
        opacity: .35;
        transform: scaleX(0);
    }
}

@keyframes fade-out {
    to {
        opacity: 0;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
}

/* In a narrow window the sign-in page has no dark panel (login.css hides it below 650px), so there is nothing to collapse: the form itself moves instead. Signing in, it lifts away and fades while the
   desktop comes in under it; signing out, it rises into place from below. (These come after the rules above, so they win in a narrow window, and .no-animations still wins over both.) */
@media (max-width: 650px) {
    ::view-transition-old(login-form) {
        animation: form-leave .5s cubic-bezier(.4, 0, .2, 1) both;
    }

    ::view-transition-new(login-form) {
        animation: form-arrive .5s .1s cubic-bezier(.2, 0, 0, 1) both;
    }
}

@keyframes form-leave {
    to {
        opacity: 0;
        transform: translateY(-36px) scale(.96);
    }
}

@keyframes form-arrive {
    from {
        opacity: 0;
        transform: translateY(36px) scale(.96);
    }
}

/* Under .no-animations (set on the root by dom.js setAnimationsEnabled; never set for now). */
.no-animations::view-transition-group(*),
.no-animations::view-transition-old(*),
.no-animations::view-transition-new(*) {
    animation: none;
}