.ph-preloader[hidden] { display: none; }

html.ph-splash-visible,
html.ph-splash-visible body { background: #07152f; }

html.ph-splash-visible .ph-preloader {
    position: fixed;
    z-index: 2147483000;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    background: #07152f;
    color: #fff;
    opacity: 1;
    isolation: isolate;
    transition: opacity .34s ease, transform .34s cubic-bezier(.22, 1, .36, 1);
    animation: ph-splash-failsafe 0s 2s forwards;
}

html.ph-splash-visible .ph-preloader::before,
html.ph-splash-visible .ph-preloader::after {
    position: absolute;
    content: '';
    pointer-events: none;
    border-radius: 50%;
    filter: blur(16px);
    opacity: .46;
}

html.ph-splash-visible .ph-preloader::before {
    width: min(72vw, 520px);
    height: min(72vw, 520px);
    background: radial-gradient(circle, rgb(0 229 255 / 24%), transparent 68%);
    animation: ph-splash-light 4.2s ease-in-out infinite;
}

html.ph-splash-visible .ph-preloader::after {
    width: min(50vw, 360px);
    height: min(50vw, 360px);
    background: radial-gradient(circle, rgb(139 44 255 / 26%), transparent 68%);
    animation: ph-splash-light 4.2s 1.1s ease-in-out infinite reverse;
}

html.ph-splash-visible .ph-preloader.is-leaving { opacity: 0; transform: scale(1.035); pointer-events: none; }
.ph-loader-content { position: relative; z-index: 1; width: min(100%, 420px); text-align: center; }
.ph-loader-emblem { position: relative; display: grid; place-items: center; width: 190px; height: 190px; margin: 0 auto 26px; }
.ph-loader-aura { position: absolute; width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle, rgb(0 229 255 / 28%), rgb(108 53 255 / 12%) 48%, transparent 72%); filter: blur(10px); animation: ph-splash-aura 2.6s ease-in-out infinite; }
.ph-loader-ring { position: absolute; inset: 0; border: 1px solid rgb(0 229 255 / 26%); border-top-color: #00e5ff; border-right-color: #8b2cff; border-radius: 50%; box-shadow: 0 0 28px rgb(0 229 255 / 16%), inset 0 0 24px rgb(139 44 255 / 10%); animation: ph-ring 1.7s linear infinite; }
.ph-loader-emblem img { position: relative; width: 130px; height: 120px; object-fit: contain; filter: drop-shadow(0 0 12px rgb(0 229 255 / 34%)) drop-shadow(0 0 20px rgb(139 44 255 / 22%)); animation: ph-logo-in .72s cubic-bezier(.22, 1, .36, 1) both, ph-logo-float 2.8s .72s ease-in-out infinite; }
.ph-loader-brand { margin: 0; color: #f8fbff; font: 800 clamp(30px, 8vw, 42px)/1.1 'Manrope', 'Instrument Sans', sans-serif; letter-spacing: -.04em; animation: ph-copy-in .56s .12s cubic-bezier(.22, 1, .36, 1) both; }
.ph-loader-brand span { color: #b66cff; }
.ph-loader-tagline { margin: 12px 0 30px; color: #b8c8e5; font: 500 13px/1.4 'Instrument Sans', sans-serif; letter-spacing: .08em; animation: ph-copy-in .56s .2s cubic-bezier(.22, 1, .36, 1) both; }
.ph-loader-progress { width: min(360px, 78vw); height: 5px; margin: 0 auto; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 12%); box-shadow: 0 0 0 1px rgb(255 255 255 / 5%); animation: ph-copy-in .56s .28s cubic-bezier(.22, 1, .36, 1) both; }
.ph-loader-progress span { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #00e5ff, #006cff 48%, #8b2cff 80%, #d719ff); box-shadow: 0 0 14px rgb(0 229 255 / 68%); animation: ph-progress 1.45s ease-in-out infinite; }
.ph-loader-label { margin: 16px 0 0; color: #8094b9; font: 500 11px/1.4 'Instrument Sans', sans-serif; letter-spacing: .06em; animation: ph-copy-in .56s .34s cubic-bezier(.22, 1, .36, 1) both; }
.ph-loader-label span { display: inline-block; width: 18px; overflow: hidden; vertical-align: bottom; animation: ph-dots 1.2s steps(3, end) infinite; }

@keyframes ph-logo-in { from { opacity: 0; transform: scale(.75); } to { opacity: 1; transform: scale(1); } }
@keyframes ph-logo-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.025); } }
@keyframes ph-copy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ph-ring { to { transform: rotate(360deg); } }
@keyframes ph-splash-aura { 0%, 100% { transform: scale(.86); opacity: .55; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes ph-splash-light { 0%, 100% { transform: translate(-10%, -5%) scale(.84); opacity: .24; } 50% { transform: translate(10%, 6%) scale(1.12); opacity: .62; } }
@keyframes ph-progress { from { transform: translateX(-125%); } to { transform: translateX(300%); } }
@keyframes ph-dots { 0% { opacity: .25; } 100% { opacity: 1; } }
@keyframes ph-splash-failsafe { to { visibility: hidden; pointer-events: none; } }

@media (max-width: 600px) {
    .ph-loader-emblem { width: 150px; height: 150px; margin-bottom: 22px; }
    .ph-loader-emblem img { width: 102px; height: 94px; }
    .ph-loader-progress { width: min(300px, 78vw); }
}

@media (prefers-reduced-motion: reduce) {
    html.ph-splash-visible .ph-preloader { transition: none; }
    html.ph-splash-visible .ph-preloader::before,
    html.ph-splash-visible .ph-preloader::after,
    .ph-loader-aura,
    .ph-loader-ring,
    .ph-loader-emblem img,
    .ph-loader-progress span,
    .ph-loader-label span,
    .ph-loader-brand,
    .ph-loader-tagline,
    .ph-loader-progress,
    .ph-loader-label { animation: none; }
    .ph-loader-emblem img,
    .ph-loader-brand,
    .ph-loader-tagline,
    .ph-loader-progress,
    .ph-loader-label { opacity: 1; transform: none; }
    .ph-loader-progress span { width: 100%; opacity: .7; }
}
