html.app-splash-active,
html.app-splash-active body {
  overflow: hidden !important;
}

.app-splash {
  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  place-items: center;
  color: #17252b;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .92), transparent 17rem),
    radial-gradient(circle at 18% 15%, rgba(239, 170, 54, .34), transparent 18rem),
    radial-gradient(circle at 84% 80%, rgba(20, 121, 239, .18), transparent 22rem),
    #f5f1e8;
  opacity: 1;
  transition: opacity .3s ease;
}

.app-splash.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.app-splash-stage {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}

.app-splash-wordmark {
  color: #0754b9;
  font-family: "Avenir Next", "Helvetica Neue", sans-serif;
  font-size: clamp(42px, 12vw, 72px);
  font-weight: 900;
  letter-spacing: .06em;
}

.app-splash-subtitle {
  color: #64747a;
  font-size: clamp(12px, 3.4vw, 17px);
  font-weight: 400;
  letter-spacing: .01em;
}

.app-splash-art {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 230px;
}

.app-splash-bike {
  opacity: 0;
  width: clamp(216px, 60vw, 304px);
  height: auto;
  color: #1479ef;
  animation: app-splash-bike-reveal .72s cubic-bezier(.2, .7, .2, 1) .16s 1 both;
}

.app-splash-money {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4vw, 22px);
  min-height: 70px;
}

.app-splash-dollar {
  opacity: 0;
  display: grid;
  place-items: center;
  width: auto;
  height: auto;
  color: #8a9493;
  font-size: clamp(58px, 15vw, 92px);
  font-weight: 400;
  line-height: 1;
  animation: app-splash-money-reveal .42s cubic-bezier(.2, .7, .2, 1) 1 both;
}

.app-splash-dollar:nth-child(1) { animation-delay: .62s; }
.app-splash-dollar:nth-child(2) { animation-delay: .84s; }
.app-splash-dollar:nth-child(3) { animation-delay: 1.06s; }

@keyframes app-splash-bike-reveal {
  0% { opacity: 0; transform: translateY(16px) scale(.94); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes app-splash-money-reveal {
  0% { opacity: 0; transform: translateY(8px) scale(.7); }
  55% { opacity: 1; transform: translateY(0) scale(1.14); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.app-splash-version {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(18px, env(safe-area-inset-left));
  color: #64747a;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  text-align: center;
}

.app-splash-community {
  position: absolute;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(46px, calc(env(safe-area-inset-bottom) + 30px));
  left: max(18px, env(safe-area-inset-left));
  color: #0754b9;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  text-decoration: none;
}

.app-splash-community:hover { text-decoration: underline; }

@media (max-width: 620px) {
  .app-splash-art {
    gap: 6px;
  }

  .app-splash-bike {
    width: min(78vw, 304px);
  }

  .app-splash-money {
    gap: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-splash-bike,
  .app-splash-dollar { animation-duration: .01ms; animation-delay: 0ms; }
  .app-splash { transition-duration: .01ms; }
}