/* Pantalla completa oscura de carga */
#loader {
    position: fixed;
    inset: 0;
    background-color: #050507;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.logo-animation {
    display: flex;
    gap: 15px;
}

/* Animación de letras de contorno a sólido */
.letter {
    font-size: clamp(3.5rem, 8vw, 6.5rem);
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 2px #ffffff;
    opacity: 0;
    transform: translateY(10px);
    animation: letterAppear 0.12s forwards ease-out;
}

.letter:nth-child(1) { animation-delay: 0.00s; }
.letter:nth-child(2) { animation-delay: 0.07s; }
.letter:nth-child(3) { animation-delay: 0.14s; }
.letter:nth-child(4) { 
    animation-delay: 0.21s; 
    color: #e50914;
    -webkit-text-stroke: 0px; 
    text-shadow: 0 0 25px rgba(229, 9, 20, 0.8);
}

.loader-sub {
    margin-top: 15px;
    letter-spacing: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #a0a0b0;
    opacity: 0;
    animation: fadeIn 0.1s forwards 0.35s;
}

/* Estado oculto */
#loader.hide {
    opacity: 0;
    visibility: hidden;
}

@keyframes letterAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    to { opacity: 1; }
}