/* The loading screen, see kit/splash.js. Everything sits on the page colour, so the app appears over the same surface. */
.splash { display: none; }
.splash-on .splash { display: flex; position: absolute; inset: 0; z-index: 70; align-items: center; justify-content: center; touch-action: none; background: var(--bg); }
.splash-exit .splash { background: none; pointer-events: none; }
.splash-on #app { background: var(--bg); }
.splash-on #stage { opacity: 0; }

/* The mark's own box has margin around the drawing: 140 gives a drawing about 112 tall. */
.splash-mark { flex: none; width: 140px; height: 140px; will-change: transform, opacity; }
.splash-breath { position: relative; width: 100%; height: 100%; will-change: transform; animation: splash-breathe 2.6s ease-in-out 1.1s infinite alternate; }
.splash-half { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; will-change: transform, opacity; }
.splash-half path { fill: url(#splash-blue); }
.splash-half--a { animation: splash-seen .42s ease-out both, splash-meet-a 1.25s var(--spring) both; }
.splash-half--b { animation: splash-seen .42s ease-out both, splash-meet-b 1.25s var(--spring) both; }
.splash-word { position: absolute; left: 0; right: 0; bottom: calc(max(var(--safe-bottom), 10px) + 22px); text-align: center; font: 500 15px/20px var(--font); letter-spacing: .01em; color: var(--hint); animation: splash-seen .8s ease-out .55s both; }

@keyframes splash-seen { from { opacity: 0; } to { opacity: 1; } }
@keyframes splash-meet-a { from { transform: translate3d(-7px, 66px, 0); } to { transform: none; } }
@keyframes splash-meet-b { from { transform: translate3d(7px, -66px, 0); } to { transform: none; } }
@keyframes splash-breathe { from { transform: scale(1); } to { transform: scale(1.045); } }

/* The way out: the logo shrinks away and the first screen rises in. */
.splash-exit .splash-mark { opacity: 0; transform: scale(.7); transition: opacity .3s ease-out, transform .56s var(--ease-ios); }
.splash-exit .splash-word { opacity: 0; animation: none; transition: opacity .22s ease-out; }
.splash-exit #stage { opacity: 1; transform-origin: 50% 35%; animation: splash-rise .72s var(--ease-ios) both; }
@keyframes splash-rise { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.965); } to { opacity: 1; transform: none; } }

/* Reduced motion: the logo and the word with a plain fade, in and out. */
@media (prefers-reduced-motion: reduce) {
  .splash-breath { animation: none; }
  .splash-half--a, .splash-half--b { animation: splash-seen .4s ease-out both; }
  .splash-word { animation-delay: 0s; animation-duration: .4s; }
  .splash-exit .splash-mark { transform: none; }
  .splash-exit #stage { animation: splash-seen .36s ease-out both; }
}

/* The mock Telegram header is for browsers only. */
.tg-launch .tg-header, .tg-launch .device::after { display: none; }