/* Shared splash styles used by index.html and React AppLoading */
#splash {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* light theme background */
    background: #F4F4F5;
    z-index: 99999;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 1;
    transition: opacity 360ms ease, transform 360ms ease;
    will-change: opacity, transform;
}

/* fade-out modifier applied by JS */
#splash.splash-fade-out {
    opacity: 0;
    transform: scale(0.995) translateZ(0);
    pointer-events: none;
}

/* Pulsing logo */
.splash-logo {
    position: relative; /* needed for pseudo-element shadow */
    width: 136px;
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    background: #ffffff; /* circle background matching logo background */
    border-radius: 50%;
    padding: 16px;
    box-sizing: border-box;
    /* animate only transform for the element itself (cheap) */
    animation: splash-bounce 1000ms cubic-bezier(.2,.9,.3,1) infinite;
    will-change: transform; /* hint to use compositor */
    transform: translateZ(0); /* promote to its own layer */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    overflow: visible; /* allow shadow pseudo-element to show */
}

/* Soft shadow implemented as a pseudo-element so we animate transform/opacity (cheap) */
.splash-logo::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px; /* sits slightly below the logo */
    width: 70%;
    height: 14px;
    transform: translateX(-50%) scaleX(1);
    /* Use a radial gradient instead of blur to simulate a soft shadow without forcing paint work */
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.04) 60%);
    border-radius: 50%;
    /* removed filter: blur(6px); (expensive) */
    pointer-events: none;
    will-change: transform, opacity;
    animation: splash-shadow 1000ms cubic-bezier(.2,.9,.3,1) infinite;
}

.splash-logo__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 50%; /* ensure the image itself is rounded */
    transform: translateZ(0);
}

@keyframes splash-bounce {
    0% {
        transform: translateZ(0) scale3d(1, 1, 1);
    }
    50% {
        transform: translateZ(0) scale3d(1.5, 1.5, 1);
    }
    100% {
        transform: translateZ(0) scale3d(1, 1, 1);
    }
}

@keyframes splash-shadow {
    0% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.06;
    }
    50% {
        transform: translateX(-50%) scaleX(1.3);
        opacity: 0.14;
    }
    100% {
        transform: translateX(-50%) scaleX(1);
        opacity: 0.06;
    }
}

/* keep legacy dot styles removed — no three-dot loader */

@media (prefers-color-scheme: dark) {
    /* dark theme keeps the darker backdrop */
    #splash {
        background: rgba(6, 8, 10, 0.96);
    }

    .splash-logo {
        /* keep a subtle drop shadow in dark mode to separate the white circle */
        filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.4));
    }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .splash-logo,
    .splash-logo::after {
        animation: none !important;
        transition: none !important;
    }
}