.mobile-startup-splash {
    position: fixed;
    inset: 0 !important;
    z-index: 2147483647;
    display: flex;
    width: 100vw !important;
    height: 100dvh !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
    background-image: radial-gradient(circle at 50% 44%, #ffffff 0%, #f5f5f7 100%) !important;
    box-shadow: none !important;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: opacity;
}

html:has(.mobile-startup-splash),
body:has(.mobile-startup-splash),
body.mobile-app-starting {
    overflow: hidden !important;
    background: #ffffff !important;
}

body.mobile-app-starting > :not(.mobile-startup-splash):not(script):not(style) { visibility: hidden !important; }

.mobile-startup-splash__orb,
.mobile-startup-splash__glow { position: absolute; border-radius: 50%; transform: translateZ(0); }
.mobile-startup-splash__orb--top { top: -250px; right: -250px; width: 500px; height: 500px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-accent) 9%, transparent) 0%, transparent 70%); animation: splash-orb-float 8s ease-in-out infinite; }
.mobile-startup-splash__orb--bottom { bottom: -200px; left: -200px; width: 400px; height: 400px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-accent) 12%, transparent) 0%, transparent 70%); animation: splash-orb-float 6s ease-in-out infinite reverse; }
.mobile-startup-splash__glow { width: 180px; height: 180px; background: radial-gradient(circle, color-mix(in srgb, var(--splash-primary) 30%, transparent) 0%, transparent 70%); animation: splash-glow-pulse 2s ease-in-out infinite; }
.mobile-startup-splash__logo { position: relative; width: 160px; height: 160px; margin-bottom: 32px; overflow: hidden; border-radius: 40px; box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1), inset 0 0 40px rgba(255,255,255,.05); animation: splash-logo-entrance .8s cubic-bezier(.34,1.56,.64,1); }
.mobile-startup-splash__logo img { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.05) contrast(1.05); }
.mobile-startup-splash__title { position: relative; margin: 0 0 48px; padding: 0 20px; color: #111111; font-size: 36px; font-weight: 900; letter-spacing: -.5px; text-align: center; }
.mobile-startup-splash__loader { position: relative; width: 60px; height: 60px; }
.mobile-startup-splash__spinner { position: absolute; border: 3px solid transparent; border-radius: 50%; animation: splash-spin 1.2s cubic-bezier(.68,-.55,.265,1.55) infinite; }
.mobile-startup-splash__spinner--outer { inset: 0; border-top-color: #111111; border-right-color: rgba(17,17,17,.28); }
.mobile-startup-splash__spinner--inner { inset: 15%; border-bottom-color: color-mix(in srgb, var(--splash-accent) 60%, transparent); border-left-color: color-mix(in srgb, var(--splash-primary) 30%, transparent); animation-duration: 1s; animation-direction: reverse; }

@keyframes splash-logo-entrance { from { transform: scale(.92) translateY(12px); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes splash-text-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes splash-spin { to { transform: rotate(360deg); } }
@keyframes splash-glow-pulse { 0%,100% { transform: scale(1); opacity: .3; } 50% { transform: scale(1.2); opacity: .5; } }
@keyframes splash-orb-float { 0%,100% { transform: translate(0) scale(1); } 50% { transform: translate(30px,30px) scale(1.1); } }

@supports not (height: 100dvh) { .mobile-startup-splash { height: 100vh !important; } }
@media (prefers-reduced-motion: reduce) { .mobile-startup-splash, .mobile-startup-splash * { animation: none !important; } }