/* --- Reseteo Básico y Estilos del Body --- */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Evita barras de scroll */
    background-color: #0a0a14; /* Un fondo azul oscuro, casi negro */
    color: #e0e0e0;
    font-family: 'Orbitron', sans-serif; /* Fuente con temática tecnológica */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- Contenedor Principal --- */
.landing-container {
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Contenedor del Logo y sus Efectos --- */
.logo-wrapper {
    position: relative;
    width: 250px; /* Ajusta el tamaño según tu logo */
    height: 250px; /* Ajusta el tamaño según tu logo */
    margin-bottom: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%; /* Asegura que el contenedor es circular para los glows */
}

/* --- Estilo y Animación del Logo --- */
.logo {
    max-width: 100%;
    max-height: 100%;
    position: relative;
    z-index: 2;
    animation: float 6s ease-in-out infinite, fadeIn 2s ease-out;
    border-radius: 50%; /* Si el logo tiene bordes, los redondea */
}

/* --- Título y Subtítulo --- */
.title {
    font-size: 3rem;
    margin: 0;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #ffffff;
    text-shadow: 0 0 10px #00aaff, 0 0 20px #00aaff, 0 0 30px #00aaff;
    animation: textFlicker 4s infinite alternate;
}

.subtitle {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    letter-spacing: 2px;
    color: #a0c4ff;
    animation: fadeIn 3s ease-out;
}


/* --- EFECTOS DE ANIMACIÓN CON KEYFRAMES --- */

/* Animación de flotación para el logo */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-15px); /* Menos movimiento para un efecto más sutil */
    }
    100% {
        transform: translateY(0px);
    }
}

/* Animación de aparición */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Animación de "flicker" o parpadeo para el título */
@keyframes textFlicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
        0 0 4px #fff,
        0 0 11px #00aaff,
        0 0 19px #00aaff,
        0 0 40px #00aaff,
        0 0 80px #00aaff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
}

/* Efecto de resplandor sutil detrás del logo */
.glow {
    position: absolute;
    width: 100%; /* Del mismo tamaño que el wrapper para que sea circular */
    height: 100%;
    background: radial-gradient(circle, rgba(0, 170, 255, 0.3) 0%, rgba(0, 170, 255, 0) 70%);
    border-radius: 50%; /* Asegura que el glow sea circular */
    z-index: 1;
    animation: pulse 4s ease-in-out infinite alternate;
}

/* Animación del resplandor (pulso) */
@keyframes pulse {
    from {
        transform: scale(0.9);
        opacity: 0.7;
    }
    to {
        transform: scale(1.05); /* Ligeramente más grande para un pulso suave */
        opacity: 1;
    }
}

/* Nuevo efecto: Circular Glow Pulsante Alrededor del Logo */
.circular-glow {
    position: absolute;
    width: 110%; /* Ligeramente más grande que el logo */
    height: 110%;
    border-radius: 50%;
    border: 2px solid rgba(0, 170, 255, 0.6); /* Un borde de luz */
    box-shadow: 0 0 15px rgba(0, 170, 255, 0.8), 0 0 30px rgba(0, 170, 255, 0.4);
    z-index: 0; /* Detrás del logo y del glow principal */
    animation: circularPulse 3s ease-in-out infinite alternate;
}

/* Animación del glow circular */
@keyframes circularPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.8;
        box-shadow: 0 0 10px rgba(0, 170, 255, 0.7), 0 0 20px rgba(0, 170, 255, 0.3);
    }
    100% {
        transform: scale(1.05);
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), 0 0 40px rgba(0, 170, 255, 0.6);
    }
}

/* Si quieres añadir un efecto de "escaneo" circular o de "carga" */
.scanline-circular {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border-top: 3px solid transparent;
    border-right: 3px solid rgba(0, 170, 255, 0.8);
    border-bottom: 3px solid rgba(0, 170, 255, 0.6);
    border-left: 3px solid transparent;
    animation: rotateScan 4s linear infinite;
    z-index: 3; /* Encima del logo para que parezca que lo "escanea" */
    opacity: 0.8;
}

@keyframes rotateScan {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}