/* Importamos una fuente limpia y moderna desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;700&display=swap');

/* Estilos base del cuerpo de la página */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    /* Un fondo oscuro profundo para que las partículas resalten */
    background-color: #0a0a1a; 
    color: #ffffff;
    overflow: hidden; /* Evita barras de scroll no deseadas */
}

/* Contenedor de la escena 3D que ocupa toda la pantalla */
#scene-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Se posiciona detrás del contenido de texto */
}

/* Contenedor del texto, centrado y con efecto de "glassmorphism" */
.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Se posiciona encima de la animación */
    text-align: center;
    
    /* Estilos para el efecto de vidrio esmerilado */
    background: rgba(10, 10, 26, 0.4); /* Fondo oscuro semitransparente */
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%); /* Compatibilidad con Safari */
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    padding: 40px 60px;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra de texto para legibilidad */
}

/* Estilo para el subtítulo "IA Resuelve Group" */
.subtitle {
    font-size: 1.2em;
    font-weight: 300;
    letter-spacing: 3px;
    margin-bottom: 5px;
    opacity: 0.8;
    text-transform: uppercase; /* Todo en mayúsculas */
}

/* Estilo para el título principal "Coming Soon" */
h1 {
    font-size: 4em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    /* Un degradado sutil para el texto */
    background: linear-gradient(45deg, #ffffff, #bbdefb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Animación de entrada para el contenido */
@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -40%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

.content {
    animation: fadeIn 2s ease-out forwards;
}