/* Onboard part: the first-run welcome. A takeover screen in the app's own colours (navy, Santa red,
   fluoro yellow, snow), over everything but the update screen (20000). */
.ob {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: calc(24px + var(--sat, 0px)) 20px calc(24px + var(--sab, 0px));
  background:
    radial-gradient(120% 70% at 50% 38%, #ffffff 0%, #fbfdff 45%, #e6eefa 100%);
  color: #1d2f52; text-align: center; overflow: hidden;
  font-family: var(--font); -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: manipulation; cursor: default;
  transition: opacity .45s ease, transform .45s ease;
}
.ob.bye { opacity: 0; transform: scale(1.04); pointer-events: none; }
.ob-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.ob-step { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; }
.ob-step[hidden] { display: none; }
.ob-step-1.out { animation: ob-out .26s ease-in both; }
.ob-step-2 { animation: ob-in .5s cubic-bezier(.25, 1.4, .5, 1) both; }

.ob-logo {
  width: 112px; height: 112px; border-radius: 28px; display: block;
  box-shadow: 0 14px 34px rgba(46, 79, 134, .28);
  animation: ob-pop .7s cubic-bezier(.25, 1.6, .5, 1) .05s both;
}
.ob-logo-small { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 22px; animation: none; }
.ob-title { margin: 26px 0 0; line-height: 1; font-weight: 800; }
.ob-kicker {
  display: block; font-size: 19px; font-weight: 800; letter-spacing: .04em; color: #d3202f;
  margin-bottom: 10px; animation: ob-in .5s ease-out .2s both;
}
.ob-letters {
  display: block; font-family: var(--font-head); font-size: clamp(30px, 10.6vw, 54px); letter-spacing: -.02em;
  color: #2e4f86; white-space: nowrap;
}
.ob-l { display: inline-block; animation: ob-letter .55s cubic-bezier(.25, 1.7, .5, 1) both; }
.ob-tap {
  margin-top: 46px; font-size: 15px; font-weight: 700; color: #5c6f92; opacity: 0;
  transition: opacity .4s ease;
}
.ob-tap.show { opacity: 1; animation: ob-bob 1.6s ease-in-out .4s infinite; }

.ob-q {
  margin: 0; font-family: var(--font-head); font-weight: 800; font-size: clamp(30px, 9vw, 44px);
  line-height: 1.08; letter-spacing: -.02em; color: #2e4f86; max-width: 340px;
}
.ob-line { margin-top: 12px; font-size: 17px; font-weight: 700; color: #d3202f; }
.ob-btn {
  margin-top: 40px; min-height: 68px; width: 100%; max-width: 320px; padding: 0 28px;
  border: 3px solid #2e4f86; border-radius: 999px; background: #e8ff1f; color: #1d2f52;
  font: inherit; font-size: 24px; font-weight: 800; letter-spacing: -.01em; cursor: pointer;
  box-shadow: 0 7px 0 #2e4f86; transition: transform .1s ease, box-shadow .1s ease;
  animation: ob-wiggle 2.8s ease-in-out 1.2s infinite;
}
.ob-step-1 .ob-btn { margin-top: 44px; animation: ob-in .5s ease-out .9s both; }
.ob-btn:active { animation: none; }
.ob-btn:active, .ob-btn.cheer { transform: translateY(5px); box-shadow: 0 2px 0 #2e4f86; }
.ob-btn.cheer { animation: ob-cheer .5s cubic-bezier(.25, 1.7, .5, 1) both; background: #d3202f; color: #ffffff; border-color: #8f1420; box-shadow: 0 2px 0 #8f1420; }
.ob-btn:focus-visible { outline: 3px solid #d3202f; outline-offset: 4px; }

@keyframes ob-pop { from { transform: scale(.2) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-letter { from { transform: translateY(26px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-in { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ob-out { to { transform: translateY(-18px); opacity: 0; } }
@keyframes ob-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
@keyframes ob-wiggle { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-2.5deg) scale(1.03); } 92% { transform: rotate(2.5deg) scale(1.03); } 96% { transform: rotate(-1deg); } }
@keyframes ob-cheer { 0% { transform: translateY(5px) scale(.94); } 60% { transform: translateY(5px) scale(1.08); } 100% { transform: translateY(5px) scale(1); } }

/* one card at a time: the shell's install and notification cards wait until the welcome has gone */
.ob-open .install-card, .ob-open .push-card { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ob, .ob * { animation: none !important; transition: none !important; }
  .ob-tap { opacity: 1; }
}