/**
 * Estilos para la Splash Screen de Trens
 */

/* **NUEVO: Paleta de colores del tema Trens** */
:root {
    --primary-accent-color: #A78BFA; /* Morado claro y vibrante */
    --primary-text-color: #F3F4F6;
    --secondary-text-color: #A1A1AA;
}

#trens-splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    
    background: radial-gradient(ellipse 160% 85% at 0% 100%, #000000 25%, transparent 80%),
                radial-gradient(ellipse at 0% 0%, rgba(147, 51, 234, 1) 0%, transparent 75%),
                radial-gradient(ellipse at 0% 100%, rgba(147, 51, 234, 1) 0%, transparent 75%),
                radial-gradient(ellipse at 100% 40%, rgba(102, 64, 65, 1) 0%, transparent 70%),
                #110E1B;
    background-attachment: fixed;

    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
    opacity: 1;
    visibility: visible;
}

#trens-splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
}

#trens-splash-screen .logo-container {
    animation: logo-pop 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

#trens-splash-screen .logo-container img {
    /* **MODIFICADO: Se aumenta el tamaño del logo** */
    width: 180px;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.4));
}

@keyframes logo-pop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


}