/* CSS/splash.css — Pantalla de carga de Felix (#global-splash-screen).
   Fondo con resplandores de la marca, logo con anillo giratorio y halo que respira, barra de progreso indeterminada.
   Usa los colores del tema (claro/oscuro). El JS solo cambia el texto del <h3> y el display/opacity del contenedor. */

.fx-splash {
    position: fixed; inset: 0; z-index: 9999; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    background: var(--view-bg-color, var(--input-bg, #101011)); color: var(--text-primary, #e8eaf0);
    transition: opacity 0.5s ease;
}
/* resplandores de la llama, muy suaves */
.fx-splash-glow { position: absolute; inset: 0; pointer-events: none; }
.fx-splash-glow::before, .fx-splash-glow::after {
    content: ''; position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.32;
    animation: fx-drift 9s ease-in-out infinite alternate;
}
.fx-splash-glow::before { width: 46vmax; height: 46vmax; left: -12vmax; top: -14vmax; background: #ef4444; }
.fx-splash-glow::after { width: 40vmax; height: 40vmax; right: -12vmax; bottom: -14vmax; background: #f59e0b; animation-delay: -4s; }
@keyframes fx-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(4vmax, 3vmax, 0) scale(1.12); } }

.fx-splash-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 24px; text-align: center; }

.fx-splash-logo { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.fx-splash-logo::before {                     /* halo que respira detrás del logo */
    content: ''; position: absolute; inset: 14px; border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.45), rgba(245, 158, 11, 0.16) 60%, transparent 72%);
    filter: blur(14px); animation: fx-breathe 2.4s ease-in-out infinite;
}
.fx-splash-ring {                              /* anillo de degradado que gira */
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0 55%, #f59e0b 80%, #ef4444 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: fx-spin 1.6s linear infinite;
}
.fx-splash-logo img { position: relative; width: 78px; height: auto; filter: drop-shadow(0 10px 22px rgba(239, 68, 68, 0.35)); animation: fx-float 2.4s ease-in-out infinite; }
@keyframes fx-spin { to { transform: rotate(360deg); } }
@keyframes fx-breathe { 0%, 100% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes fx-float { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-3px); } }

.fx-splash-brand { margin: 22px 0 0; font-size: 1.6rem; font-weight: 800; letter-spacing: 0.32em; text-indent: 0.32em; color: var(--text-primary, #fff); }
.fx-splash-text { margin: 8px 0 0; font-size: 0.98rem; font-weight: 600; color: var(--text-secondary, #9aa3b2); }

.fx-splash-bar { width: min(220px, 60vw); height: 4px; margin-top: 18px; border-radius: 999px; overflow: hidden; background: rgba(128, 128, 128, 0.22); }
.fx-splash-bar i { display: block; width: 40%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #ef4444); animation: fx-slide 1.3s ease-in-out infinite; }
@keyframes fx-slide { from { transform: translateX(-110%); } to { transform: translateX(270%); } }

.fx-splash-foot { position: absolute; z-index: 1; left: 0; right: 0; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); margin: 0; text-align: center; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; color: var(--text-secondary, #9aa3b2); opacity: 0.8; }

@media (prefers-reduced-motion: reduce) {
    .fx-splash-glow::before, .fx-splash-glow::after, .fx-splash-logo::before, .fx-splash-logo img { animation: none; }
    .fx-splash-ring { animation-duration: 6s; }
    .fx-splash-bar i { animation-duration: 3s; }
}