/* Splash shown while the circuit connects. Only transform/opacity are animated. */
:root {
    --pn-splash-bg: #f5f5f8;
    --pn-splash-text: #15151c;
    --pn-splash-muted: #5d5d6e;
    --pn-splash-accent: #6646f0;
    --pn-splash-halo: rgba(102, 70, 240, .16);
    --pn-splash-track: rgba(21, 21, 28, .08);
    --pn-splash-curve: cubic-bezier(.22, .61, .36, 1)
}

html[data-theme="dark"] {
    --pn-splash-bg: #0b0b10;
    --pn-splash-text: #ededf2;
    --pn-splash-muted: #9a9aa8;
    --pn-splash-accent: #8b72ff;
    --pn-splash-halo: rgba(139, 114, 255, .2);
    --pn-splash-track: rgba(237, 237, 242, .08)
}

html[data-theme] body {
    background-color: var(--pn-splash-bg)
}

@keyframes pn-splash-breathe {
    0%, 100% { opacity: .92; transform: scale(.97) }
    50% { opacity: 1; transform: scale(1) }
}

@keyframes pn-splash-halo {
    0%, 100% { opacity: .55; transform: scale(.9) }
    50% { opacity: 1; transform: scale(1.08) }
}

@keyframes pn-splash-slide {
    0% { transform: translateX(-100%) }
    100% { transform: translateX(250%) }
}

@keyframes pn-splash-rise {
    from { opacity: 0; transform: translateY(8px) }
    to { opacity: 1; transform: translateY(0) }
}

@keyframes pn-splash-appear {
    from { opacity: 0 }
    to { opacity: 1 }
}

:focus:not(:focus-visible) {
    outline: 0
}

:focus-visible {
    outline: 2px solid var(--mud-palette-primary-lighten, var(--mud-palette-primary));
    outline-offset: 2px
}

.neon-splash-screen {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pn-splash-bg);
    color: var(--pn-splash-text);
    font-family: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    opacity: 1;
    transition: opacity .35s var(--pn-splash-curve), transform .35s var(--pn-splash-curve)
}

.neon-splash-screen.is-leaving {
    opacity: 0;
    transform: scale(1.015);
    pointer-events: none
}

.neon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    text-align: center
}

.neon-logo-container {
    position: relative;
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px
}

.neon-logo-glow {
    position: absolute;
    inset: -40%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pn-splash-halo) 0, transparent 65%);
    animation: pn-splash-halo 3.2s ease-in-out infinite
}

.neon-logo {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: pn-splash-breathe 2.4s ease-in-out infinite
}

.neon-title {
    margin: 22px 0 0;
    font-size: 1.75rem;
    font-family: "Rajdhani", "Outfit", system-ui, sans-serif;
    font-weight: 700;
    letter-spacing: .01em;
    opacity: 0;
    animation: pn-splash-rise .6s var(--pn-splash-curve) .15s forwards
}

.neon-loading-line {
    position: relative;
    width: 120px;
    height: 2px;
    margin-top: 26px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--pn-splash-track);
    opacity: 0;
    animation: pn-splash-appear .6s ease .35s forwards
}

.neon-loading-line span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--pn-splash-accent), transparent);
    animation: pn-splash-slide 1.8s ease-in-out infinite
}

.neon-loading-text {
    margin: 12px 0 0;
    font-size: .8rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--pn-splash-muted);
    opacity: 0;
    animation: pn-splash-appear .6s ease .45s forwards
}

/* Appears by itself after 15 s, in case the circuit never connects. */
.neon-slow-hint {
    margin: 14px 0 0;
    font-size: .85rem;
    color: var(--pn-splash-muted);
    opacity: 0;
    animation: pn-splash-appear .6s ease 15s forwards
}

.neon-slow-hint a {
    color: var(--pn-splash-accent);
    text-decoration: none
}

@media (max-width: 480px) {
    .neon-logo-container { width: 88px; height: 88px }
    .neon-title { font-size: 1.25rem }
}

@media (prefers-reduced-motion: reduce) {
    .neon-logo, .neon-logo-glow, .neon-loading-line span { animation: none }
    .neon-loading-line span { width: 100%; opacity: .5 }
    .neon-title, .neon-loading-line, .neon-loading-text, .neon-slow-hint { animation-duration: .12s; animation-delay: 0s }
    .neon-slow-hint { animation-delay: 15s }
    .neon-splash-screen, .neon-splash-screen.is-leaving { transition: opacity .12s linear; transform: none }
}