/* =========================================
   1. FLORES: Cambio a tonalidades rosa
========================================= */
.flower__leaf {
    background-color: #ff69b4 !important; /* HotPink */
    background-image: linear-gradient(to top, #ff1493, #ffb6c1) !important; /* DeepPink a LightPink */
}

.flower__leaf--4 {
    background-image: linear-gradient(to top, #ff1493, #ffb6c1) !important;
}

/* =========================================
   2. CONTENEDORES Y SECUENCIA
========================================= */
#starfall-container, 
#heart-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease-in-out;
}

#starfall-container {
    z-index: 1; /* Fondo */
}

#starfall-container.show {
    opacity: 1;
    visibility: visible;
}

#flowers-container {
    z-index: 10; /* Sobre las estrellas */
}

#heart-container {
    z-index: 20; /* Sobre todo lo demás */
    display: flex;
    align-items: center;
    justify-content: center;
}

#heart-container.show {
    opacity: 1;
    visibility: visible;
}

/* =========================================
   3. CORAZÓN Y TEXTO PARA MIRIAM
========================================= */
#canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    /* TRUCO: Elimina el fondo negro sólido del WebGL 
       haciéndolo transparente para ver la lluvia de estrellas */
    mix-blend-mode: screen; 
}

.love-text {
    position: relative;
    z-index: 21;
    color: #ffffff;
    font-family: 'Georgia', serif;
    font-size: 5rem; /* Tamaño del texto */
    text-shadow: 0 0 15px #ff1493, 0 0 30px #ff69b4, 0 0 45px #ffb6c1;
    pointer-events: none; /* Evita bloquear clics */
    animation: heartbeat-text 2s infinite alternate ease-in-out;
}

/* Animación de latido para el texto */
@keyframes heartbeat-text {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; }
}

/* Estilos base de estrellas (de starfall.css) */
body { margin: 0; overflow: hidden; background-color: black; }
#stars-section { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; }

/* Estilos del botón */
#overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    z-index: 1000;
}
#start-btn { padding: 20px 40px; font-size: 24px; cursor: pointer; }

#canvas { position: absolute; top: 0; left: 0; z-index: 1; }
.hidden { display: none; }

/* Esto congela toda animación hasta que quitemos la clase */
body.is-paused * {
    animation-play-state: paused !important;
}

#start-screen {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: radial-gradient(circle, #1a001a, #000);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#start-btn {
    background: transparent;
    color: #ffb6c1;
    border: 2px solid #ff1493;
    padding: 20px 50px;
    font-size: 2rem;
    font-family: 'Georgia', serif;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 15px #ff1493, inset 0 0 15px #ff1493;
    transition: all 0.3s ease;
    animation: pulse 2s infinite alternate;
}

#start-btn:hover {
    background: #ff1493;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 0 30px #ff1493;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.05); opacity: 1; }
}