/* ═══════════════════════════════════════
   KEIMESH — LOGO Y PRELOADER
   ═══════════════════════════════════════ */

/* Logo de la barra de navegación */
.keimesh-logo {
    width: 150px;
    height: 55px;
    object-fit: contain;
    display: block;
}

/* Contenedor del logo del preloader */
#logo-cont {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    pointer-events: none;
}

/* Nuevo logo PNG */
.preloader-logo{
    width:180px;
    max-width:80vw;
    height:auto;
    display:block;
    object-fit:contain;

    opacity:0;
    transform:scale(.7);

    filter:drop-shadow(0 0 18px rgba(0, 212, 255, .35));

    /* APARICIÓN DEL LOGO MÁS LENTA */
    animation:logoAppear 4s ease-in-out forwards;
}

/* Texto KEI / mesh */
#brand-word {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.bl{
    font-family:'Space Grotesk',sans-serif;
    font-size:3rem;
    font-weight:700;
    color:#fff;

    opacity:0;
    display:inline-block;

    transform:translateY(24px);

    text-shadow:0 0 28px rgba(0, 212, 255, .35);

    /* APARICIÓN MÁS LENTA */
    animation:letterAppear 2s ease-in-out forwards;
}

.bl.accent {
    color: var(--purple);
}
/* Retraso entre KEI y mesh */

.bl:nth-child(1){
    animation-delay:1.5s;
}

.bl:nth-child(2){
    animation-delay:2.3s;
}


/* ═══════════════════════════════
   ANIMACIÓN LENTA DEL LOGO
═══════════════════════════════ */

@keyframes logoAppear{

    0%{
        opacity:0;
        transform:scale(.7);
        filter:
            drop-shadow(0 0 5px rgba(0, 212, 255, .1))
            brightness(1);
    }

    40%{
        opacity:.5;
        transform:scale(.85);
        filter:
            drop-shadow(0 0 25px rgba(0, 212, 255, .7))
            brightness(1.5);
    }

    70%{
        opacity:1;
        transform:scale(1.08);
        filter:
            drop-shadow(0 0 40px rgba(0, 212, 255, .9))
            brightness(1.8);
    }

    100%{
        opacity:1;
        transform:scale(1);
        filter:
            drop-shadow(0 0 18px rgba(0, 212, 255, .35))
            brightness(1);
    }
}


/* ═══════════════════════════════
   ANIMACIÓN LENTA DE LAS LETRAS
═══════════════════════════════ */

@keyframes letterAppear{

    0%{
        opacity:0;
        transform:translateY(24px);
        filter:blur(12px);
    }

    50%{
        opacity:.6;
        transform:translateY(10px);
        filter:blur(5px);
    }

    100%{
        opacity:1;
        transform:translateY(0);
        filter:blur(0);
    }
}

@media (max-width: 600px) {
    .preloader-logo {
        width: 220px;
    }

    .bl {
        font-size: 2.4rem;
    }
}