.sp-startup{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;box-sizing:border-box;padding:24px;padding-top:max(24px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 55%,#15111f,#0d0b16 70%)}
.sp-startup-emblem{position:relative;z-index:1;width:clamp(64px,14vw,88px);aspect-ratio:1;isolation:isolate}
.sp-startup-emblem::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,215,140,0) 0%,rgba(255,215,140,.85) 16%,rgba(255,236,196,.95) 28%,rgba(255,215,140,0) 44%,rgba(255,215,140,0) 100%);animation:sp-startup-whirl 4s linear infinite;filter:blur(1px)}
@keyframes sp-startup-whirl{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.sp-startup-logo{position:relative;z-index:1;display:block;width:100%;background:#12101d;box-shadow:0 0 22px rgba(255,215,140,.5);height:auto;aspect-ratio:1;border-radius:50%;object-fit:contain;filter:drop-shadow(0 0 22px #d8ba7040)}
.sp-startup-stars{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle at 8% 14%,#b8c8e099 0 1px,transparent 1.5px),radial-gradient(circle at 24% 72%,#ffe9bd99 0 1px,transparent 1.5px),radial-gradient(circle at 73% 21%,#fff9 0 1px,transparent 1.5px),radial-gradient(circle at 87% 67%,#b8c8e088 0 1px,transparent 1.5px),radial-gradient(circle at 36% 32%,#fff8 0 1px,transparent 1.5px),radial-gradient(circle at 61% 86%,#ffe9bd88 0 1px,transparent 1.5px),radial-gradient(circle at 14% 47%,#fff6 0 1px,transparent 1.5px),radial-gradient(circle at 92% 40%,#fff8 0 1px,transparent 1.5px),radial-gradient(circle at 19% 25%,#ffe9bd77 0 1px,transparent 1.5px),radial-gradient(circle at 48% 12%,#b8c8e088 0 1px,transparent 1.5px),radial-gradient(circle at 81% 49%,#fff8 0 1px,transparent 1.5px),radial-gradient(circle at 33% 59%,#b8c8e066 0 1px,transparent 1.5px),radial-gradient(circle at 69% 71%,#ffe9bd88 0 1px,transparent 1.5px),radial-gradient(circle at 12% 89%,#fff7 0 1px,transparent 1.5px),radial-gradient(circle at 88% 91%,#b8c8e077 0 1px,transparent 1.5px),radial-gradient(circle at 56% 36%,#fff6 0 1px,transparent 1.5px),radial-gradient(circle at 5% 61%,#fff8 0 1px,transparent 1.5px),radial-gradient(circle at 28% 9%,#ffe9bd88 0 1px,transparent 1.5px),radial-gradient(circle at 42% 80%,#b8c8e099 0 1px,transparent 1.5px),radial-gradient(circle at 78% 9%,#fff7 0 1px,transparent 1.5px),radial-gradient(circle at 95% 78%,#ffe9bd88 0 1px,transparent 1.5px),radial-gradient(circle at 52% 65%,#fff6 0 1px,transparent 1.5px),radial-gradient(circle at 64% 17%,#b8c8e088 0 1px,transparent 1.5px),radial-gradient(circle at 8% 34%,#fff8 0 1px,transparent 1.5px),radial-gradient(circle at 37% 93%,#ffe9bd88 0 1px,transparent 1.5px),radial-gradient(circle at 75% 57%,#b8c8e088 0 1px,transparent 1.5px),radial-gradient(circle at 22% 43%,#fff7 0 1px,transparent 1.5px),radial-gradient(circle at 94% 19%,#fff8 0 1px,transparent 1.5px)}
.sp-startup-shooting-star{position:absolute;left:12%;top:32%;width:clamp(90px,20vw,200px);height:2px;transform:rotate(-32deg);background:linear-gradient(90deg,transparent,#ffe4aa);border-radius:999px;filter:drop-shadow(0 0 6px #efd69a99);opacity:0;animation:sp-startup-flight 3.4s ease-out infinite;pointer-events:none}
.sp-startup-shooting-star::after{content:"";position:absolute;right:0;top:-1px;width:4px;height:4px;border-radius:50%;background:#ffe9bb;box-shadow:0 0 10px #ffe9bb}
@keyframes sp-startup-flight{0%{opacity:0;transform:translate(-18vw,12vh) rotate(-32deg)}12%{opacity:.9}52%{opacity:0;transform:translate(65vw,-25vh) rotate(-32deg)}100%{opacity:0;transform:translate(65vw,-25vh) rotate(-32deg)}}
@media(max-height:420px){.sp-startup-emblem{width:56px}}
@media(prefers-reduced-motion:reduce){.sp-startup-shooting-star{animation:none;opacity:.5;left:60%;top:28%;width:80px}}

@media(prefers-reduced-motion:reduce){.sp-startup-emblem::before{animation:none}}

.sp-startup-center{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:32px}
.sp-startup-label{position:relative;z-index:1;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-size:12px;font-weight:400;line-height:1.625;letter-spacing:.28em;text-transform:uppercase;text-align:center;color:#b8cdf0;text-shadow:0 0 18px rgba(0,0,0,.6)}
@media(min-width:640px){.sp-startup-label{font-size:15px}}
@media(min-width:768px){.sp-startup-label{font-size:19px;font-weight:300}}

.sp-startup-brand{position:absolute;top:max(56px,calc(env(safe-area-inset-top) + 44px));left:24px;right:24px;text-align:center;font-family:ui-sans-serif,system-ui,sans-serif;font-size:clamp(28px,5vw,40px);font-weight:300;letter-spacing:.04em;line-height:1.3;color:#b8cdf0;text-shadow:0 0 18px rgba(0,0,0,.6);z-index:1}
@media(max-height:420px){.sp-startup-brand{top:max(16px,env(safe-area-inset-top));font-size:24px}.sp-startup-center{gap:20px}}

.sp-startup-brand-gold{color:#d8ba70;text-shadow:0 0 20px rgba(216,186,112,.18)}
.sp-startup-shooting-star-2{left:30%;top:58%;width:clamp(70px,16vw,160px);animation-duration:4.6s;animation-delay:-1.4s}
.sp-startup-shooting-star-3{left:4%;top:85%;width:clamp(80px,18vw,180px);animation-duration:5.4s;animation-delay:-3s}
@media(prefers-reduced-motion:reduce){.sp-startup-shooting-star-2,.sp-startup-shooting-star-3{display:none}}

.sp-startup-diamonds{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:-16px;position:relative;z-index:1}
.sp-startup-diamond{display:block;font-size:22px;line-height:1;animation:sp-startup-twinkle 3.2s ease-in-out infinite}
.sp-startup-diamond-silver{color:#b8cdf0;text-shadow:0 0 12px rgba(184,205,240,.5)}
.sp-startup-diamond-gold{color:#ffe2a8;text-shadow:0 0 12px rgba(255,226,168,.5);animation-delay:-1.6s}
@keyframes sp-startup-twinkle{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
@media(max-height:420px){.sp-startup-brand{top:max(24px,env(safe-area-inset-top))}.sp-startup-diamonds{margin-top:-10px}.sp-startup-diamond{font-size:18px}}
@media(prefers-reduced-motion:reduce){.sp-startup-diamond{animation:none}}

/* Lift the tagline into the open space between the wordmark and emblem. */
.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){transform:translateY(min(0px,calc(32px - 10vh)))}
@media(max-height:420px){.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){transform:translateY(-8px)}}

/* Match the live galaxy tagline position; group the wordmark with its logo. */
.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){position:fixed;top:94px;left:24px;right:24px;transform:none}
.sp-startup-center > .sp-startup-brand{position:relative;top:auto;left:auto;right:auto}
@media(min-width:640px){.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){top:96px}}
@media(min-width:768px){.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){top:128px}}
@media(max-height:420px){.sp-startup-center > .sp-startup-label:not(.sp-startup-entering){top:max(20px,env(safe-area-inset-top))}.sp-startup-center{margin-top:48px;gap:16px}}

.sp-startup-center > .sp-startup-brand{font-size:14px;font-weight:400;line-height:1.625}
@media(min-width:640px){.sp-startup-center > .sp-startup-brand{font-size:17px}}
@media(min-width:768px){.sp-startup-center > .sp-startup-brand{font-size:22px;font-weight:300}}

.sp-startup-entering + .sp-startup-brand{margin-top:-20px}
@media(max-height:420px){.sp-startup-entering + .sp-startup-brand{margin-top:-8px}}

/* Keep the home page painted underneath as the welcome screen leaves. */
.sp-startup{opacity:1;transition:opacity 500ms ease-in-out}
.sp-startup.sp-startup-leaving{opacity:0;pointer-events:none}
@media(prefers-reduced-motion:reduce){.sp-startup{transition:none}}
