<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/**
* Styles for managing the echo animations. These were generated by Aphrodite's
* autoprefixer, but some minor tweaks were applied to get them working on mobile
* Safari. Ideally, we'd be generating these styles with Aphrodite (along with
* ReactCSSTransitionGroup's support for custom classnames), but the generated
* styles have issues on mobile Safari.
*   See: https://github.com/Khan/aphrodite/issues/68.
*
 * If the animation durations change, the corresponding values in
 * echo-manager.js must change as well.
 */

/* Variant A: Slide and fade. */

.echo-slide-and-fade-enter {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    -moz-transform: translate3d(0, 0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) !important;
}

.echo-slide-and-fade-enter.echo-slide-and-fade-enter-active {
    opacity: 0 !important;
    transform: translate3d(0, -33%, 0) !important;
    -webkit-transform: translate3d(0, -33%, 0) !important;
    -moz-transform: translate3d(0, -33%, 0) !important;
    -ms-transform: translate3d(0, -33%, 0) !important;

    /**
     * TODO(charlie): These times are intentionally different, which means that
     * the animation really "ends" after 400ms cubic-bezier(1, 0, 0.9, 1) (since
     * the opacity goes to 0), even though the transform doesn't complete.
     * There's probably a way to achieve the same effect by manipulating the
     * transform's Bezier curve and total displacement.
     */
    transition: -webkit-transform 800ms cubic-bezier(0, 1, 0.25, 1),-moz-transform 800ms cubic-bezier(0, 1, 0.25, 1),-ms-transform 800ms cubic-bezier(0, 1, 0.25, 1),transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
    -webkit-transform: translate3d(0, -33%, 0) !important;
    -moz-transform: translate3d(0, -33%, 0) !important;
    -ms-transform: translate3d(0, -33%, 0) !important;
    -webkit-transition: -webkit-transform 800ms cubic-bezier(0, 1, 0.25, 1),transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
    -moz-transition: -moz-transform 800ms cubic-bezier(0, 1, 0.25, 1),transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
    -ms-transition: -ms-transform 800ms cubic-bezier(0, 1, 0.25, 1),transform 800ms cubic-bezier(0, 1, 0.25, 1), opacity 400ms cubic-bezier(1, 0, 0.9, 1) !important;
}

/* Variant B: Fade, but don't slide. */

.echo-fade-only-enter {
    opacity: 1 !important;
}

.echo-fade-only-enter.echo-fade-only-enter-active {
    opacity: 0 !important;
    transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
    -webkit-transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
    -moz-transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
    -ms-transition: opacity 300ms cubic-bezier(0.25, 0, 0.75, 1) !important;
}

/* Variant C: Fade for a longer duration, but again, don't slide. */

.echo-long-fade-only-enter {
    opacity: 1 !important;
}

.echo-long-fade-only-enter.echo-long-fade-only-enter-active {
    opacity: 0 !important;
    transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
    -webkit-transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
    -moz-transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
    -ms-transition: opacity 400ms cubic-bezier(0.75, 0, 0.75, 1) !important;
}
</pre></body></html>