/* Phase 0 app transitions: screens should not appear like PowerPoint slides from 2009. */
:root {
    --stellar-screen-transition-ms: 190ms;
}

.app-screen:not(.is-hidden),
.mobile-screen:not(.is-hidden),
.auth-panel.is-active,
.screen-view:not(.is-hidden),
[data-screen]:not(.is-hidden),
.chat-thread:not(.is-hidden),
.chats-list-view:not(.is-hidden),
.groups-list-view:not(.is-hidden),
.calls-list-view:not(.is-hidden),
.settings-view:not(.is-hidden) {
    animation: stellarScreenFadeIn var(--stellar-screen-transition-ms) ease both;
}

@keyframes stellarScreenFadeIn {
    from {
        opacity: 0;
        transform: translate3d(0, 8px, 0) scale(0.992);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        filter: blur(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app-screen:not(.is-hidden),
    .mobile-screen:not(.is-hidden),
    .auth-panel.is-active,
    .screen-view:not(.is-hidden),
    [data-screen]:not(.is-hidden),
    .chat-thread:not(.is-hidden),
    .chats-list-view:not(.is-hidden),
    .groups-list-view:not(.is-hidden),
    .calls-list-view:not(.is-hidden),
    .settings-view:not(.is-hidden) {
        animation: none !important;
    }
}