@charset "UTF-8";

#welcome-screen { position: fixed; overflow: hidden; left: 0; top: 0; width: 100%; height: 100%; z-index: 99999; background: #fff; } #welcome-screen-background { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #091825; } #welcome-screen-foreground { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #welcome-screen-logo { position: relative; overflow: hidden; width: 120px; height: 120px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } #welcome-screen-logo-image { max-width: 100%; max-height: 100%; } #welcome-screen-logo-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #091825; opacity: 0; } #welcome-screen.welcome-screen-state-bg-intro > #welcome-screen-foreground { display: none; } #welcome-screen.welcome-screen-state-outro { background: none; } .welcome-screen-state-logo-intro #welcome-screen-logo { animation: welcome-screen-logo-intro-logo 900ms both cubic-bezier(0.165, 0.84, 0.44, 1); } @keyframes welcome-screen-logo-intro-logo { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } } .welcome-screen-state-outro #welcome-screen-logo { animation: welcome-screen-outro-logo 300ms 0ms both ease; } @keyframes welcome-screen-outro-logo { 0% { opacity: 1 } 100% { opacity: 0 } } .welcome-screen-state-bg-intro #welcome-screen-background { animation: welcome-screen-bg-intro-background 900ms both cubic-bezier(0.645, 0.045, 0.355, 1); } @keyframes welcome-screen-bg-intro-background { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .welcome-screen-state-outro #welcome-screen-background { animation: welcome-screen-outro-background 900ms reverse both cubic-bezier(0.645, 0.045, 0.355, 1); } @keyframes welcome-screen-outro-background { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } } .welcome-screen-state-loop #welcome-screen-logo-cover { animation: welcome-screen-loop-logo-cover 2200ms infinite ease-in-out; opacity: 0.85; } @keyframes welcome-screen-loop-logo-cover { 0% { transform: translateX(-120px) } 50% { transform: translateX( 120px) } 100% { transform: translateX( 120px) } }