/* ══════════════════════════════════════
   ENTRY LOADER — Esfera de partículas
   Inspirado en la animación 3D orbital
══════════════════════════════════════ */

#entry-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #0d0f1a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

#entry-loader.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#entry-loader-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

/* Contenedor de la esfera de partículas */
#particle-sphere {
    position: relative;
    width: 160px;
    height: 160px;
    transform-style: preserve-3d;
    animation: loader-rotate 16s infinite linear;
}

@keyframes loader-rotate {
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Cada partícula generada por JS */
#particle-sphere .lp {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    top: 50%;
    left: 50%;
    margin: -1.5px 0 0 -1.5px;
}

/* Texto debajo de la esfera */
#entry-loader-text {
    color: #3BBA9C;
    font-family: 'Segoe UI', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
    animation: loader-pulse 1.8s ease-in-out infinite;
}

@keyframes loader-pulse {
    0%, 100% { opacity: 0.5; }
    50%       { opacity: 1;   }
}