/* ==========================================================================
   assets/css/splash.css | MAGNA Cinematic Loading Screen
   ========================================================================== */

/* 1. CONTENEDOR PRINCIPAL
   -------------------------------------------------------------------------- */
#splash-screen {
    position: fixed;
    inset: 0; /* Cubre toda la pantalla */
    background-color: var(--color-warm-canvas); /* Warm Canvas (Magna.md) */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Siempre por encima de todo */
    transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
    will-change: transform;
}

/* Estado cuando se oculta */
#splash-screen.hidden {
    transform: translateY(-100%);
}

/* 2. CONTENIDO Y LOGO
   -------------------------------------------------------------------------- */
.splash-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px;
    overflow: hidden;
}

.img-splash {
    max-width: 250px;
    height: auto;
    margin-bottom: 25px;
    display: block;
    /* Coreografía de entrada del logo */
    animation: 
        reveal-logo 1.8s cubic-bezier(0.2, 1, 0.3, 1) forwards,
        pulse-logo 3s ease-in-out 1.8s infinite;
    will-change: transform, opacity;
}

/* 3. EFECTO DE DESTELLO (SHINE)
   -------------------------------------------------------------------------- */
.splash-content::after {
    content: '';
    position: absolute;
    top: 0; 
    left: -150%;
    width: 50%; 
    height: 100%;
    background: linear-gradient(
        to right, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
    );
    transform: skewX(-25deg);
    animation: shine-splash 2.5s infinite;
}

/* 4. ANIMACIONES (KEYFRAMES)
   -------------------------------------------------------------------------- */

/* Entrada elegante: Aparece desde abajo con desenfoque */
@keyframes reveal-logo {
    0% { 
        opacity: 0; 
        transform: scale(0.9) translateY(30px); 
        filter: blur(15px) brightness(1.5); 
    }
    100% { 
        opacity: 1; 
        transform: scale(1) translateY(0); 
        filter: blur(0) brightness(1); 
    }
}

/* Latido constante de marca */
@keyframes pulse-logo {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.03); opacity: 0.8; }
}

/* Brillo que atraviesa el logo */
@keyframes shine-splash {
    0% { left: -150%; }
    100% { left: 150%; }
}

/* 5. BLOQUEO DE SCROLL
   -------------------------------------------------------------------------- */
body.is-loading {
    overflow: hidden !important;
    height: 100vh !important;
}

/* Accesibilidad */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}