/* The launchpad: the call to action at the bottom of the page, with the username field, the countdown and the
   download and open buttons. */

.launch { position: relative; padding-top: 150px !important; }

/* Orby, the mascot, sits on the top edge of the launchpad with a speech bubble */
.orby { position: absolute; z-index: 2; right: max(48px, 6%); top: 18px; width: 190px; pointer-events: none; }
.orby-btn { display: block; width: 100%; pointer-events: auto; transform-origin: 50% 100%; filter: drop-shadow(0 14px 30px rgba(176, 108, 255, .35)); }
.orby-btn img { display: block; width: 100%; height: auto; }
.orby-btn:hover { animation: wiggle .5s ease-in-out; }
.orby.hop .orby-btn { animation: hop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes wiggle { 25% { rotate: -4deg; } 75% { rotate: 4deg; } }
@keyframes hop { 40% { translate: 0 -26px; scale: .96 1.04; } 70% { translate: 0 0; scale: 1.06 .94; } }
.orby-says {
  position: absolute; right: calc(100% - 18px); top: 8px; width: max-content; max-width: 220px; margin: 0;
  padding: 10px 14px; border-radius: 16px 16px 4px 16px; font-size: 14px; font-weight: 600; line-height: 1.4;
  color: var(--text); background: var(--raised-2); border: 1px solid rgba(176, 108, 255, .35); box-shadow: var(--shadow);
  animation: rise .4s ease-out;
}
.launchpad {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: 96px 32px;
  text-align: center; border: 1px solid rgba(143, 163, 255, .28);
  background:
    radial-gradient(600px 340px at 50% 0%, rgba(107, 133, 255, .35), transparent 70%),
    radial-gradient(500px 300px at 10% 100%, rgba(76, 201, 240, .18), transparent 70%),
    radial-gradient(500px 300px at 90% 100%, rgba(176, 108, 255, .22), transparent 70%),
    #0c1328;
  box-shadow: 0 30px 120px rgba(107, 133, 255, .25), inset 0 1px rgba(255, 255, 255, .08);
  transition: box-shadow .4s;
}
.launchpad.typing { box-shadow: 0 30px 140px rgba(107, 133, 255, .4), inset 0 1px rgba(255, 255, 255, .1); }
.launchpad.counting { animation: rumble .12s linear infinite; }
.launchpad.launched { box-shadow: 0 0 180px rgba(255, 209, 102, .45), inset 0 0 120px rgba(255, 159, 67, .2); }
@keyframes rumble { 25% { translate: 1px -1px; } 75% { translate: -1px 1px; } }

.lp-content { position: relative; max-width: 640px; margin: 0 auto; }
.lp-title { font-size: clamp(38px, 6.4vw, 72px); font-weight: 800; letter-spacing: -0.035em; }
.lp-sub { margin: 20px auto 36px; max-width: 520px; font-size: 18.5px; color: var(--soft); }

.claim {
  display: flex; gap: 8px; max-width: 520px; margin: 0 auto; padding: 8px; border-radius: 18px;
  background: rgba(7, 11, 23, .8); border: 1px solid var(--line-strong); backdrop-filter: blur(8px);
  transition: border-color .2s, box-shadow .2s;
}
.claim:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.claim.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { translate: -8px 0; } 40%, 80% { translate: 8px 0; } }
.claim-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; padding-left: 14px; cursor: text; }
.claim-at { font-size: 20px; font-weight: 800; color: var(--accent-2); }
.claim-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: 18px; font-weight: 600; padding: 10px 0; }
.claim-field input::placeholder { color: var(--faint); font-weight: 500; }
.claim-go { flex: none; padding-inline: 26px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.claim-go:disabled { cursor: default; filter: brightness(1.15); }
.claim-note { margin: 12px 0 0; min-height: 1.6em; font-size: 14px; color: var(--muted); }
.claim-note.bad { color: #ff8a92; }

.get-it { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.platform {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 14px; border-radius: 14px; color: var(--text); text-align: left;
  background: rgba(26, 35, 65, .7); border: 1px solid var(--line-strong); transition: transform .15s, border-color .15s, background .15s;
}
.platform:hover { transform: translateY(-2px); border-color: rgba(143, 163, 255, .45); background: var(--raised-2); }
.platform.main { background: #fff; color: #0d1326; border-color: transparent; }
.platform.main:hover { background: #fff; box-shadow: 0 10px 40px rgba(255, 255, 255, .2); }
.platform.main small { color: #4a5475; }
.pf-ico { font-size: 24px; line-height: 1; }
.pf-text { display: grid; line-height: 1.2; }
.pf-text small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pf-text strong { font-size: 16.5px; }

.rocket { position: fixed; z-index: 50; font-size: 54px; pointer-events: none; left: 50%; bottom: -80px; translate: -50% 0; animation: liftoff 2.4s cubic-bezier(.5, 0, .9, .4) forwards; }
@keyframes liftoff { to { translate: -50% -130vh; rotate: -8deg; } }

@media (max-width: 640px) {
  .launch { padding-top: 130px !important; }
  .orby { width: 140px; right: 20px; top: 14px; }
  .orby-says { max-width: 160px; font-size: 13px; }
  .launchpad { padding: 64px 18px; border-radius: 24px; }
  .lp-sub { font-size: 16.5px; }
  .claim { flex-direction: column; }
  .claim-field { padding: 0 8px; }
  .claim-go { width: 100%; }
  .get-it { flex-direction: column; align-items: stretch; }
}
@media (max-width: 400px) {
  .launch { padding-inline: 12px !important; }
  .launchpad { padding: 52px 14px; }
  .lp-title { font-size: 34px; }
}