/* ################ CSS para la página index.html ####################*/
/* Estilos para la pantalla de inicio del juego */
body, html {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #fff;
    font-family: Arial, sans-serif;
}

.container {
    text-align: center;
    width: 90%;
    max-width: 360px;
    cursor: pointer; 
}

/* Ajuste de tamaño del logo */
.logo {
    width: 80%;
    max-width: 300px;
    height: auto;
}

/* Animación de respiración del texto */
@keyframes breathing {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.start-text {
    font-size: 1.2em;
    margin-top: 10px;
    color: #333;
    animation: breathing 3s infinite;
    font-family: 'Alegreya Sans', sans-serif; 
    font-weight: bold;
}

/* Contenedor de chispas */
.sparkle-container {
    position: relative;
}

/* Chispa animada */
.sparkle {
    position: absolute;
    width: 30px; 
    height: 30px;
    background-size: cover;
    animation: sparkleAnimation 1.2s steps(6) infinite;
}

/* Posiciones de cada chispa con un retraso para cada uno */
.sparkle-1 { top: -5px; left: 40px; animation-delay: 0s; }
.sparkle-2 { top: 40px; left: 142px; animation-delay: 0.2s; }
.sparkle-3 { top: -5px; left: 218px; animation-delay: 0.7s; }

/* Secuencia de la animación con imágenes PNG empezamos con el spark1 y terminamos el spark1 */
@keyframes sparkleAnimation {
    0% { background-image: url('../images/07_animations/01_sparkle_frames/spark1.png'); }
    16.6% { background-image: url('../images/07_animations/01_sparkle_frames/spark2.png'); }
    33.3% { background-image: url('../images/07_animations/01_sparkle_frames/spark3.png'); }
    50% { background-image: url('../images/07_animations/01_sparkle_frames/spark4.png'); }
    66.6% { background-image: url('../images/07_animations/01_sparkle_frames/spark5.png'); }
    83.3% { background-image: url('../images/07_animations/01_sparkle_frames/spark6.png'); }
    100% { background-image: url('../images/07_animations/01_sparkle_frames/spark1.png'); }
}