:root {
  --launch-ink: #102f35;
  --launch-paper: #f7fbfa;
  --launch-teal: #076c74;
  --launch-mint: #d8f1ea;
  --launch-saffron: #f2b544;
}

body.app-booting {
  overflow: hidden;
  background: var(--launch-ink);
}

.launch-screen,
.launch-screen *,
.launch-screen *::before,
.launch-screen *::after {
  box-sizing: border-box;
}

.launch-screen {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(1.25rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
    max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  color: var(--launch-paper);
  background: var(--launch-ink);
  font-family: "Noto Sans", "Noto Sans Devanagari", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition: transform 460ms cubic-bezier(0.76, 0, 0.24, 1);
}

.launch-screen::before,
.launch-screen::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.launch-screen::before {
  inset: 8% auto 8% 0;
  width: 8px;
  background: var(--launch-saffron);
  transform: scaleY(0);
  transform-origin: top;
  animation: launch-rule-draw 420ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen::after {
  right: -72px;
  bottom: -72px;
  width: 184px;
  height: 184px;
  border: 1px solid rgb(216 241 234 / 0.34);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgb(216 241 234 / 0.04), 0 0 0 64px rgb(216 241 234 / 0.03);
}

.launch-screen--leaving {
  pointer-events: none;
  transform: translate3d(0, -100%, 0);
}

.launch-screen__frame {
  position: absolute;
  inset: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
    max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  pointer-events: none;
}

.launch-screen__frame span {
  position: absolute;
  width: 26px;
  height: 26px;
  border-color: rgb(216 241 234 / 0.56);
  border-style: solid;
}

.launch-screen__frame span:nth-child(1) { top: 0; left: 0; border-width: 1px 0 0 1px; }
.launch-screen__frame span:nth-child(2) { top: 0; right: 0; border-width: 1px 1px 0 0; }
.launch-screen__frame span:nth-child(3) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.launch-screen__frame span:nth-child(4) { bottom: 0; left: 0; border-width: 0 0 1px 1px; }

.launch-screen__content {
  width: min(100%, 600px);
  margin: 0;
  padding-inline: clamp(0rem, 4vw, 2rem);
}

.launch-screen__eyebrow {
  margin: 0 0 1.25rem;
  color: var(--launch-mint);
  font: 700 0.72rem/1rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  animation: launch-copy-enter 360ms 80ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen__token-pass {
  position: relative;
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  margin-bottom: clamp(1.25rem, 5vw, 2rem);
}

.launch-screen__rail {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: rgb(216 241 234 / 0.48);
  transform: scaleX(0);
  transform-origin: left;
  animation: launch-rail-draw 620ms 100ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen__rail::before,
.launch-screen__rail::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--launch-mint);
  background: var(--launch-ink);
  transform: translateY(-50%) rotate(45deg);
}

.launch-screen__rail::before { left: 29%; }
.launch-screen__rail::after { left: 58%; }

.launch-screen__token {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  color: var(--launch-ink);
  background: var(--launch-saffron);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  box-shadow: inset 0 0 0 2px var(--launch-ink);
  transform: translateX(-140%) rotate(-10deg);
  animation: launch-token-pass 760ms 120ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen__token::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(16 47 53 / 0.36);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}

.launch-screen__token span {
  font: 800 1.7rem/1 "Anek Devanagari", "Noto Sans", system-ui, sans-serif;
  letter-spacing: -0.06em;
}

.launch-screen__stop {
  position: absolute;
  right: 0;
  width: 18px;
  height: 52px;
  border: 2px solid var(--launch-mint);
  border-left: 0;
  opacity: 0.42;
  transform: scaleY(0.5);
  animation: launch-stop-receive 220ms 720ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen__wordmark {
  margin: 0;
  font: 720 clamp(3.8rem, 18vw, 7rem)/0.78 "Anek Devanagari", "Noto Sans", system-ui, sans-serif;
  letter-spacing: -0.065em;
  transform: translateY(18px);
  opacity: 0;
  animation: launch-wordmark-enter 460ms 410ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.launch-screen__wordmark span { color: var(--launch-saffron); }

.launch-screen__message {
  max-width: 34ch;
  margin: 1.15rem 0 0;
  color: var(--launch-mint);
  font-size: clamp(0.98rem, 4vw, 1.1rem);
  line-height: 1.5rem;
  opacity: 0;
  animation: launch-message-enter 300ms 580ms ease-out both;
}

.launch-screen__legend {
  position: absolute;
  left: max(1.5rem, env(safe-area-inset-left));
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  margin: 0;
  color: rgb(216 241 234 / 0.68);
  font: 650 0.62rem/1rem "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

@keyframes launch-rule-draw { to { transform: scaleY(1); } }
@keyframes launch-rail-draw { to { transform: scaleX(1); } }
@keyframes launch-copy-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes launch-token-pass {
  0% { transform: translateX(-140%) rotate(-10deg); }
  72% { transform: translateX(calc(100vw - 150px)) rotate(2deg); }
  88% { transform: translateX(calc(100vw - 166px)) rotate(-1deg); }
  100% { transform: translateX(calc(100vw - 158px)) rotate(0); }
}
@keyframes launch-stop-receive {
  0% { opacity: 0.42; transform: scaleY(0.5); }
  55% { opacity: 1; transform: scaleY(1.12); }
  100% { opacity: 0.76; transform: scaleY(1); }
}
@keyframes launch-wordmark-enter { to { opacity: 1; transform: translateY(0); } }
@keyframes launch-message-enter { to { opacity: 1; } }

@media (min-width: 640px) {
  .launch-screen::before { width: 12px; }
  .launch-screen__token { width: 80px; height: 80px; }
  .launch-screen__token-pass { height: 112px; }
  .launch-screen__legend { writing-mode: initial; transform: none; }
  @keyframes launch-token-pass {
    0% { transform: translateX(-140%) rotate(-10deg); }
    72% { transform: translateX(510px) rotate(2deg); }
    88% { transform: translateX(492px) rotate(-1deg); }
    100% { transform: translateX(500px) rotate(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-screen { transition-duration: 0.001ms; }
  .launch-screen::before,
  .launch-screen__eyebrow,
  .launch-screen__rail,
  .launch-screen__token,
  .launch-screen__stop,
  .launch-screen__wordmark,
  .launch-screen__message {
    animation: none;
  }
  .launch-screen::before,
  .launch-screen__rail { transform: none; }
  .launch-screen__token { transform: translateX(calc(100vw - 158px)); }
  .launch-screen__stop { opacity: 0.76; transform: scaleY(1); }
  .launch-screen__wordmark, .launch-screen__message { opacity: 1; transform: none; }
}

@media (forced-colors: active) {
  .launch-screen {
    color: CanvasText;
    background: Canvas;
    border: 2px solid CanvasText;
    forced-color-adjust: auto;
  }
  .launch-screen::before,
  .launch-screen__rail,
  .launch-screen__token { background: Highlight; }
  .launch-screen__token { color: HighlightText; border: 2px solid CanvasText; }
  .launch-screen__eyebrow,
  .launch-screen__message,
  .launch-screen__legend { color: CanvasText; }
}

@media (max-width: 359px) {
  .launch-screen__content { padding-left: 0.5rem; }
  .launch-screen__wordmark { font-size: 3.5rem; }
  .launch-screen__legend { display: none; }
}