/* Critical launch styles load independently of the application bundle. */
html.startup-pending { overflow: hidden; }

.brand-launch {
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: #FAF7F2;
  color: #25292C;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.brand-launch-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(100%, 320px);
  text-align: center;
  transform: translateY(-12px);
}

.brand-launch-mark { display: block; width: 112px; height: auto; }
.brand-launch-name { display: block; width: 224px; max-width: 100%; height: auto; margin-top: 24px; }
.brand-launch-slogan { margin: 20px 0 0; color: #62686D; font-size: 15px; line-height: 24px; }

#startup-screen {
  --startup-minimum-duration: 3750ms;
  position: fixed;
  inset: 0;
  z-index: 9999;
  opacity: 1;
  transition: opacity 320ms ease-out;
}

#startup-screen .brand-launch-mark,
#startup-screen .brand-launch-name,
#startup-screen .brand-launch-slogan {
  animation: tolyago-startup-reveal 650ms cubic-bezier(.22, 1, .36, 1) both;
}

#startup-screen .brand-launch-name { animation-delay: 1100ms; }
#startup-screen .brand-launch-slogan {
  animation-name: tolyago-startup-slogan;
  animation-duration: 1550ms;
  animation-delay: 2200ms;
}
#startup-screen[data-state="leaving"] { opacity: 0; pointer-events: none; }

.startup-recovery {
  position: absolute;
  bottom: max(32px, env(safe-area-inset-bottom));
  left: 24px;
  right: 24px;
  text-align: center;
  color: #62686D;
  font-size: 14px;
  line-height: 22px;
}
.startup-recovery[hidden] { display: none; }
.startup-recovery p { margin: 0 0 8px; }
.startup-recovery a { color: #25292C; text-underline-offset: 4px; }

@keyframes tolyago-startup-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade the slogan in over about 650ms, then hold it still for reading. */
@keyframes tolyago-startup-slogan {
  from { opacity: 0; transform: translateY(8px); }
  42%, to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  #startup-screen { transition: none; }
  #startup-screen .brand-launch-mark,
  #startup-screen .brand-launch-name,
  #startup-screen .brand-launch-slogan { animation: none; }
}