/* 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); }
/* Zero while the halves meet: drawing the app under them takes the GPU from the logo's frames (kit/splash.js adds splash-warm once they have met).
   Then not zero: at zero the browser skips drawing the app, and the first frame of the way out would pay for all of it. The opaque screen above hides it either way. */
.splash-on #stage { opacity: 0; }
.splash-warm #stage { opacity: .001; }

/* The mark's own box has margin around the drawing: 140 gives a drawing about 112 tall.
   Only plain boxes move, never the <svg> itself, and will-change lives as long as the screen does: the node is removed once it has lifted.
   The fill is dark gold, top to bottom across the whole crown, seen on either theme (the gradient sits in the first half's <svg>, in the shared 512 box). Each half shows its side of the same crown. */
.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; will-change: transform, opacity; }
.splash-half svg { display: block; width: 100%; height: 100%; overflow: visible; }
.splash-half path { fill: url(#splash-gold); }
.splash-half--a svg { clip-path: inset(0 50% 0 0); }
.splash-half--b svg { clip-path: inset(0 0 0 50%); }
.splash-half--a { animation: splash-seen .42s ease-out both, splash-meet-a 1.25s both; }
.splash-half--b { animation: splash-seen .42s ease-out both, splash-meet-b 1.25s 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; } }
/* The --spring curve as three eased segments: overshoot, settle, rest. Within a pixel of it, and unlike a linear() easing,
   which WebKit keeps on the main thread, cubic segments run on the compositor in every engine. */
@keyframes splash-meet-a {
  0% { transform: translate3d(-7px, 66px, 0); animation-timing-function: cubic-bezier(.3, .05, .4, 1); }
  29.2% { transform: translate3d(.73px, -6.86px, 0); animation-timing-function: cubic-bezier(.2, 0, .35, .95); }
  56% { transform: translate3d(-.07px, .66px, 0); animation-timing-function: cubic-bezier(.6, 1, 0, 1); }
  100% { transform: translate3d(0, 0, 0); }
}
@keyframes splash-meet-b {
  0% { transform: translate3d(7px, -66px, 0); animation-timing-function: cubic-bezier(.3, .05, .4, 1); }
  29.2% { transform: translate3d(-.73px, 6.86px, 0); animation-timing-function: cubic-bezier(.2, 0, .35, .95); }
  56% { transform: translate3d(.07px, -.66px, 0); animation-timing-function: cubic-bezier(.6, 1, 0, 1); }
  100% { transform: translate3d(0, 0, 0); }
}
@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; }