/* Launch screen and «скоро вернёмся» (docs/profile-setup/PLAN.md, step 1). Also used by offline.html. */
.splash {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; grid-template-rows: 1fr auto; justify-items: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(32px, env(safe-area-inset-bottom));
  background: var(--lg-ambient, #f2f2f7); color: var(--ios-text, #000);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  transition: opacity .28s ease, visibility 0s linear .28s;
}
.splash.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { align-self: center; display: grid; justify-items: center; gap: 14px; }
.splash-mark img { width: 88px; height: 88px; border-radius: 22px; box-shadow: inset 0 0 0 .5px var(--lg-border, rgb(60 60 67 / 9%)); }
.splash-mark strong { font-size: 22px; font-weight: 700; letter-spacing: -.4px; }
.splash-foot { display: grid; justify-items: center; gap: 10px; min-height: 52px; }
.splash-status { margin: 0; font-size: 15px; color: var(--lg-disabled, #58585d); }
.splash-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--lg-fill-pressed, rgb(118 118 128 / 20%)); border-top-color: var(--lg-disabled, #58585d);
  animation: splash-spin .8s linear infinite;
}
@keyframes splash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .splash-spinner { animation-duration: 2s; } .splash { transition: none; } }

/* Down: the icon moves up, the message and one button take the foot. */
.splash[data-state="down"], .splash[data-state="offline"] { grid-template-rows: 1fr auto; }
.splash[data-state="down"] .splash-foot, .splash[data-state="offline"] .splash-foot { display: none; }
.splash-down { width: min(100%, 360px); display: grid; gap: 10px; text-align: center; }
.splash-down h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.6px; }
.splash-down p { margin: 0 0 14px; font-size: 16px; line-height: 1.4; color: var(--lg-disabled, #58585d); }
.splash-down .button, .splash-down a.button {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; border-radius: 25px;
  background: var(--lg-fill, rgb(118 118 128 / 12%)); color: var(--lg-accent, #0062cc);
  font-size: 17px; font-weight: 600; text-decoration: none; border: 0;
}
.splash-down .button:active { background: var(--lg-fill-pressed, rgb(118 118 128 / 20%)); }
/* The spinner and its caption appear only if loading takes a moment, so a quick start shows just the icon. */
.splash[data-state="loading"] .splash-foot { animation: splash-in .25s ease .7s both; }
@keyframes splash-in { from { opacity: 0; } }