special-pages/pages/onboarding/app/components/App.module.css
.main {
    position: relative;
}
.container {
    position: relative;
    width: calc(100% - 64px);
    max-width:  640px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 80px;
    padding-bottom: 80px;
    z-index: 1;
    transition: transform 0.3s ease-in-out;
    transform: translateY(0);

    &[data-current="welcome"] {
        transform: translateY(calc(50vh - 288px));
    }
    &[data-current="getStarted"] {
        transform: translateY(calc(50vh - 288px));
    }
    &[data-exiting="true"] {

    }
}

[data-exiting="true"] {
    animation-name: slideout;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

    &[data-delay="normal"] {
        animation-delay: var(--anim-delay);
    }

    &[data-delay="double"] {
        animation-delay: var(--anim-delay-double);
    }

    &[data-current="welcome"], [data-current="getStarted"] {
        animation: none;
    }
}

@keyframes slideout {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(-100px);
        opacity: 0;
    }
}
