/* ParsinX — cinematic PWA launch splash. Shown only in the installed PWA (standalone), once per app launch — never in a browser tab. Gating is done by an inline script that toggles `html.px-splash-active`; the inline controller at end of tears the overlay down after the timeline. Self-contained (no design tokens) so it paints correctly before the app CSS settles. */ .px-splash { display: none; } html.px-splash-active, html.px-splash-active body { overflow: hidden; } html.px-splash-active .px-splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 99999; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; background: radial-gradient(125% 125% at 50% 36%, #16204a 0%, #0b1020 55%, #070a16 100%); } /* drifting particle depth layer */ .px-splash::before { content: ""; position: absolute; inset: -25%; background: radial-gradient(2px 2px at 20% 30%, rgba(127, 176, 255, .55), transparent 60%), radial-gradient(2px 2px at 70% 62%, rgba(127, 176, 255, .35), transparent 60%), radial-gradient(1.5px 1.5px at 42% 82%, rgba(61, 123, 255, .5), transparent 60%), radial-gradient(1.5px 1.5px at 85% 24%, rgba(127, 176, 255, .42), transparent 60%), radial-gradient(2px 2px at 55% 14%, rgba(61, 123, 255, .45), transparent 60%), radial-gradient(1.5px 1.5px at 12% 70%, rgba(127, 176, 255, .4), transparent 60%); opacity: .85; animation: pxDrift 9s linear infinite; } @keyframes pxDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -42px, 0); } } /* soft glow behind the logo */ .px-splash::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(61, 123, 255, .35) 0%, transparent 65%); filter: blur(14px); animation: pxAura 3.2s ease-in-out infinite; } @keyframes pxAura { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: .95; transform: scale(1.05); } } .px-splash__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; will-change: transform, opacity; animation: pxStageIn .8s cubic-bezier(.16, 1, .3, 1) both, pxFloat 4s ease-in-out 1.1s infinite; } @keyframes pxStageIn { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes pxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } } .px-splash__logo-wrap { position: relative; display: grid; place-items: center; } /* expanding rings */ .px-splash__ring { position: absolute; width: 150px; height: 150px; border-radius: 50%; border: 1.5px solid rgba(127, 176, 255, .55); animation: pxRing 2.6s cubic-bezier(.16, 1, .3, 1) .4s infinite; } .px-splash__ring.r2 { animation-delay: 1.2s; } @keyframes pxRing { 0% { transform: scale(.5); opacity: 0; } 18% { opacity: .65; } 100% { transform: scale(1.75); opacity: 0; } } .px-splash__logo { width: 132px; height: 132px; animation: pxLogoGlow 2.6s ease-in-out 1.5s infinite; } @keyframes pxLogoGlow { 0%, 100% { filter: drop-shadow(0 4px 18px rgba(61, 123, 255, .4)); } 50% { filter: drop-shadow(0 6px 34px rgba(127, 176, 255, .75)); } } /* the real PX monogram: outline draws itself on, then the fill blooms in */ .px-splash__mark { fill: #ffffff; fill-opacity: 0; stroke: url(#pxsg); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1721; stroke-dashoffset: 1721; animation: pxDraw 1.3s cubic-bezier(.65, 0, .35, 1) .2s forwards, pxFill .65s ease-out 1.2s forwards; } @keyframes pxDraw { to { stroke-dashoffset: 0; } } @keyframes pxFill { to { fill-opacity: 1; } } /* wordmark */ .px-splash__word { font-family: "Poppins", "Montserrat", system-ui, sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: .12em; color: #eaf0ff; opacity: 0; animation: pxWord .85s cubic-bezier(.16, 1, .3, 1) .95s both; } .px-splash__word .x { background: linear-gradient(135deg, #3d7bff, #7fb0ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 22px rgba(127, 176, 255, .55); } @keyframes pxWord { from { opacity: 0; letter-spacing: .5em; transform: translateY(12px); filter: blur(7px); } to { opacity: 1; letter-spacing: .12em; transform: translateY(0); filter: blur(0); } } /* shimmer progress line */ .px-splash__bar { position: relative; width: 134px; height: 3px; border-radius: 99px; overflow: hidden; background: rgba(255, 255, 255, .08); opacity: 0; animation: pxFade .6s ease 1.35s forwards; } .px-splash__bar::after { content: ""; position: absolute; inset: 0; width: 42%; border-radius: 99px; background: linear-gradient(90deg, transparent, #3d7bff, #7fb0ff, transparent); animation: pxBar 1.15s ease-in-out 1.45s infinite; } @keyframes pxFade { to { opacity: 1; } } @keyframes pxBar { from { transform: translateX(-130%); } to { transform: translateX(330%); } } /* cinematic exit */ .px-splash.is-leaving { pointer-events: none; animation: pxLeave .65s cubic-bezier(.7, 0, .84, 0) forwards; } .px-splash.is-leaving .px-splash__stage { animation: pxStageOut .65s cubic-bezier(.7, 0, .84, 0) forwards; } @keyframes pxLeave { to { opacity: 0; transform: scale(1.07); filter: blur(7px); } } @keyframes pxStageOut { to { opacity: 0; transform: scale(1.2) translateY(-8px); } } /* the page eases in behind the departing splash */ .lp { transition: opacity .85s cubic-bezier(.16, 1, .3, 1), transform .85s cubic-bezier(.16, 1, .3, 1); } html.px-splash-active .lp { opacity: 0; transform: scale(1.035); } /* respect reduced-motion: keep a quick, calm fade only */ @media (prefers-reduced-motion: reduce) { .px-splash::before, .px-splash::after, .px-splash__stage, .px-splash__logo, .px-splash__ring, .px-splash__mark, .px-splash__word, .px-splash__bar, .px-splash__bar::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; } .px-splash__mark { stroke-dashoffset: 0 !important; fill-opacity: 1 !important; } .px-splash__word, .px-splash__bar { opacity: 1 !important; } .px-splash__word { letter-spacing: .12em !important; filter: none !important; transform: none !important; } .lp { transition: opacity .25s ease !important; transform: none !important; } }