/* Start-up splash shared by the Web and the phone app (each index.html links this, see splash.js): the Zaika logo
   reveal, drawn live in colour on the login page's background (--bg in app.css). */
#splash {
    position: fixed;
    inset: 0;
    z-index: 999;
    overflow: hidden;
    background: #F5F6F8;
    transition: opacity 0.4s ease;
}

#splash.splash-hidden {
    opacity: 0;
    pointer-events: none;
}

/* The reveal: a stage holding one layer per piece of the logo; splash.js moves them by transform and opacity only. */
#splash .sp-stage { position: absolute; will-change: transform; }
#splash .sp-layer { position: absolute; will-change: transform, opacity; backface-visibility: hidden; }
#splash .sp-layer > svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* The reveal as a video: fitted inside the screen (its own background is this grey), shown once it is playing. */
#splash .sp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; background: transparent; }
#splash .sp-video.sp-on { opacity: 1; }

/* Only if the app is still loading once the animation is over. */
#splash .splash-wait {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 12%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #6B7280;
    font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Noto Sans Gujarati', system-ui, sans-serif;
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.4s ease;
}

#splash.splash-waiting .splash-wait {
    opacity: 1;
}

#splash .splash-dots {
    display: flex;
    gap: 8px;
}

#splash .splash-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #C11100;
    animation: splash-dot 1.2s infinite ease-in-out both;
}

#splash .splash-dots span:nth-child(2) { animation-delay: 0.15s; }
#splash .splash-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes splash-dot {
    0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    #splash, #splash * { animation: none !important; transition: none !important; }
}

/* The "unhandled error" bar must never hide behind the splash. */
#blazor-error-ui {
    z-index: 1000;
}